mirror of
https://github.com/zitadel/zitadel.git
synced 2026-07-25 18:28:00 +00:00
82 lines
5.2 KiB
Plaintext
82 lines
5.2 KiB
Plaintext
---
|
|
title: Angular
|
|
description: "Integrate ZITADEL authentication into Angular applications using the OAuth 2.0 PKCE flow."
|
|
sidebar_label: Angular
|
|
framework_url: https://angular.dev
|
|
auth_library: "@edgeflare/ngx-oidc"
|
|
auth_library_url: https://www.npmjs.com/package/@edgeflare/ngx-oidc
|
|
example_repo: https://github.com/zitadel/example-auth-angular
|
|
auth_flow: pkce
|
|
status: stable
|
|
---
|
|
|
|
## Overview
|
|
|
|
[Angular](https://angular.dev) is a TypeScript-based framework for building web applications. This example demonstrates how to integrate **Zitadel** using the **[OAuth 2.0 PKCE flow](https://oauth.net/2/pkce/)** to authenticate users securely and maintain sessions across your Angular application.
|
|
|
|
#### Auth library
|
|
|
|
This example uses **[@edgeflare/ngx-oidc](https://www.npmjs.com/package/@edgeflare/ngx-oidc)** (built on **[oidc-client-ts](https://www.npmjs.com/package/oidc-client-ts)**) to implement the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) protocol, manage [PKCE](https://oauth.net/2/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](https://zitadel.com/docs) with [PKCE](https://oauth.net/2/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](https://zitadel.com/docs/apis/openidoauth/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](https://zitadel.com/docs/guides/integrate/login/oidc/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](https://zitadel.com/docs/guides/manage/console/console-overview). Follow the PKCE application setup guide to:
|
|
|
|
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects-overview)
|
|
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/auth/logout/callback`)
|
|
5. Copy your **Client ID** for use in the next steps
|
|
6. Optionally enable [refresh tokens](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) in Token Settings for long-lived sessions
|
|
|
|
> **Note:** Make sure to enable **Dev Mode** in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/console-overview) 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](https://zitadel.com/docs/guides/integrate/login/oidc/login-users):
|
|
|
|
1. Clone the [repository](https://github.com/zitadel/example-auth-angular).
|
|
2. Create a `.env` file (copy from `.env.example`) and configure it with the values from your [Zitadel application](https://zitadel.com/docs/guides/manage/console/applications-overview). 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](https://zitadel.com/docs/guides/manage/console/default-settings) (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)
|
|
3. Install dependencies using [npm](https://www.npmjs.com) and start the development server to verify the authentication flow end-to-end.
|
|
|
|
---
|
|
|
|
## Learn more and resources
|
|
|
|
* [PKCE concept](https://oauth.net/2/pkce/)
|
|
* [Federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)
|
|
* [OIDC integration guide](https://zitadel.com/docs/guides/integrate/login/oidc/login-users)
|
|
* [Angular documentation](https://angular.dev)
|
|
* [@edgeflare/ngx-oidc package](https://www.npmjs.com/package/@edgeflare/ngx-oidc)
|
|
* [oidc-client-ts package](https://www.npmjs.com/package/oidc-client-ts)
|
|
* [Example repository](https://github.com/zitadel/example-auth-angular)
|