Overview

What is @authrim/sveltekit?

@authrim/sveltekit is a full-stack authentication SDK for SvelteKit applications. It wraps @authrim/core with SvelteKit-specific integrations — server hooks, Svelte stores, pre-built components, and page templates.

flowchart TB
    subgraph Server ["Server (hooks.server.ts)"]
        direction LR
        Handle["createAuthHandle()"]
        SSM["ServerSessionManager"]
        Load["requireAuth() /
createAuthLoad()"]
    end

    subgraph Client ["Client (Browser)"]
        direction LR
        Auth["AuthrimClient"]
        Stores["Svelte Stores"]
        Components["Components"]
        UI["UI Library"]
    end

    subgraph Core ["@authrim/core"]
        direction LR
        CoreAuth["OIDC / OAuth"]
        CoreCrypto["PKCE / WebAuthn"]
    end

    Handle --> SSM
    SSM --> Load
    Load -->|SSR data| Auth
    Auth --> Stores
    Auth --> Core
    Stores --> Components
    Components --> UI

Package Exports

Export Path	Purpose	Example Imports
`@authrim/sveltekit`	Client entry — factory, types, context	`createAuthrim`, `AuthrimClient`, `AuthStores`
`@authrim/sveltekit/server`	Server hooks and load helpers	`createAuthHandle`, `requireAuth`, `createAuthLoad`
`@authrim/sveltekit/stores`	Store factory (advanced)	`createAuthStores`
`@authrim/sveltekit/components`	Core Svelte components	`AuthProvider`, `ProtectedRoute`, `SignInButton`
`@authrim/sveltekit/ui`	Full UI component library	`Button`, `Input`, `EmailCodeForm`, `PasskeyList`
`@authrim/sveltekit/ui/styles`	Theme CSS	`import '@authrim/sveltekit/ui/styles'`
`@authrim/sveltekit/ui/templates`	Page templates	`LoginTemplate`, `ConsentTemplate`

Client API Namespaces

AuthrimClient exposes authentication features through namespaces:

Namespace	Methods	Purpose
`auth.passkey`	`login()`, `signUp()`, `register()`, `isSupported()`	WebAuthn passkey authentication
`auth.emailCode`	`send()`, `verify()`, `hasPendingVerification()`	Email OTP authentication
`auth.social`	`loginWithPopup()`, `loginWithRedirect()`, `handleCallback()`	Social provider authentication
`auth.session`	`get()`, `validate()`, `refresh()`, `isAuthenticated()`, `getUser()`, `clearCache()`	Session management
`auth.consent`	`getData()`, `submit()`	OAuth consent screen
`auth.deviceFlow`	`submit()`	Device authorization (RFC 8628)
`auth.ciba`	`getData()`, `approve()`, `reject()`	CIBA flow
`auth.loginChallenge`	`getData()`	Login challenge screen
`auth.signIn`	`passkey()`, `social()`	Shortcut methods
`auth.signUp`	`passkey()`	Shortcut methods
`auth.signOut()`	—	Sign out with optional redirect
`auth.stores`	`session`, `user`, `isAuthenticated`, `loadingState`, `error`	Reactive Svelte stores
`auth.on()`	—	Event subscription

Svelte 4 / 5 Compatibility

Aspect	Details
Peer dependency	`svelte ^4.0.0 \|\| ^5.0.0`
SDK internal syntax	Svelte 4 (`export let`, `<slot>`, `on:event`)
Your app code	Use Svelte 5 runes (`$state()`, `$props()`, `$derived()`, `$effect()`)
Compatibility	SDK components work unchanged in Svelte 5 projects

This documentation uses Svelte 5 runes for all examples. See Configuration for a Svelte 4 syntax reference.

Relationship to Web SDK

@authrim/sveltekit shares the same core authentication API as @authrim/web, but adds SvelteKit-specific features:

Feature	Web SDK	SvelteKit SDK
Authentication API	✓	✓ (same)
Server hooks / SSR	—	✓
Svelte stores	—	✓
Svelte components	—	✓
UI library & templates	—	✓
SvelteKit routing integration	—	✓

For authentication flow details (WebAuthn internals, email code mechanics, social login protocols), see the Web SDK documentation.

Next Steps

Installation & Setup — Get up and running
Server-Side Integration — Server hooks and SSR
Authentication — Passkey, email code, social login