Docs

SvelteKit SDK

A server hook and helpers for SvelteKit applications.

The SvelteKit SDK is a handle hook that proxies and verifies sessions on the server. The login and logout widgets come from the Svelte SDK.

Generated setup

The CLI writes src/hooks.server.ts and the auth pages, declares the hook's settings in src/env.ts (adding them to the app's own file when it has one), and writes the backend URL, the project secret, and the project id to .env.local. It needs SvelteKit 3.

Install

pnpm add @zitadel/sdk-sveltekit@latest @zitadel/sdk-svelte@latest

Setup

The CLI adds the server hook, the pages, environment files, and both SDK packages.

src/hooks.server.ts
src/env.ts
src/routes/+layout.svelte
src/routes/+page.svelte
src/routes/login/+page.svelte
src/routes/register/+page.svelte
src/routes/profile/+page.svelte
.env.local
.env.example
package.json

Every setup also writes zitadel.json and the .zitadel/ folder, adds its entries to .gitignore, and adds managed sections to AGENTS.md and README.md.

Runtime model

The hook proxies same-origin /__nextgen/* requests to the backend, attaching the project secret only to the session handoff.
It verifies the session token and puts the result on event.locals.nextgenAuth; read it with getAuth(event) in a load function or endpoint.
It redirects unauthenticated requests for protectedRoutes to loginPath, with the requested path and query string in ?next=, where the login widget returns after sign-in.

Verify

  • Start the app with npm run dev. Setup already wrote the URL, the secret, and the project id to .env.local.
  • Visit /login and register a user.
  • Confirm /profile shows signed-in state.
  • Log out and confirm /profile redirects to /login.

See also

Was this helpful?

On this page

InstallSetupRuntime modelVerifySee also