--- title: SvelteKit description: "Integrate ZITADEL authentication into SvelteKit applications using the OAuth 2.0 PKCE flow." sidebar_label: SvelteKit framework_url: https://kit.svelte.dev auth_library: "@auth/sveltekit" auth_library_url: https://www.npmjs.com/package/@auth/sveltekit example_repo: https://github.com/zitadel/example-auth-sveltekit auth_flow: pkce status: stable --- ## Overview [SvelteKit](https://kit.svelte.dev) is a framework for building web applications with flexible filesystem-based routing and a unified approach to server-side and client-side logic. This example demonstrates how to integrate **Zitadel** using the **[OAuth 2.0 PKCE flow](https://oauth.net/2/pkce/)** to authenticate users securely and maintain sessions across your application. #### Auth library This example uses **[@auth/sveltekit](https://www.npmjs.com/package/@auth/sveltekit)**, the SvelteKit integration of **[@auth/core](https://www.npmjs.com/package/@auth/core)** (formerly NextAuth.js). Auth.js provides a complete authentication solution that handles the [OpenID Connect](https://zitadel.com/docs/apis/openidoauth/endpoints) protocol, manages [PKCE](https://oauth.net/2/pkce/) code generation and verification, performs secure token exchange, and provides session management utilities across your SvelteKit application. --- ## What this example demonstrates This example provides a complete authentication implementation showing how to secure a [SvelteKit](https://kit.svelte.dev) application with [Zitadel](https://zitadel.com/docs). Users start on a public landing page and click a login button to authenticate through Zitadel's [authorization server](https://zitadel.com/docs/apis/openidoauth/endpoints) using the **[PKCE flow](https://oauth.net/2/pkce/)**. After successful authentication, they're redirected to a protected profile page that displays their [user information and claims](https://zitadel.com/docs/apis/openidoauth/claims). The example demonstrates route protection using [SvelteKit's server-side load functions](https://kit.svelte.dev/docs/load) that verify [session state](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint) before rendering protected pages. Authentication state is managed through [@auth/sveltekit hooks](https://kit.svelte.dev/docs/load) that verify [session state](https://zitadel.com/docs/apis/openidoauth/endpoints#token-endpoint) before rendering protected pages. Authentication state is managed through [@auth/sveltekit hooks](https://www.npmjs.com/package/@auth/sveltekit), which integrate with [SvelteKit's hooks system](https://kit.svelte.dev/docs/load) that verify [session state](https://zitadel.com/docs/apis/openidoauth/endpoints#token-endpoint) before rendering protected pages. Authentication state is managed through [@auth/sveltekit hooks](https://www.npmjs.com/package/@auth/sveltekit), which integrate with [SvelteKit's hooks system](https://kit.svelte.dev/docs/hooks) to provide session data throughout your application. The implementation includes automatic [access token refresh](https://kit.svelte.dev/docs/load) that verify [session state](https://zitadel.com/docs/apis/openidoauth/endpoints#token-endpoint) before rendering protected pages. Authentication state is managed through [@auth/sveltekit hooks](https://www.npmjs.com/package/@auth/sveltekit), which integrate with [SvelteKit's hooks system](https://kit.svelte.dev/docs/hooks) to provide session data throughout your application. The implementation includes automatic [access token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) to maintain long-lived sessions without requiring users to re-authenticate. The logout flow implements **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** with proper CSRF protection, terminating both the local application session and the Zitadel session before redirecting users back to your application. Custom error pages provide user-friendly messages for authentication failures, and the example includes comprehensive security headers configured through [SvelteKit's hooks](https://kit.svelte.dev/docs/hooks). --- ## Getting started ### Prerequisites Before running this example, you need to create and configure a PKCE application in the [ZITADEL Management Console](https://zitadel.com/docs/guides/manage/console/console-overview). Follow the PKCE application setup guide to: 1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects-overview) 2. Configure it to use the PKCE authentication method 3. Set up your redirect URIs (e.g., `http://localhost:3000/auth/callback/zitadel` for development) 4. Configure post-logout redirect URIs (e.g., `http://localhost:3000/auth/logout/callback`) 5. Copy your **Client ID** for use in the next steps > **Note:** Make sure to enable **Dev Mode** in the [ZITADEL Management Console](https://zitadel.com/docs/guides/manage/console/console-overview) if you're using HTTP URLs during local development. For production, always use HTTPS URLs and disable Dev Mode. ### Run the example Once you have your Zitadel application configured: 1. Clone the [repository](https://github.com/zitadel/example-auth-sveltekit). 2. Create a `.env.local` file in the project root and configure it with the values from your [Zitadel application](https://zitadel.com/docs/guides/manage/console/applications-overview). **Use these exact environment variable names:** ``` SESSION_SECRET=your-very-secret-and-strong-session-key SESSION_DURATION=3600 ZITADEL_DOMAIN=https://your-instance.zitadel.cloud ZITADEL_CLIENT_ID=your_client_id_from_console ZITADEL_CLIENT_SECRET=your-randomly-generated-client-secret ZITADEL_CALLBACK_URL=http://localhost:3000/auth/callback/zitadel ZITADEL_POST_LOGOUT_URL=http://localhost:3000/auth/logout/callback NEXTAUTH_URL=http://localhost:3000 ``` Replace these values with: - A secure random string for `SESSION_SECRET` (generate using: `node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"`) - Your actual Zitadel instance URL for `ZITADEL_DOMAIN` (the issuer URL) - The **Client ID** you copied when creating the application - A random string for `ZITADEL_CLIENT_SECRET` (Auth.js requires this even though PKCE doesn't strictly need it) - The **redirect URI** you configured in the PKCE setup (must match exactly) - The **post-logout redirect URI** you configured 3. Install dependencies using [npm](https://www.npmjs.com) and start the development server: ```bash npm install npm run dev ``` 4. Navigate to `http://localhost:3000` to verify the authentication flow end-to-end. --- ## Learn more and resources * [PKCE concept](https://oauth.net/2/pkce/) * [Federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout) * [OIDC integration guide](https://zitadel.com/docs/guides/integrate/login/oidc/login-users) * [SvelteKit documentation](https://kit.svelte.dev) * [Auth.js (SvelteKit)](https://www.npmjs.com/package/@auth/sveltekit) * [Auth.js Core](https://www.npmjs.com/package/@auth/core) * [Example repository](https://github.com/zitadel/example-auth-sveltekit)