SvelteKit

Overview

SvelteKit 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 to authenticate users securely and maintain sessions across your application.

Auth library

This example uses @auth/sveltekit, the SvelteKit integration of @auth/core (formerly NextAuth.js). Auth.js provides a complete authentication solution that handles the OpenID Connect protocol, manages 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 application with Zitadel. Users start on a public landing page and click a login button to authenticate through Zitadel's authorization server using the PKCE flow. After successful authentication, they're redirected to a protected profile page that displays their user information and claims.

The example demonstrates route protection using SvelteKit's server-side load functions that verify session state before rendering protected pages. Authentication state is managed through @auth/sveltekit hooks that verify session state before rendering protected pages. Authentication state is managed through @auth/sveltekit hooks, which integrate with SvelteKit's hooks system that verify session state before rendering protected pages. Authentication state is managed through @auth/sveltekit hooks, which integrate with SvelteKit's hooks system to provide session data throughout your application. The implementation includes automatic access token refresh that verify session state before rendering protected pages. Authentication state is managed through @auth/sveltekit hooks, which integrate with SvelteKit's hooks system to provide session data throughout your application. The implementation includes automatic access token refresh to maintain long-lived sessions without requiring users to re-authenticate.

The logout flow implements federated 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.

Getting started

Prerequisites

Before running this example, you need to create and configure a PKCE application in the ZITADEL Management Console. Follow the PKCE application setup guide to:

Create a new Web application in your Zitadel project
Configure it to use the PKCE authentication method
Set up your redirect URIs (e.g., http://localhost:3000/auth/callback/zitadel for development)
Configure post-logout redirect URIs (e.g., http://localhost:3000/auth/logout/callback)
Copy your Client ID for use in the next steps

Note: Make sure to enable Dev Mode in the ZITADEL Management Console 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:

Clone the repository.
Create a .env.local file in the project root and configure it with the values from your Zitadel application. 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
Install dependencies using npm and start the development server:
bash
```
npm install
npm run dev
```
Navigate to http://localhost:3000 to verify the authentication flow end-to-end.