Skip to main content

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. 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 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.

Protected routes are secured using react-oidc-context's 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 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 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 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 (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
  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?