Skip to main content

Nuxt.js

Overview​

Nuxt.js is the intuitive Vue.js framework that enables you to create full-stack web applications with server-side rendering, file-based routing, and auto-imports. 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 @sidebase/nuxt-auth, a Nuxt module that wraps NextAuth.js/Auth.js for seamless authentication integration. Under the hood, it leverages next-auth with the openid-client library to implement the OpenID Connect (OIDC) protocol, manage PKCE, perform token exchange, and handle session management.

What this example demonstrates​

This Nuxt.js application showcases a complete authentication pattern using Zitadel with the PKCE flow. Users begin on a public landing page where they can initiate sign-in with Zitadel through the @sidebase/nuxt-auth module. After successful authentication, they're redirected to a protected profile page displaying their user information and claims.

The example implements secure session management using JWT tokens with automatic token refresh capabilities through refresh tokens. Protected routes automatically redirect unauthenticated users to the sign-in flow using Nuxt middleware, ensuring sensitive areas remain secure. The application also includes complete federated logout functionality that properly terminates both the local session and the Zitadel session through the end-session endpoint, redirecting users back to the application with proper CSRF protection using state parameters.

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/api/auth/callback/zitadel for development)
  4. Configure post-logout redirect URIs (e.g., http://localhost:3000/)
  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 file and configure it with the values from your Zitadel application. Use these exact environment variable names:
   PORT=3000
   SESSION_DURATION=3600
   NUXT_AUTH_SECRET=your-very-secret-and-strong-session-key
   ZITADEL_DOMAIN=https://your-zitadel-domain
   ZITADEL_CLIENT_ID=your-client-id
   ZITADEL_CLIENT_SECRET=your-randomly-generated-client-secret
   ZITADEL_CALLBACK_URL=http://localhost:3000/api/auth/callback/zitadel
   ZITADEL_POST_LOGOUT_URL=http://localhost:3000/
   AUTH_ORIGIN=http://localhost:3000

Replace these values with:

  • Your actual Zitadel instance URL (the Issuer from your ZITADEL instance settings)
  • The Client ID you copied when creating the application
  • A randomly generated NUXT_AUTH_SECRET for session encryption (generate using: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))")
  • The callback URI you configured in the PKCE setup (must match exactly)
  • The post-logout redirect URI you configured in the PKCE setup
  1. Install dependencies using npm and start the development server:
   npm install
   npm run dev

The application will be running at http://localhost:3000 where you can test the complete authentication flow.

Learn more and resources​

Was this page useful?