Skip to main content

Qwik

Overview​

Qwik is a framework for building resumable web applications with instant-on interactivity and optimal performance. This example demonstrates how to integrate Zitadel using the OAuth 2.0 PKCE flow to authenticate users securely and maintain sessions across the app.

Auth library​

This example uses @auth/qwik, a Qwik adapter for @auth/core (formerly Auth.js/NextAuth.js), which implements the OpenID Connect (OIDC) flow, manages PKCE, performs token exchange, and exposes helpers for session state. The core library handles authentication across multiple frameworks and provides secure token storage with automatic token refresh capabilities.

What this example demonstrates​

This Qwik application showcases a complete authentication implementation using ZITADEL with the Authorization Code Flow with PKCE. The example includes secure sign-in functionality that redirects users to ZITADEL's hosted login page, handles the OAuth callback to exchange authorization codes for access tokens, and manages sessions with JWT tokens stored in encrypted server-side cookies.

Route protection is implemented using Qwik City's onRequest handler, which performs server-side authentication checks before rendering protected pages. Unauthenticated users attempting to access secured routes are automatically redirected to the login page with a callback URL to return them to their intended destination after successful authentication. The application displays comprehensive user profile information including standard OIDC claims like name and email, as well as ZITADEL-specific claims such as organization membership and project roles.

Sign-out functionality implements federated logout through ZITADEL's end-session endpoint, ensuring that users are logged out from both the application and ZITADEL's single sign-on session. The logout process includes CSRF protection using state parameters validated through secure cookies, followed by proper cleanup of session data and redirection back to the application.

Getting started​

Prerequisites​

Before running this example, you need to create and configure a PKCE application in the Zitadel Console. Follow the PKCE Application Setup guide to:

  1. Create a new Web application in your Zitadel project
  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/api/auth/logout/callback)
  5. Copy your Client ID for use in the next steps

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

  1. Clone the repository.
  2. Create a .env.local file and configure it with the values from your Zitadel application: 
    VITE_PORT=3000
    VITE_SESSION_SECRET=your-very-secret-and-strong-session-key
    VITE_SESSION_DURATION=3600
    VITE_ZITADEL_DOMAIN=https://your-instance.zitadel.cloud
    VITE_ZITADEL_CLIENT_ID=your_client_id_from_console
    VITE_ZITADEL_CLIENT_SECRET=your-randomly-generated-client-secret
    VITE_ZITADEL_CALLBACK_URL=http://localhost:3000/auth/callback/zitadel
    VITE_ZITADEL_POST_LOGOUT_URL=http://localhost:3000/api/auth/logout/callback
    Replace these values with:
    • Your actual Zitadel instance URL (the Issuer from your application settings)
    • The Client ID you copied when creating the application
    • A randomly generated session secret (generate using: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))")
    • A randomly generated client secret value (Auth.js requires this for internal configuration)
    • The redirect URI you configured in the PKCE setup (must match exactly)
    • The post-logout redirect URI you configured (must match exactly)
  3. Install dependencies using npm and start the development server: 
    npm install
    npm run dev

The application will be available at http://localhost:3000.

Learn more and resources​

Was this page useful?