Angular

Overview

Angular is a TypeScript-based framework for building web applications. This example demonstrates how to integrate Zitadel using the OAuth 2.0 PKCE flow to authenticate users securely and maintain sessions across your Angular application.

Auth library

This example uses @edgeflare/ngx-oidc (built on oidc-client-ts) to implement the OpenID Connect (OIDC) protocol, manage PKCE code challenge generation, perform secure token exchange, and provide session management helpers.

What this example demonstrates

This Angular 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 integrates authentication logic into Angular routing: protected routes use router guards to automatically redirect unauthenticated users to the sign-in flow, and callback routes complete the PKCE exchange and restore session state. The example requests standard OIDC scopes (openid, profile, email), offline_access for refresh tokens, and Zitadel-specific scopes for metadata and role information.

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, then redirects the user 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:

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/auth/logout/callback)
Copy your Client ID for use in the next steps
Optionally enable refresh tokens in Token Settings for long-lived sessions

Note: Make sure to enable Dev Mode in the Zitadel Console if you're using HTTP URLs during local development. For production deployments, 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 environment variable names exactly as shown:
```
NODE_ENV=development
PORT=3000
NG_APP_ZITADEL_DOMAIN=https://your-zitadel-domain
NG_APP_ZITADEL_CLIENT_ID=your-zitadel-application-client-id
NG_APP_ZITADEL_CLIENT_SECRET=
NG_APP_ZITADEL_CALLBACK_URL=http://localhost:3000/auth/callback
NG_APP_ZITADEL_POST_LOGIN_URL=/profile
NG_APP_ZITADEL_POST_LOGOUT_URL=http://localhost:3000/auth/logout/callback
```
Replace these values with:
- Your actual Zitadel instance URL (the NG_APP_ZITADEL_DOMAIN)
- The Client ID you copied when creating the application
- The redirect URIs you configured in the PKCE setup (must match exactly)
- The post-logout redirect URIs you configured (must match exactly)
Install dependencies using npm and start the development server to verify the authentication flow end-to-end.