Vue.js

Overview

Vue.js is a progressive JavaScript framework for building user interfaces with reactive data binding, component composition, and a rich ecosystem. This example demonstrates how to integrate Zitadel using the OAuth 2.0 PKCE flow to authenticate users securely and maintain sessions across your Vue.js application.

Auth library

This example uses vue-oidc-context, a Vue 3 wrapper around oidc-client-ts, a Vue 3 wrapper around oidc-client-ts, which implements the OpenID Connect (OIDC) flow. The underlying oidc-client-ts**, a Vue 3 wrapper around **oidc-client-ts library manages PKCE, performs token exchange, and exposes helpers for session state management.

What this example demonstrates

This Vue.js application showcases a complete authentication pattern using Zitadel with PKCE. Users begin on a public landing page where they can initiate sign-in with Zitadel's authorization server. After successful authentication, the app handles the OAuth callback and redirects users to a protected profile page displaying their user information and claims.

The application uses vue-oidc-context to wrap authentication logic around Vue Router to wrap authentication logic around Vue Router navigation guards, automatically protecting routes and ensuring only authenticated users can access sensitive areas. The withAuthenticationRequired to wrap authentication logic around Vue Router navigation guards, automatically protecting routes and ensuring only authenticated users can access sensitive areas. The withAuthenticationRequired higher-order component secures individual routes by checking session state before rendering protected views.

The example includes secure sign-out functionality implementing federated logout through Zitadel's end-session endpoint, which terminates both the local application session and the Zitadel session. The app demonstrates proper handling of refresh tokens using the offline_access scope** through Zitadel's end-session endpoint, which terminates both the local application session and the Zitadel session. The app demonstrates proper handling of refresh tokens using the offline_access scope, and includes comprehensive error handling** through Zitadel's end-session endpoint, which terminates both the local application session and the Zitadel session. The app demonstrates proper handling of refresh tokens using the offline_access scope, and includes comprehensive error handling for authentication failures.

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 for development)
Configure post-logout redirect URIs
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, follow these steps:

Clone the repository.
Create a .env file in the project root and configure it with the values from your Zitadel application:

VITE_ZITADEL_DOMAIN=https://your-instance.zitadel.cloud
VITE_ZITADEL_CLIENT_ID=your_client_id_from_console
VITE_ZITADEL_CALLBACK_URL=http://localhost:3000/auth/callback
VITE_ZITADEL_POST_LOGOUT_URL=http://localhost:3000
VITE_POST_LOGIN_URL=/profile

Replace these values with:

Your actual Zitadel instance URL (the Issuer)
The Client ID you copied when creating the application in the PKCE setup
The redirect URI you configured (must match exactly)
The post-logout redirect URI for federated logout

Install dependencies using npm and start the development server:

npm install
npm run dev