React

Overview

React is a JavaScript library for building user interfaces with component composition, declarative views, 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 React application.

Auth library

This example uses react-oidc-context, a React wrapper around oidc-client-ts, a React wrapper around oidc-client-ts. The underlying oidc-client-ts**, a React wrapper around oidc-client-ts library implements the OpenID Connect (OIDC), a React wrapper around oidc-client-ts. The underlying oidc-client-ts library implements the OpenID Connect (OIDC) protocol, manages PKCE code challenge generation, performs secure token exchange, and exposes React hooks for managing authentication state throughout your application.

What this example demonstrates

This React application showcases a complete authentication flow using Zitadel application showcases a complete authentication flow using Zitadel with the secure PKCE standard. Users begin on a public landing page where they can initiate login through react-oidc-context application showcases a complete authentication flow using Zitadel with the secure PKCE standard. Users begin on a public landing page where they can initiate login through react-oidc-context, which redirects them to Zitadel's authorization endpoint application showcases a complete authentication flow using Zitadel with the secure PKCE standard. Users begin on a public landing page where they can initiate login through react-oidc-context, which redirects them to Zitadel's authorization endpoint for authentication. After successful authentication, the application handles the OAuth callback, exchanges the authorization code for access tokens, and establishes a secure session application showcases a complete authentication flow using Zitadel with the secure PKCE standard. Users begin on a public landing page where they can initiate login through react-oidc-context, which redirects them to Zitadel's authorization endpoint.

Protected routes are secured using react-oidc-context's application showcases a complete authentication flow using Zitadel with the secure PKCE standard. Users begin on a public landing page where they can initiate login through react-oidc-context withAuthenticationRequired higher-order component, which automatically redirects unauthenticated users to the login flow. The profile page displays user information retrieved from OIDC claims withAuthenticationRequired higher-order component, which automatically redirects unauthenticated users to the login flow. The profile page displays user information retrieved from OIDC claims, including profile details, email, and metadata. The application implements complete federated logout withAuthenticationRequired higher-order component, which automatically redirects unauthenticated users to the login flow. The profile page displays user information retrieved from OIDC claims, including profile details, email, and metadata. The application implements complete federated logout functionality, properly terminating both the local session and the Zitadel session through the end-session endpoint.

The example leverages React Router for client-side navigation and Vite for client-side navigation and Vite as the build tool, demonstrating modern React development patterns with TypeScript for client-side navigation and Vite as the build tool, demonstrating modern React development patterns with TypeScript. All authentication state management, including token refresh with offline access, is handled automatically by the oidc-client-ts for client-side navigation and Vite as the build tool, demonstrating modern React development patterns with TypeScript. All authentication state management, including token refresh with offline access, is handled automatically by the oidc-client-ts library under the hood.

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 (e.g., http://localhost:3000)
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 file (copy from .env.example) and configure it with the values from your Zitadel application. Use these exact environment variable names:

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
VITE_PORT=3000

Replace these values with:

Your actual Zitadel instance URL (the Issuer from your Zitadel application settings)
The Client ID you copied when creating the application
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

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