mirror of
https://github.com/andwati/zitadel.git
synced 2026-11-06 06:12:16 +00:00
docs: added the updated docs for the new examples (#11198)
This commit is contained in:
Mridang Agarwalla
@@ -1,51 +1,80 @@
|
||||
---
|
||||
title: Angular
|
||||
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
|
||||
---
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img width="100px" src="/docs/img/tech/angular.svg" alt="angular logo"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://angular.io/" target="_blank">Angular</a> is a popular JavaScript framework for building single-page applications (SPAs) that is known for its two-way data binding, dependency injection, and modular architecture.
|
||||
Integrate authentication to your Angular application easily by using the <a href="https://github.com/zitadel/zitadel-angular" target="_blank">zitadel-angular</a> Example.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
## Overview
|
||||
|
||||
### Resources
|
||||
- [Angular Example Application with ZITADEL Login](https://github.com/zitadel/zitadel-angular)
|
||||
- [Step-By-Step Guide](/docs/examples/login/angular)
|
||||
- [ZITADEL Console](https://github.com/zitadel/zitadel/tree/main/console) is built with Angular and can also be used as a reference
|
||||
[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
|
||||
|
||||
### Angular SDK
|
||||
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.
|
||||
|
||||
ZITADEL does not provide an Angular specific SDK.
|
||||
But you can integrate ZITADEL to your application by using any OIDC Library such as [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc).
|
||||
---
|
||||
|
||||
Check out our [Example Application](/docs/sdk-examples/angular#example-application)
|
||||
## What this example demonstrates
|
||||
|
||||
### Example Application
|
||||
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 [zitadel-angular](https://github.com/zitadel/zitadel-angular) repository includes an Example Application ready to start and show how an Angular application looks like with integrated ZITADEL Login.
|
||||
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.
|
||||
|
||||
What does the Example include:
|
||||
- Home Page with Login Button
|
||||
- Authenticating user with OIDC PKCE Flow
|
||||
- Private Page: Shows user information of authenticated user, only accessible after login
|
||||
- Logout
|
||||
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.
|
||||
|
||||
### Step-By-Step Guide
|
||||
---
|
||||
|
||||
The [Step-By-Step Guide](/docs/examples/login/angular) leads you through the whole process from configuring the right application in ZITADEL to a ready application with integrated Login.
|
||||
## Getting started
|
||||
|
||||
After completing the Step-By-Step Guide you will have:
|
||||
1. Example Web Application with integrated ZITADEL Login
|
||||
2. Example page accessible by authenticated user showing retrieved user information
|
||||
3. Logout
|
||||
4. Correct setup for your application in ZITADEL
|
||||
### 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/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)
|
||||
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/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). 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)
|
||||
|
||||
@@ -11,21 +11,21 @@ status: stable
|
||||
|
||||
## Overview
|
||||
|
||||
[Astro](https://astro.build) is a modern web framework that delivers lightning-fast performance with server-first architecture and seamless client-side hydration. This example demonstrates how to integrate **[Zitadel](https://zitadel.com/docs)** authentication using the **[OAuth 2.0 PKCE flow](/docs/guides/integrate/login/oidc/login-users#pkce)** to secure your Astro application with professional identity management.
|
||||
[Astro](https://astro.build) is a modern web framework that delivers lightning-fast performance with server-first architecture and seamless client-side hydration. This example demonstrates how to integrate **[Zitadel](https://zitadel.com/docs)** authentication using the **[OAuth 2.0 PKCE flow](https://oauth.net/2/pkce/)** to secure your Astro application with professional identity management.
|
||||
|
||||
#### Auth library
|
||||
|
||||
This example uses **[Auth.js](https://authjs.dev)** (specifically the **[@auth/core](https://www.npmjs.com/package/@auth/core)** package and **[auth-astro](https://www.npmjs.com/package/auth-astro)** adapter), a comprehensive authentication library that implements the [OpenID Connect](https://openid.net/connect/) protocol. Auth.js handles [PKCE](/docs/guides/integrate/login/oidc/login-users#pkce) code generation and verification, [token exchange](https://zitadel.com/docs/apis/openidoauth/endpoints), [session management](https://zitadel.com/docs/concepts/sessions), and automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) to maintain long-lived user sessions.
|
||||
This example uses **[Auth.js](https://authjs.dev)** (specifically the **[@auth/core](https://www.npmjs.com/package/@auth/core)** package and **[auth-astro](https://www.npmjs.com/package/auth-astro)** adapter), a comprehensive authentication library that implements the [OpenID Connect](https://openid.net/connect/) protocol. Auth.js handles [PKCE](https://oauth.net/2/pkce/) code generation and verification, token exchange, session management, and automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) to maintain long-lived user sessions.
|
||||
|
||||
---
|
||||
|
||||
## What this example demonstrates
|
||||
|
||||
This Astro application showcases a complete authentication workflow with [Zitadel](https://zitadel.com/docs) using [Auth.js](https://authjs.dev). Users start on a public landing page and click a login button to authenticate through Zitadel's [authorization endpoint](https://zitadel.com/docs/apis/openidoauth/endpoints) using the secure [PKCE flow](/docs/guides/integrate/login/oidc/login-users#pkce). After successful authentication, users are redirected to a protected profile page displaying their [user information and claims](https://zitadel.com/docs/apis/openidoauth/claims) retrieved from the [ID token](https://zitadel.com/docs/concepts/tokens).
|
||||
This Astro application showcases a complete authentication workflow with [Zitadel](https://zitadel.com/docs) using [Auth.js](https://authjs.dev). Users start on a public landing page and click a login button to authenticate through Zitadel's [authorization endpoint](https://zitadel.com/docs/apis/openidoauth/endpoints) using the secure [PKCE flow](https://oauth.net/2/pkce/). After successful authentication, users are redirected to a protected profile page displaying their [user information and claims](https://zitadel.com/docs/apis/openidoauth/claims) retrieved from the [ID token](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint).
|
||||
|
||||
The example implements [server-side session management](https://zitadel.com/docs/concepts/sessions) with encrypted [JWT tokens](https://zitadel.com/docs/concepts/tokens), ensuring secure authentication state across Astro's [server-rendered pages](https://docs.astro.build/en/core-concepts/astro-pages/). Protected routes automatically redirect unauthenticated users to the login flow using [Astro's middleware](https://docs.astro.build/en/guides/middleware/), preventing unauthorized access to sensitive areas.
|
||||
The example implements server-side session management with encrypted [JWT tokens](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint), ensuring secure authentication state across Astro's [server-rendered pages](https://docs.astro.build/en/core-concepts/astro-pages/). Protected routes automatically redirect unauthenticated users to the login flow using [Astro's middleware](https://docs.astro.build/en/guides/middleware/), preventing unauthorized access to sensitive areas.
|
||||
|
||||
The application includes complete [logout functionality](https://zitadel.com/docs/guides/integrate/login/oidc/logout) that performs [federated single sign-out](https://zitadel.com/docs/guides/integrate/login/oidc/logout), terminating both the local session and the remote Zitadel session through the [end-session endpoint](https://zitadel.com/docs/apis/openidoauth/endpoints). It demonstrates [token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) capabilities using [refresh tokens](https://zitadel.com/docs/concepts/tokens) with the `offline_access` [scope](https://zitadel.com/docs/apis/openidoauth/scopes), allowing users to maintain authenticated sessions without repeated logins. The example also shows how to request additional [OIDC scopes](https://zitadel.com/docs/apis/openidoauth/scopes) like `profile`, `email`, and Zitadel-specific scopes for [user metadata](https://zitadel.com/docs/guides/manage/customize/user-metadata), [organization information](/guides/manage/console/organizations-overview), and [role assignments](https://zitadel.com/docs/guides/manage/console/roles).
|
||||
The application includes complete [logout functionality](https://zitadel.com/docs/guides/integrate/login/oidc/logout) that performs [federated single sign-out](https://zitadel.com/docs/guides/integrate/login/oidc/logout), terminating both the local session and the remote Zitadel session through the [end-session endpoint](https://zitadel.com/docs/apis/openidoauth/endpoints). It demonstrates [token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) capabilities using [refresh tokens](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint) with the `offline_access` [scope](https://zitadel.com/docs/apis/openidoauth/scopes), allowing users to maintain authenticated sessions without repeated logins. The example also shows how to request additional [OIDC scopes](https://zitadel.com/docs/apis/openidoauth/scopes) like `profile`, `email`, and Zitadel-specific scopes for [user metadata](https://zitadel.com/docs/guides/manage/customize/user-metadata), [organization information](https://zitadel.com/docs/guides/manage/console/organizations), and [role assignments](https://zitadel.com/docs/guides/manage/console/roles).
|
||||
|
||||
---
|
||||
|
||||
@@ -33,22 +33,22 @@ The application includes complete [logout functionality](https://zitadel.com/doc
|
||||
|
||||
### Prerequisites
|
||||
|
||||
Before running this example, you need to create and configure a PKCE application in the [ZITADEL Console](/docs/guides/manage/console/console-overview). Follow the **[Application Setup guide](/docs/guides/manage/console/applications-overview)** to:
|
||||
Before running this example, you need to create and configure a PKCE application in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview). Follow the PKCE application setup guide to:
|
||||
|
||||
1. Create a new Web application in your [ZITADEL Project](/docs/guides/manage/console/projects-overview)
|
||||
2. Configure it to use the [PKCE authentication method](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects)
|
||||
2. Configure it to use the PKCE authentication method
|
||||
3. Set up your redirect URIs (e.g., `http://localhost:4321/api/auth/callback` for development)
|
||||
4. Configure post-logout redirect URIs (e.g., `http://localhost:4321/api/auth/logout/callback`)
|
||||
5. Copy your **Client ID** from the application details
|
||||
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [ZITADEL Console](/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.
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [Zitadel Console](https://zitadel.com/docs/guides/manage/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/):
|
||||
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-astro).
|
||||
2. Create a `.env` file based on `.env.example` and configure it with the values from your [ZITADEL Application](/docs/guides/manage/console/applications-overview). Use these environment variable names exactly as shown:
|
||||
2. Create a `.env` file based on `.env.example` and configure it with the values from your [Zitadel application](https://zitadel.com/docs/guides/manage/console/applications). Use these environment variable names exactly as shown:
|
||||
```
|
||||
PORT=4321
|
||||
SESSION_DURATION=3600
|
||||
@@ -62,7 +62,7 @@ Once you have your [Zitadel application configured](https://zitadel.com/docs/gui
|
||||
NEXTAUTH_URL=http://localhost:4321
|
||||
```
|
||||
Replace these values with:
|
||||
- Your actual [Zitadel instance URL](https://zitadel.com/docs/guides/manage/console/instance-settings) (the **ZITADEL_DOMAIN**)
|
||||
- Your actual [Zitadel instance URL](https://zitadel.com/docs/guides/manage/console/default-settings) (the **ZITADEL_DOMAIN**)
|
||||
- The **Client ID** you copied when creating the application
|
||||
- A randomly generated **SESSION_SECRET** using: `node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"`
|
||||
- A randomly generated **ZITADEL_CLIENT_SECRET** (required by Auth.js even though PKCE doesn't require it)
|
||||
@@ -73,14 +73,11 @@ Once you have your [Zitadel application configured](https://zitadel.com/docs/gui
|
||||
|
||||
## Learn more and resources
|
||||
|
||||
* [Zitadel documentation](https://zitadel.com/docs)
|
||||
* [PKCE concept](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
* [PKCE application setup](/docs/guides/manage/console/applications-overview)
|
||||
* [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/)
|
||||
* [OIDC integration guide](https://zitadel.com/docs/guides/integrate/login/oidc/login-users)
|
||||
* [Astro documentation](https://astro.build)
|
||||
* [Auth.js documentation](https://authjs.dev)
|
||||
* [@auth/core package](https://www.npmjs.com/package/@auth/core)
|
||||
* [auth-astro adapter](https://www.npmjs.com/package/auth-astro)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-astro)
|
||||
* [All framework examples](/docs/sdk-examples/introduction)
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
title: Django
|
||||
sidebar_label: Django
|
||||
framework_url: https://www.djangoproject.com
|
||||
auth_library: "Authlib"
|
||||
auth_library_url: https://authlib.org
|
||||
example_repo: https://github.com/zitadel/example-auth-django
|
||||
auth_flow: pkce
|
||||
status: stable
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
[Django](https://www.djangoproject.com) is a high-level Python web framework that encourages rapid development and clean, pragmatic design. It provides a robust set of features for web applications, making it one of the most popular choices for building server-side 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 application.
|
||||
|
||||
#### Auth library
|
||||
|
||||
This example uses **[Authlib](https://authlib.org)**, the standard authentication library for Python web frameworks. Authlib implements the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) flow, manages [PKCE](https://oauth.net/2/pkce/), performs secure token exchange, and provides session management helpers. The integration uses Authlib's Django client which seamlessly handles OAuth 2.0 flows within Django applications.
|
||||
|
||||
---
|
||||
|
||||
## What this example demonstrates
|
||||
|
||||
This example shows a complete authentication implementation using [Django](https://www.djangoproject.com) with [Zitadel](https://zitadel.com/docs). Users start on a public landing page, click a login button to authenticate with Zitadel using the secure [PKCE flow](https://oauth.net/2/pkce/), and are redirected to a protected profile page displaying their [user information](https://zitadel.com/docs/apis/openidoauth/claims) after successful authentication.
|
||||
|
||||
The application implements server-side session management with Django's built-in session framework, storing authentication state securely in signed cookies. Protected routes use the `@require_auth` decorator to automatically redirect unauthenticated users to the sign-in flow, ensuring only authenticated users can access sensitive areas. The profile page displays comprehensive user information including [OIDC claims](https://zitadel.com/docs/apis/openidoauth/claims) and [session metadata](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint).
|
||||
|
||||
The application demonstrates proper **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** by terminating sessions both locally and with Zitadel's [end-session endpoint](https://zitadel.com/docs/guides/integrate/login/oidc/logout), complete with CSRF protection using state parameters. Additionally, it includes automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/endpoints) using [refresh tokens](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) to maintain long-lived sessions without requiring users to re-authenticate. The example uses [Zitadel-specific scopes](https://zitadel.com/docs/apis/openidoauth/scopes) like `urn:zitadel:iam:user:metadata` and `urn:zitadel:iam:org:projects:roles` to access extended user attributes and role information for implementing [role-based access control (RBAC)](https://zitadel.com/docs/guides/manage/console/roles).
|
||||
|
||||
---
|
||||
|
||||
## 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/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)
|
||||
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/overview) 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](https://zitadel.com/docs/guides/manage/console/applications) configured:
|
||||
|
||||
1. Clone the [repository](https://github.com/zitadel/example-auth-django).
|
||||
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). **Use these exact environment variable names:**
|
||||
```
|
||||
PORT=3000
|
||||
SESSION_SECRET=your-very-secret-and-strong-session-key
|
||||
ZITADEL_DOMAIN=https://your-zitadel-domain
|
||||
ZITADEL_CLIENT_ID=your-zitadel-application-client-id
|
||||
ZITADEL_CLIENT_SECRET=your-randomly-generated-client-secret
|
||||
ZITADEL_CALLBACK_URL=http://localhost:3000/auth/callback
|
||||
ZITADEL_POST_LOGIN_URL=/profile
|
||||
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) for `ZITADEL_DOMAIN` (the issuer)
|
||||
- The **Client ID** you copied when creating the application for `ZITADEL_CLIENT_ID`
|
||||
- The **redirect URI** you configured in the PKCE setup for `ZITADEL_CALLBACK_URL` (must match exactly)
|
||||
- The **post-logout redirect URI** for `ZITADEL_POST_LOGOUT_URL`
|
||||
- A strong random string for `SESSION_SECRET` (generate using: `python -c "import secrets; print(secrets.token_hex(32))"`)
|
||||
- A randomly generated string for `ZITADEL_CLIENT_SECRET` (generate using: `python -c "import secrets; print(secrets.token_hex(32))"`)
|
||||
3. Install dependencies using [Poetry](https://python-poetry.org) with `poetry install` and start the development server with `poetry run python manage.py runserver localhost:3000` 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)
|
||||
* [Django documentation](https://www.djangoproject.com)
|
||||
* [Authlib documentation](https://authlib.org)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-django)
|
||||
@@ -4,28 +4,28 @@ sidebar_label: Express.js
|
||||
framework_url: https://expressjs.com
|
||||
auth_library: "@auth/express"
|
||||
auth_library_url: https://www.npmjs.com/package/@auth/express
|
||||
example_repo: https://github.com/zitadel/example-auth-express
|
||||
example_repo: https://github.com/zitadel/example-auth-expressjs
|
||||
auth_flow: pkce
|
||||
status: stable
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
[Express.js](https://expressjs.com) is a fast, unopinionated, minimalist web framework for [Node.js](https://nodejs.org) that provides a robust set of features for building web and mobile applications. This example demonstrates how to integrate **Zitadel** using the **[OAuth 2.0 PKCE flow](/docs/guides/integrate/login/oidc/login-users#pkce)** to authenticate users securely and maintain sessions across your Express application.
|
||||
[Express.js](https://expressjs.com) is a fast, unopinionated, minimalist web framework for [Node.js](https://nodejs.org) that provides a robust set of features for building web and mobile 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 Express application.
|
||||
|
||||
#### Auth library
|
||||
|
||||
This example uses **[@auth/express](https://www.npmjs.com/package/@auth/express)** ([GitHub](https://github.com/nextauthjs/next-auth)), the Express.js adapter for [Auth.js](https://authjs.dev). This library implements the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) protocol with [PKCE](/docs/guides/integrate/login/oidc/login-users#pkce) support, manages [token exchange](https://zitadel.com/docs/apis/openidoauth/grant-types), performs automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token), and provides [session management](https://zitadel.com/docs/concepts/sessions) with secure cookie-based storage.
|
||||
This example uses **[@auth/express](https://www.npmjs.com/package/@auth/express)** ([GitHub](https://github.com/nextauthjs/next-auth)), the Express.js adapter for [Auth.js](https://authjs.dev). This library implements the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) protocol with [PKCE](https://oauth.net/2/pkce/) support, manages [token exchange](https://zitadel.com/docs/apis/openidoauth/grant-types), performs automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token), and provides session management with secure cookie-based storage.
|
||||
|
||||
---
|
||||
|
||||
## What this example demonstrates
|
||||
|
||||
This Express.js example provides a complete authentication implementation using [Zitadel](https://zitadel.com/docs) as the identity provider. The application starts with a public landing page featuring a login button that initiates the [PKCE authentication flow](/docs/guides/integrate/login/oidc/login-users#pkce). When users click login, [@auth/express](https://www.npmjs.com/package/@auth/express) generates a cryptographic code verifier and challenge, then redirects to Zitadel's authorization endpoint. After successful authentication at Zitadel, users return to the application's [callback URL](https://zitadel.com/docs/guides/integrate/login/oidc/) where the authorization code is exchanged for [access tokens](https://zitadel.com/docs/apis/openidoauth/endpoints) and an [ID token](https://zitadel.com/docs/apis/openidoauth/claims).
|
||||
This Express.js example provides a complete authentication implementation using [Zitadel](https://zitadel.com/docs) as the identity provider. The application starts with a public landing page featuring a login button that initiates the [PKCE authentication flow](https://oauth.net/2/pkce/). When users click login, [@auth/express](https://www.npmjs.com/package/@auth/express) generates a cryptographic code verifier and challenge, then redirects to Zitadel's authorization endpoint. After successful authentication at Zitadel, users return to the application's [callback URL](https://zitadel.com/docs/guides/integrate/login/oidc/login-users) where the authorization code is exchanged for [access tokens](https://zitadel.com/docs/apis/openidoauth/endpoints) and an [ID token](https://zitadel.com/docs/apis/openidoauth/claims).
|
||||
|
||||
The example includes protected routes using [Express middleware](https://expressjs.com/en/guide/using-middleware.html) that automatically verify [session state](https://zitadel.com/docs/concepts/sessions) and redirect unauthenticated users to the sign-in page. Authenticated users can access their profile page displaying user information including email, name, and custom [metadata claims](https://zitadel.com/docs/apis/openidoauth/claims) from Zitadel. The application maintains long-lived sessions through automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) using [refresh tokens](https://zitadel.com/docs/concepts/tokens), ensuring users remain authenticated without repeated logins.
|
||||
The example includes protected routes using [Express middleware](https://expressjs.com/en/guide/using-middleware.html) that automatically verify session state and redirect unauthenticated users to the sign-in page. Authenticated users can access their profile page displaying user information including email, name, and custom [metadata claims](https://zitadel.com/docs/apis/openidoauth/claims) from Zitadel. The application maintains long-lived sessions through automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) using [refresh tokens](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint), ensuring users remain authenticated without repeated logins.
|
||||
|
||||
Sign-out functionality implements **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** by redirecting to Zitadel's end-session endpoint with the ID token hint, terminating both the local [session](https://zitadel.com/docs/concepts/sessions) and the Zitadel session. The logout flow includes [CSRF protection](https://authjs.dev/guides/basics/securing-pages-and-api-routes) through state parameter validation, and users are redirected to a success page after logout completion. All authentication flows use secure HTTP-only cookies for [session storage](https://authjs.dev/concepts/session-strategies) and implement proper security headers.
|
||||
Sign-out functionality implements **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** by redirecting to Zitadel's end-session endpoint with the ID token hint, terminating both the local session and the Zitadel session. The logout flow includes [CSRF protection](https://authjs.dev/guides/basics/securing-pages-and-api-routes) through state parameter validation, and users are redirected to a success page after logout completion. All authentication flows use secure HTTP-only cookies for [session storage](https://authjs.dev/concepts/session-strategies) and implement proper security headers.
|
||||
|
||||
---
|
||||
|
||||
@@ -33,22 +33,22 @@ Sign-out functionality implements **[federated logout](https://zitadel.com/docs/
|
||||
|
||||
### Prerequisites
|
||||
|
||||
Before running this example, you need to create and configure a PKCE application in the [ZITADEL Console](/docs/guides/manage/console/console-overview). Follow the **[Application Setup guide](/docs/guides/manage/console/applications-overview)** to:
|
||||
Before running this example, you need to create and configure a PKCE application in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview). Follow the PKCE application setup guide to:
|
||||
|
||||
1. Create a new Web application in your [ZITADEL Project](/docs/guides/manage/console/projects-overview)
|
||||
2. Configure it to use the [PKCE authentication method](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects)
|
||||
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
|
||||
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [ZITADEL Console](/docs/guides/manage/console/console-overview) if you're using HTTP URLs during local development. For production, always use HTTPS URLs and disable Dev Mode.
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview) 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](https://zitadel.com/docs/guides/integrate/login/oidc/):
|
||||
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-express).
|
||||
2. Create a `.env.local` file and configure it with the values from your [ZITADEL Application](/docs/guides/manage/console/applications-overview). Use the exact environment variable names from the repository:
|
||||
1. Clone the [repository](https://github.com/zitadel/example-auth-expressjs).
|
||||
2. Create a `.env.local` file and configure it with the values from your [Zitadel application](https://zitadel.com/docs/guides/manage/console/applications). Use the exact environment variable names from the repository:
|
||||
```
|
||||
NODE_ENV=development
|
||||
PORT=3000
|
||||
@@ -62,7 +62,7 @@ Once you have your [Zitadel application configured](https://zitadel.com/docs/gui
|
||||
ZITADEL_POST_LOGOUT_URL=http://localhost:3000
|
||||
```
|
||||
Replace these values with:
|
||||
- Your actual Zitadel instance URL (the **Issuer** from the [PKCE setup guide](/docs/guides/manage/console/applications-overview))
|
||||
- Your actual Zitadel instance URL (the **Issuer** from the PKCE setup guide)
|
||||
- The **Client ID** you copied when creating the application
|
||||
- A randomly generated client secret (generate using: `node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"`)
|
||||
- The **redirect URI** you configured in the PKCE setup (must match exactly)
|
||||
@@ -79,13 +79,10 @@ The application will be running at `http://localhost:3000`.
|
||||
|
||||
## Learn more and resources
|
||||
|
||||
* [Zitadel documentation](https://zitadel.com/docs)
|
||||
* [PKCE concept](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
* [PKCE application setup](/docs/guides/manage/console/applications-overview)
|
||||
* [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/)
|
||||
* [OIDC integration guide](https://zitadel.com/docs/guides/integrate/login/oidc/login-users)
|
||||
* [Framework docs](https://expressjs.com)
|
||||
* [Auth library](https://www.npmjs.com/package/@auth/express)
|
||||
* [Auth.js documentation](https://authjs.dev)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-express)
|
||||
* [All framework examples](/docs/sdk-examples/introduction)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-expressjs)
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
title: FastAPI
|
||||
sidebar_label: FastAPI
|
||||
framework_url: https://fastapi.tiangolo.com
|
||||
auth_library: "Authlib"
|
||||
auth_library_url: https://authlib.org
|
||||
example_repo: https://github.com/zitadel/example-auth-fastapi
|
||||
auth_flow: pkce
|
||||
status: stable
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
[FastAPI](https://fastapi.tiangolo.com) is a modern, fast (high-performance) web framework for building APIs with Python based on standard Python type hints. This example demonstrates how to integrate **[Zitadel](https://zitadel.com/docs)** using the **[OAuth 2.0 PKCE flow](https://oauth.net/2/pkce/)** to authenticate users securely and maintain sessions across your application.
|
||||
|
||||
#### Auth library
|
||||
|
||||
This example uses **[Authlib](https://authlib.org)**, the standard authentication library for Python web frameworks. Authlib implements the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) flow, manages [PKCE](https://oauth.net/2/pkce/), performs secure token exchange, and provides session management helpers. The integration uses Authlib's Starlette client which seamlessly handles OAuth 2.0 flows within FastAPI applications built on [Starlette](https://www.starlette.io).
|
||||
|
||||
---
|
||||
|
||||
## What this example demonstrates
|
||||
|
||||
This example shows a complete authentication implementation using [FastAPI](https://fastapi.tiangolo.com) with [Zitadel](https://zitadel.com/docs). Users start on a public landing page, click a login button to authenticate with Zitadel using the secure [PKCE flow](https://oauth.net/2/pkce/), and are redirected to a protected profile page displaying their [user information](https://zitadel.com/docs/apis/openidoauth/claims) after successful authentication.
|
||||
|
||||
The application implements server-side session management with Starlette's session middleware, storing authentication state securely in encrypted cookies. Protected routes use the `require_auth` dependency to automatically redirect unauthenticated users to the sign-in flow, ensuring only authenticated users can access sensitive areas. The profile page displays comprehensive user information including [OIDC claims](https://zitadel.com/docs/apis/openidoauth/claims) and [session metadata](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint).
|
||||
|
||||
The application demonstrates proper **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** by terminating sessions both locally and with Zitadel's [end-session endpoint](https://zitadel.com/docs/guides/integrate/login/oidc/logout), complete with CSRF protection using state parameters. Additionally, it includes automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/endpoints) using [refresh tokens](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) to maintain long-lived sessions without requiring users to re-authenticate. The example uses [Zitadel-specific scopes](https://zitadel.com/docs/apis/openidoauth/scopes) like `urn:zitadel:iam:user:metadata` and `urn:zitadel:iam:org:projects:roles` to access extended user attributes and role information for implementing [role-based access control (RBAC)](https://zitadel.com/docs/guides/manage/console/roles).
|
||||
|
||||
---
|
||||
|
||||
## 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/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)
|
||||
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/overview) 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](https://zitadel.com/docs/guides/manage/console/applications) configured:
|
||||
|
||||
1. Clone the [repository](https://github.com/zitadel/example-auth-fastapi).
|
||||
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). **Use these exact environment variable names:**
|
||||
```
|
||||
PY_ENV=development
|
||||
PORT=3000
|
||||
SESSION_SECRET=your-very-secret-and-strong-session-key
|
||||
ZITADEL_DOMAIN=https://your-zitadel-domain
|
||||
ZITADEL_CLIENT_ID=your-zitadel-application-client-id
|
||||
ZITADEL_CLIENT_SECRET=your-randomly-generated-client-secret
|
||||
ZITADEL_CALLBACK_URL=http://localhost:3000/auth/callback
|
||||
ZITADEL_POST_LOGIN_URL=/profile
|
||||
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) for `ZITADEL_DOMAIN` (the issuer)
|
||||
- The **Client ID** you copied when creating the application for `ZITADEL_CLIENT_ID`
|
||||
- The **redirect URI** you configured in the PKCE setup for `ZITADEL_CALLBACK_URL` (must match exactly)
|
||||
- The **post-logout redirect URI** for `ZITADEL_POST_LOGOUT_URL`
|
||||
- A strong random string for `SESSION_SECRET` (generate using: `python -c "import secrets; print(secrets.token_hex(32))"`)
|
||||
- A randomly generated string for `ZITADEL_CLIENT_SECRET` (generate using: `python -c "import secrets; print(secrets.token_hex(32))"`)
|
||||
3. Install dependencies using [Poetry](https://python-poetry.org) with `poetry install` and start the development server with `poetry run python run.py` 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)
|
||||
* [FastAPI documentation](https://fastapi.tiangolo.com)
|
||||
* [Authlib documentation](https://authlib.org)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-fastapi)
|
||||
@@ -11,21 +11,21 @@ status: stable
|
||||
|
||||
## Overview
|
||||
|
||||
[Fastify](https://fastify.dev) is a fast and low overhead web framework for Node.js, designed for building efficient server-side applications. This example demonstrates how to integrate **[ZITADEL](https://zitadel.com/docs)** using the **[OAuth 2.0 PKCE flow](/docs/guides/integrate/login/oidc/login-users#pkce)** to authenticate users securely and maintain sessions across your application.
|
||||
[Fastify](https://fastify.dev) is a fast and low overhead web framework for Node.js, designed for building efficient server-side applications. This example demonstrates how to integrate **[Zitadel](https://zitadel.com/docs)** using the **[OAuth 2.0 PKCE flow](https://oauth.net/2/pkce/)** to authenticate users securely and maintain sessions across your application.
|
||||
|
||||
#### Auth library
|
||||
|
||||
This example uses **[@mridang/fastify-auth](https://www.npmjs.com/package/@mridang/fastify-auth)**, a [Fastify](https://fastify.dev) plugin that wraps **[@auth/core](https://www.npmjs.com/package/@auth/core)** (formerly Auth.js). The underlying [@auth/core](https://authjs.dev) library implements the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) flow, manages [PKCE](/docs/guides/integrate/login/oidc/login-users#pkce), performs secure token exchange, and provides session management helpers. This integration leverages the **[@auth/core/providers/zitadel](https://authjs.dev/reference/core/providers/zitadel)** provider specifically designed for ZITADEL authentication.
|
||||
This example uses **[@mridang/fastify-auth](https://www.npmjs.com/package/@mridang/fastify-auth)**, a [Fastify](https://fastify.dev) plugin that wraps **[@auth/core](https://www.npmjs.com/package/@auth/core)** (formerly Auth.js). The underlying [@auth/core](https://authjs.dev) library implements the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) flow, manages [PKCE](https://oauth.net/2/pkce/), performs secure token exchange, and provides session management helpers. This integration leverages the **[@auth/core/providers/zitadel](https://authjs.dev/reference/core/providers/zitadel)** provider specifically designed for Zitadel authentication.
|
||||
|
||||
---
|
||||
|
||||
## What this example demonstrates
|
||||
|
||||
This example shows a complete authentication implementation using [Fastify](https://fastify.dev) with [server-side rendering](https://fastify.dev) via [@fastify/view](https://www.npmjs.com/package/@fastify/view) and [Handlebars](https://handlebarsjs.com) templates. The application implements secure user authentication through [ZITADEL](https://zitadel.com/docs) using the industry-standard [PKCE flow](/docs/guides/integrate/login/oidc/login-users#pkce), which prevents authorization code interception attacks without requiring client secrets.
|
||||
This example shows a complete authentication implementation using [Fastify](https://fastify.dev) with [server-side rendering](https://fastify.dev) via [@fastify/view](https://www.npmjs.com/package/@fastify/view) and [Handlebars](https://handlebarsjs.com) templates. The application implements secure user authentication through [Zitadel](https://zitadel.com/docs) using the industry-standard [PKCE flow](https://oauth.net/2/pkce/), which prevents authorization code interception attacks without requiring client secrets.
|
||||
|
||||
The example includes a custom sign-in page that initiates the [OAuth 2.0](https://zitadel.com/docs/guides/integrate/login/oidc/oauth-recommended-flows) authentication flow, automatic [callback handling](https://zitadel.com/docs/guides/integrate/login/oidc/) with secure [token exchange](https://zitadel.com/docs/apis/openidoauth/endpoints), and [JWT-based session management](https://zitadel.com/docs/concepts/tokens) with [@fastify/cookie](https://www.npmjs.com/package/@fastify/cookie). Protected routes use the `requireAuth` middleware to automatically redirect unauthenticated users to the sign-in flow, ensuring only authenticated users can access sensitive areas. The profile page displays comprehensive user information including [OIDC claims](https://zitadel.com/docs/apis/openidoauth/claims) and [session metadata](https://zitadel.com/docs/concepts/tokens).
|
||||
The example includes a custom sign-in page that initiates the [OAuth 2.0](https://zitadel.com/docs/guides/integrate/login/oidc/oauth-recommended-flows) authentication flow, automatic [callback handling](https://zitadel.com/docs/guides/integrate/login/oidc/login-users) with secure token exchange, and [JWT-based session management](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint) with [@fastify/cookie](https://www.npmjs.com/package/@fastify/cookie). Protected routes use the `requireAuth` middleware to automatically redirect unauthenticated users to the sign-in flow, ensuring only authenticated users can access sensitive areas. The profile page displays comprehensive user information including [OIDC claims](https://zitadel.com/docs/apis/openidoauth/claims) and [session metadata](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint).
|
||||
|
||||
The application also demonstrates proper **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** by terminating sessions both locally and with ZITADEL's [end-session endpoint](https://zitadel.com/docs/guides/integrate/login/oidc/logout), complete with CSRF protection using state parameters. Additionally, it includes automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/endpoints) using [refresh tokens](https://zitadel.com/docs/concepts/tokens) to maintain long-lived sessions without requiring users to re-authenticate. The example uses [ZITADEL-specific scopes](https://zitadel.com/docs/apis/openidoauth/scopes) like `urn:zitadel:iam:user:metadata` and `urn:zitadel:iam:org:projects:roles` to access extended user attributes and role information for implementing [role-based access control (RBAC)](https://zitadel.com/docs/guides/manage/console/roles).
|
||||
The application also demonstrates proper **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** by terminating sessions both locally and with Zitadel's [end-session endpoint](https://zitadel.com/docs/guides/integrate/login/oidc/logout), complete with CSRF protection using state parameters. Additionally, it includes automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/endpoints) using [refresh tokens](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) to maintain long-lived sessions without requiring users to re-authenticate. The example uses [Zitadel-specific scopes](https://zitadel.com/docs/apis/openidoauth/scopes) like `urn:zitadel:iam:user:metadata` and `urn:zitadel:iam:org:projects:roles` to access extended user attributes and role information for implementing [role-based access control (RBAC)](https://zitadel.com/docs/guides/manage/console/roles).
|
||||
|
||||
---
|
||||
|
||||
@@ -33,23 +33,23 @@ The application also demonstrates proper **[federated logout](https://zitadel.co
|
||||
|
||||
### Prerequisites
|
||||
|
||||
Before running this example, you need to create and configure a PKCE application in the [ZITADEL Console](/docs/guides/manage/console/console-overview). Follow the **[Application Setup guide](/docs/guides/manage/console/applications-overview)** to:
|
||||
Before running this example, you need to create and configure a PKCE application in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview). Follow the PKCE application setup guide to:
|
||||
|
||||
1. Create a new Web application in your [ZITADEL Project](/docs/guides/manage/console/projects-overview)
|
||||
2. Configure it to use the [PKCE authentication method](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects)
|
||||
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
|
||||
6. Optionally enable [refresh tokens](https://zitadel.com/docs/concepts/tokens) in Token Settings for long-lived sessions
|
||||
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](/docs/guides/manage/console/console-overview) if you're using HTTP URLs during local development. For production, always use HTTPS URLs and disable Dev Mode.
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview) 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](https://zitadel.com/docs/guides/integrate/login/oidc/) configured:
|
||||
Once you have your [Zitadel application](https://zitadel.com/docs/guides/manage/console/applications) configured:
|
||||
|
||||
1. Clone the [repository](https://github.com/zitadel/example-auth-fastify).
|
||||
2. Create a `.env` file (copy from `.env.example`) and configure it with the values from your [ZITADEL Application](/docs/guides/manage/console/applications-overview). **Use these exact environment variable names:**
|
||||
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). **Use these exact environment variable names:**
|
||||
```
|
||||
NODE_ENV=development
|
||||
PORT=3000
|
||||
@@ -63,7 +63,7 @@ Once you have your [ZITADEL Application](https://zitadel.com/docs/guides/integra
|
||||
ZITADEL_POST_LOGOUT_URL=http://localhost:3000
|
||||
```
|
||||
Replace these values with:
|
||||
- Your actual [ZITADEL instance URL](/docs/guides/manage/console/overview) for `ZITADEL_DOMAIN` (the issuer)
|
||||
- Your actual [Zitadel instance URL](https://zitadel.com/docs/guides/manage/console/default-settings) for `ZITADEL_DOMAIN` (the issuer)
|
||||
- The **Client ID** you copied when creating the application for `ZITADEL_CLIENT_ID`
|
||||
- The **redirect URI** you configured in the PKCE setup for `ZITADEL_CALLBACK_URL` (must match exactly)
|
||||
- The **post-logout redirect URI** for `ZITADEL_POST_LOGOUT_URL`
|
||||
@@ -74,13 +74,10 @@ Once you have your [ZITADEL Application](https://zitadel.com/docs/guides/integra
|
||||
|
||||
## Learn more and resources
|
||||
|
||||
* [ZITADEL documentation](https://zitadel.com/docs)
|
||||
* [PKCE concept](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
* [PKCE application setup](/docs/guides/manage/console/applications-overview)
|
||||
* [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/)
|
||||
* [OIDC integration guide](https://zitadel.com/docs/guides/integrate/login/oidc/login-users)
|
||||
* [Fastify documentation](https://fastify.dev)
|
||||
* [Auth.js (Auth/Core)](https://www.npmjs.com/package/@auth/core)
|
||||
* [Fastify Auth plugin](https://www.npmjs.com/package/@mridang/fastify-auth)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-fastify)
|
||||
* [All framework examples](/docs/sdk-examples/introduction)
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
title: Flask
|
||||
sidebar_label: Flask
|
||||
framework_url: https://flask.palletsprojects.com
|
||||
auth_library: "Authlib"
|
||||
auth_library_url: https://authlib.org
|
||||
example_repo: https://github.com/zitadel/example-auth-flask
|
||||
auth_flow: pkce
|
||||
status: stable
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
[Flask](https://flask.palletsprojects.com) is a lightweight WSGI web application framework for Python. It's designed to make getting started quick and easy, with the ability to scale up to complex 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 application.
|
||||
|
||||
#### Auth library
|
||||
|
||||
This example uses **[Authlib](https://authlib.org)**, the standard authentication library for Python web frameworks. Authlib implements the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) flow, manages [PKCE](https://oauth.net/2/pkce/), performs secure token exchange, and provides session management helpers. The integration uses Authlib's Flask client which seamlessly handles OAuth 2.0 flows within Flask applications.
|
||||
|
||||
---
|
||||
|
||||
## What this example demonstrates
|
||||
|
||||
This example shows a complete authentication implementation using [Flask](https://flask.palletsprojects.com) with [Zitadel](https://zitadel.com/docs). Users start on a public landing page, click a login button to authenticate with Zitadel using the secure [PKCE flow](https://oauth.net/2/pkce/), and are redirected to a protected profile page displaying their [user information](https://zitadel.com/docs/apis/openidoauth/claims) after successful authentication.
|
||||
|
||||
The application implements server-side session management with Flask's built-in session handling, storing authentication state securely in encrypted cookies. Protected routes use the `@require_auth` decorator to automatically redirect unauthenticated users to the sign-in flow, ensuring only authenticated users can access sensitive areas. The profile page displays comprehensive user information including [OIDC claims](https://zitadel.com/docs/apis/openidoauth/claims) and [session metadata](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint).
|
||||
|
||||
The application demonstrates proper **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** by terminating sessions both locally and with Zitadel's [end-session endpoint](https://zitadel.com/docs/guides/integrate/login/oidc/logout), complete with CSRF protection using state parameters. Additionally, it includes automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/endpoints) using [refresh tokens](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) to maintain long-lived sessions without requiring users to re-authenticate. The example uses [Zitadel-specific scopes](https://zitadel.com/docs/apis/openidoauth/scopes) like `urn:zitadel:iam:user:metadata` and `urn:zitadel:iam:org:projects:roles` to access extended user attributes and role information for implementing [role-based access control (RBAC)](https://zitadel.com/docs/guides/manage/console/roles).
|
||||
|
||||
---
|
||||
|
||||
## 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/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)
|
||||
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/overview) 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](https://zitadel.com/docs/guides/manage/console/applications) configured:
|
||||
|
||||
1. Clone the [repository](https://github.com/zitadel/example-auth-flask).
|
||||
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). **Use these exact environment variable names:**
|
||||
```
|
||||
PY_ENV=development
|
||||
PORT=3000
|
||||
SESSION_SECRET=your-very-secret-and-strong-session-key
|
||||
ZITADEL_DOMAIN=https://your-zitadel-domain
|
||||
ZITADEL_CLIENT_ID=your-zitadel-application-client-id
|
||||
ZITADEL_CLIENT_SECRET=your-randomly-generated-client-secret
|
||||
ZITADEL_CALLBACK_URL=http://localhost:3000/auth/callback
|
||||
ZITADEL_POST_LOGIN_URL=/profile
|
||||
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) for `ZITADEL_DOMAIN` (the issuer)
|
||||
- The **Client ID** you copied when creating the application for `ZITADEL_CLIENT_ID`
|
||||
- The **redirect URI** you configured in the PKCE setup for `ZITADEL_CALLBACK_URL` (must match exactly)
|
||||
- The **post-logout redirect URI** for `ZITADEL_POST_LOGOUT_URL`
|
||||
- A strong random string for `SESSION_SECRET` (generate using: `python -c "import secrets; print(secrets.token_hex(32))"`)
|
||||
- A randomly generated string for `ZITADEL_CLIENT_SECRET` (generate using: `python -c "import secrets; print(secrets.token_hex(32))"`)
|
||||
3. Install dependencies using [Poetry](https://python-poetry.org) with `poetry install` and start the development server with `poetry run python run.py` 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)
|
||||
* [Flask documentation](https://flask.palletsprojects.com)
|
||||
* [Authlib documentation](https://authlib.org)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-flask)
|
||||
@@ -11,17 +11,17 @@ status: stable
|
||||
|
||||
## Overview
|
||||
|
||||
[Hono](https://hono.dev) is a small, simple, and ultra fast web framework for the Edges that works on Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Netlify, AWS Lambda, Lambda@Edge, and Node.js. This example demonstrates how to integrate **Zitadel** using the **[OAuth 2.0 PKCE flow](/docs/guides/integrate/login/oidc/login-users#pkce)** to authenticate users securely and maintain sessions across your Hono application.
|
||||
[Hono](https://hono.dev) is a small, simple, and ultra-fast web framework for the Edges that works on Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Netlify, AWS Lambda, Lambda@Edge, and Node.js. 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 Hono application.
|
||||
|
||||
#### Auth library
|
||||
|
||||
This example uses **[Auth.js](https://authjs.dev)** (formerly NextAuth.js), the standard authentication library for modern web frameworks. Auth.js implements the [OpenID Connect](https://openid.net/connect/) (OIDC) protocol with [PKCE](/docs/guides/integrate/login/oidc/login-users#pkce), performs secure token exchange, and provides session management helpers. The integration uses **[@hono/auth-js](https://www.npmjs.com/package/@hono/auth-js)**, the official Hono adapter for Auth.js, along with **[@auth/core](https://www.npmjs.com/package/@auth/core)** which handles the core OIDC flows and the **[Zitadel provider](https://authjs.dev/reference/core/providers/zitadel)**.
|
||||
This example uses **[Auth.js](https://authjs.dev)** (formerly NextAuth.js), the standard authentication library for modern web frameworks. Auth.js implements the [OpenID Connect](https://openid.net/connect/) (OIDC) protocol with [PKCE](https://oauth.net/2/pkce/), performs secure token exchange, and provides session management helpers. The integration uses **[@hono/auth-js](https://www.npmjs.com/package/@hono/auth-js)**, the official Hono adapter for Auth.js, along with **[@auth/core](https://www.npmjs.com/package/@auth/core)** which handles the core OIDC flows and the **[Zitadel provider](https://authjs.dev/reference/core/providers/zitadel)**.
|
||||
|
||||
---
|
||||
|
||||
## What this example demonstrates
|
||||
|
||||
This example showcases a complete web application authentication pattern with [Hono](https://hono.dev) and [Zitadel](https://zitadel.com/docs). Users start on a public landing page, initiate authentication with Zitadel using the secure [PKCE flow](/docs/guides/integrate/login/oidc/login-users#pkce), and are redirected to a protected profile page displaying their [user information](https://zitadel.com/docs/apis/openidoauth/claims) after successful authentication. The application demonstrates several key features including sign-in with [authorization code flow + PKCE](/docs/guides/integrate/login/oidc/login-users#pkce), OAuth callback handling with secure [session storage](https://authjs.dev/concepts/session-strategies) using [JWT strategy](https://authjs.dev/concepts/session-strategies#jwt-session), route protection through [authentication middleware](https://hono.dev/docs/guides/middleware) that guards sensitive pages, automatic [token refresh](https://authjs.dev/guides/refresh-token-rotation) to maintain long-lived sessions without requiring re-authentication, access to user profile information including [OIDC standard claims](https://zitadel.com/docs/apis/openidoauth/claims) and [Zitadel-specific claims](https://zitadel.com/docs/apis/openidoauth/claims#reserved-claims) such as organization roles and metadata, and secure sign-out with [federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout) that terminates both the local session and the Zitadel session through the end-session endpoint.
|
||||
This example showcases a complete web application authentication pattern with [Hono](https://hono.dev) and [Zitadel](https://zitadel.com/docs). Users start on a public landing page, initiate authentication with Zitadel using the secure [PKCE flow](https://oauth.net/2/pkce/), and are redirected to a protected profile page displaying their [user information](https://zitadel.com/docs/apis/openidoauth/claims) after successful authentication. The application demonstrates several key features including sign-in with [authorization code flow + PKCE](https://oauth.net/2/pkce/), OAuth callback handling with secure [session storage](https://authjs.dev/concepts/session-strategies) using [JWT strategy](https://authjs.dev/concepts/session-strategies#jwt-session), route protection through [authentication middleware](https://hono.dev/docs/guides/middleware) that guards sensitive pages, automatic [token refresh](https://authjs.dev/guides/refresh-token-rotation) to maintain long-lived sessions without requiring re-authentication, access to user profile information including [OIDC standard claims](https://zitadel.com/docs/apis/openidoauth/claims) and [Zitadel-specific claims](https://zitadel.com/docs/apis/openidoauth/claims#reserved-claims) such as organization roles and metadata, and secure sign-out with [federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout) that terminates both the local session and the Zitadel session through the end-session endpoint.
|
||||
|
||||
The implementation uses [Handlebars templates](https://handlebarsjs.com/) for server-side rendering, [@hono/node-server](https://www.npmjs.com/package/@hono/node-server) for running on Node.js, secure [HTTP-only cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#security) for session management, and [CSRF protection](https://authjs.dev/concepts/session-strategies#csrf-protection) through Auth.js built-in tokens. The authentication flow follows OAuth 2.0 best practices with [Proof Key for Code Exchange](https://zitadel.com/docs/guides/integrate/login/oidc/oauth-recommended-flows) to prevent authorization code interception attacks.
|
||||
|
||||
@@ -31,22 +31,22 @@ The implementation uses [Handlebars templates](https://handlebarsjs.com/) for se
|
||||
|
||||
### Prerequisites
|
||||
|
||||
Before running this example, you need to create and configure a PKCE application in the [ZITADEL Console](/docs/guides/manage/console/console-overview). Follow the **[Application Setup guide](/docs/guides/manage/console/applications-overview)** to:
|
||||
Before running this example, you need to create and configure a PKCE application in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview). Follow the PKCE application setup guide to:
|
||||
|
||||
1. Create a new Web application in your [ZITADEL Project](/docs/guides/manage/console/projects-overview)
|
||||
2. Configure it to use the [PKCE authentication method](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects)
|
||||
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
|
||||
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [ZITADEL Console](/docs/guides/manage/console/console-overview) if you're using HTTP URLs during local development. For production, always use HTTPS URLs and disable Dev Mode.
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview) 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](https://github.com/zitadel/example-auth-hono).
|
||||
2. Create a `.env` file (copy from `.env.example`) and configure it with the values from your [ZITADEL Application](/docs/guides/manage/console/applications-overview). **Use the exact environment variable names from the repository:**
|
||||
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). **Use the exact environment variable names from the repository:**
|
||||
```
|
||||
NODE_ENV=development
|
||||
PORT=3000
|
||||
@@ -60,7 +60,7 @@ Once you have your Zitadel application configured:
|
||||
ZITADEL_POST_LOGOUT_URL=http://localhost:3000
|
||||
```
|
||||
Replace these values with:
|
||||
- Your actual **Zitadel instance URL** (the Issuer from your [instance settings](https://zitadel.com/docs/guides/manage/console/instance-settings))
|
||||
- Your actual **Zitadel instance URL** (the Issuer from your [instance settings](https://zitadel.com/docs/guides/manage/console/default-settings))
|
||||
- The **Client ID** you copied when creating the application in the PKCE setup
|
||||
- The **redirect URI** you configured in the PKCE setup (must match exactly)
|
||||
- The **post-logout redirect URI** for handling logout callbacks
|
||||
@@ -80,14 +80,11 @@ The application will be running at `http://localhost:3000`. Visit the homepage t
|
||||
|
||||
## Learn more and resources
|
||||
|
||||
* [Zitadel documentation](https://zitadel.com/docs)
|
||||
* [PKCE concept](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
* [PKCE application setup](/docs/guides/manage/console/applications-overview)
|
||||
* [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/)
|
||||
* [OIDC integration guide](https://zitadel.com/docs/guides/integrate/login/oidc/login-users)
|
||||
* [OAuth recommended flows](https://zitadel.com/docs/guides/integrate/login/oidc/oauth-recommended-flows)
|
||||
* [Framework docs](https://hono.dev)
|
||||
* [Auth.js](https://authjs.dev)
|
||||
* [Auth.js Hono adapter](https://www.npmjs.com/package/@hono/auth-js)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-hono)
|
||||
* [All framework examples](/docs/sdk-examples/introduction)
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Examples and SDKs for ZITADEL
|
||||
title: Examples and SDKs for Zitadel
|
||||
sidebar_label: Introduction
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
You can integrate ZITADEL quickly into your application and be up and running within minutes.
|
||||
You can integrate Zitadel quickly into your application and be up and running within minutes.
|
||||
To achieve your goals as fast as possible, we provide you with SDKs, Example Repositories and Guides.
|
||||
|
||||
The SDKs and integration depend on the framework and language you are using.
|
||||
@@ -31,7 +31,7 @@ import { Frameworks } from "../../src/components/frameworks";
|
||||
|
||||
<Frameworks filter={(framework) => framework.client === false || framework.client == null} />
|
||||
|
||||
To further streamline your setup, simply visit the console in ZITADEL where you can select one of the languages or frameworks. This will allow you to instantly set up the configuration for that specific sample in ZITADEL, ensuring you have everything you need to get started right away.
|
||||
To further streamline your setup, simply visit the console in Zitadel where you can select one of the languages or frameworks. This will allow you to instantly set up the configuration for that specific sample in Zitadel, ensuring you have everything you need to get started right away.
|
||||
|
||||
|
||||
|
||||
@@ -54,7 +54,7 @@ You might want to check out the following links to find a good library:
|
||||
## Other example applications
|
||||
|
||||
- [B2B customer portal](https://github.com/zitadel/zitadel-nextjs-b2b): Showcase the use of personal access tokens in a B2B environment. Uses NextJS Framework.
|
||||
- [Frontend with backend API](https://github.com/zitadel/example-quote-generator-app): A simple web application using a React front-end and a Python back-end API, both secured using ZITADEL
|
||||
- [Frontend with backend API](https://github.com/zitadel/example-quote-generator-app): A simple web application using a React front-end and a Python back-end API, both secured using Zitadel
|
||||
- [Introspection](https://github.com/zitadel/examples-api-access-and-token-introspection): Python examples for securing an API and invoking it as a service user
|
||||
- [Fine-grained authorization](https://github.com/zitadel/example-fine-grained-authorization): Leverage actions, custom metadata, and claims for attribute-based access control
|
||||
|
||||
@@ -125,4 +125,4 @@ drwxr-xr-x 3 ffo ffo 4096 Apr 11 16:49 ..
|
||||
-rw-r--r-- 1 ffo ffo 13568 Apr 11 16:49 v1_pb.rb
|
||||
```
|
||||
|
||||
Import these files into your project to start interacting with ZITADEL's APIs.
|
||||
Import these files into your project to start interacting with Zitadel's APIs.
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
title: Laravel
|
||||
sidebar_label: Laravel
|
||||
framework_url: https://laravel.com
|
||||
auth_library: "Laravel Socialite"
|
||||
auth_library_url: https://laravel.com/docs/socialite
|
||||
example_repo: https://github.com/zitadel/example-auth-laravel
|
||||
auth_flow: pkce
|
||||
status: stable
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
[Laravel](https://laravel.com) is a web application framework with expressive, elegant syntax. It provides a robust set of features for web applications, making it one of the most popular choices for building server-side applications. This example demonstrates how to integrate **[Zitadel](https://zitadel.com/docs)** using the **[OAuth 2.0 PKCE flow](https://oauth.net/2/pkce/)** to authenticate users securely and maintain sessions across your application.
|
||||
|
||||
#### Auth library
|
||||
|
||||
This example uses **[Laravel Socialite](https://laravel.com/docs/socialite)**, the standard authentication library for Laravel applications. Laravel Socialite implements the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) flow through a custom Zitadel provider, manages [PKCE](https://oauth.net/2/pkce/), performs secure token exchange, and provides session management through Laravel's authentication system.
|
||||
|
||||
---
|
||||
|
||||
## What this example demonstrates
|
||||
|
||||
This example shows a complete authentication implementation using [Laravel](https://laravel.com) with [Zitadel](https://zitadel.com/docs). Users start on a public landing page, click a login button to authenticate with Zitadel using the secure [PKCE flow](https://oauth.net/2/pkce/), and are redirected to a protected profile page displaying their [user information](https://zitadel.com/docs/apis/openidoauth/claims) after successful authentication.
|
||||
|
||||
The application implements server-side session management with Laravel's built-in session handling, storing authentication state securely in encrypted cookies. Protected routes use Laravel middleware to automatically redirect unauthenticated users to the sign-in flow, ensuring only authenticated users can access sensitive areas. The profile page displays comprehensive user information including [OIDC claims](https://zitadel.com/docs/apis/openidoauth/claims) and [session metadata](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint).
|
||||
|
||||
The application demonstrates proper **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** by terminating sessions both locally and with Zitadel's [end-session endpoint](https://zitadel.com/docs/guides/integrate/login/oidc/logout), complete with CSRF protection using state parameters. Additionally, it includes automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/endpoints) using [refresh tokens](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) to maintain long-lived sessions without requiring users to re-authenticate. The example uses [Zitadel-specific scopes](https://zitadel.com/docs/apis/openidoauth/scopes) like `urn:zitadel:iam:user:metadata` and `urn:zitadel:iam:org:projects:roles` to access extended user attributes and role information for implementing [role-based access control (RBAC)](https://zitadel.com/docs/guides/manage/console/roles).
|
||||
|
||||
---
|
||||
|
||||
## 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/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)
|
||||
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/overview) 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](https://zitadel.com/docs/guides/manage/console/applications) configured:
|
||||
|
||||
1. Clone the [repository](https://github.com/zitadel/example-auth-laravel).
|
||||
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). **Use these exact environment variable names:**
|
||||
```
|
||||
APP_KEY=your-app-key
|
||||
APP_ENV=local
|
||||
APP_DEBUG=true
|
||||
SERVER_URL=http://localhost:3000
|
||||
SERVER_PORT=3000
|
||||
DB_CONNECTION=sqlite
|
||||
ZITADEL_DOMAIN=https://your-zitadel-domain
|
||||
ZITADEL_CLIENT_ID=your-zitadel-application-client-id
|
||||
ZITADEL_CLIENT_SECRET=your-randomly-generated-client-secret
|
||||
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) for `ZITADEL_DOMAIN` (the issuer)
|
||||
- The **Client ID** you copied when creating the application for `ZITADEL_CLIENT_ID`
|
||||
- The **post-logout redirect URI** for `ZITADEL_POST_LOGOUT_URL`
|
||||
- A strong random string for `APP_KEY` (generate using: `php artisan key:generate`)
|
||||
- A randomly generated string for `ZITADEL_CLIENT_SECRET` (generate using: `php -r "echo bin2hex(random_bytes(32));"`)
|
||||
3. Install dependencies using [Composer](https://getcomposer.org) with `composer install` and start the development server with `composer run dev` 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)
|
||||
* [Laravel documentation](https://laravel.com/docs)
|
||||
* [Laravel Socialite documentation](https://laravel.com/docs/socialite)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-laravel)
|
||||
@@ -11,21 +11,21 @@ status: stable
|
||||
|
||||
## Overview
|
||||
|
||||
[NestJS](https://nestjs.com) is a progressive Node.js framework for building efficient, reliable, and scalable server-side applications using [TypeScript](https://www.typescriptlang.org). This example demonstrates how to integrate **Zitadel** using the **[OAuth 2.0 PKCE flow](/docs/guides/integrate/login/oidc/login-users#pkce)** to authenticate users securely and maintain sessions across your NestJS application.
|
||||
[NestJS](https://nestjs.com) is a progressive Node.js framework for building efficient, reliable, and scalable server-side applications using [TypeScript](https://www.typescriptlang.org). 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 NestJS application.
|
||||
|
||||
#### Auth library
|
||||
|
||||
This example uses **[@auth/core](https://www.npmjs.com/package/@auth/core)**, the core authentication library powering [Auth.js](https://authjs.dev), which implements the [OpenID Connect (OIDC)](https://openid.net/connect/) flow, manages [PKCE](/docs/guides/integrate/login/oidc/login-users#pkce), performs [token exchange](https://zitadel.com/docs/apis/openidoauth/endpoints), and exposes helpers for [session state](https://zitadel.com/docs/guides/integrate/login/oidc/session-handling). The example integrates this through the **[@mridang/nestjs-auth](https://www.npmjs.com/package/@mridang/nestjs-auth)** [NestJS module](https://docs.nestjs.com/modules), which provides [decorators](https://docs.nestjs.com/custom-decorators), [guards](https://docs.nestjs.com/guards), and middleware for seamless authentication within the NestJS ecosystem.
|
||||
This example uses **[@auth/core](https://www.npmjs.com/package/@auth/core)**, the core authentication library powering [Auth.js](https://authjs.dev), which implements the [OpenID Connect (OIDC)](https://openid.net/connect/) flow, manages [PKCE](https://oauth.net/2/pkce/), performs token exchange, and exposes helpers for [session state](https://zitadel.com/docs/guides/integrate/login/oidc/login-users). The example integrates this through the **[@mridang/nestjs-auth](https://www.npmjs.com/package/@mridang/nestjs-auth)** [NestJS module](https://docs.nestjs.com/modules), which provides [decorators](https://docs.nestjs.com/custom-decorators), [guards](https://docs.nestjs.com/guards), and middleware for seamless authentication within the NestJS ecosystem.
|
||||
|
||||
---
|
||||
|
||||
## What this example demonstrates
|
||||
|
||||
This example implements a complete authentication flow using [PKCE](/docs/guides/integrate/login/oidc/login-users#pkce) with [Zitadel](https://zitadel.com/docs) as the identity provider. Users begin on a public landing page and click a login button to authenticate through Zitadel's authorization server. After successful authentication, they're redirected to a protected profile page displaying their user information retrieved from the [ID token](https://zitadel.com/docs/apis/openidoauth/claims) and [access token](https://zitadel.com/docs/concepts/tokens).
|
||||
This example implements a complete authentication flow using [PKCE](https://oauth.net/2/pkce/) with [Zitadel](https://zitadel.com/docs) as the identity provider. Users begin on a public landing page and click a login button to authenticate through Zitadel's authorization server. After successful authentication, they're redirected to a protected profile page displaying their user information retrieved from the [ID token](https://zitadel.com/docs/apis/openidoauth/claims) and [access token](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint).
|
||||
|
||||
The application leverages [NestJS controllers](https://docs.nestjs.com/controllers) to handle authentication routes and [@mridang/nestjs-auth guards](https://www.npmjs.com/package/@mridang/nestjs-auth) to protect routes requiring authentication. [Session management](https://zitadel.com/docs/guides/integrate/login/oidc/session-handling) is handled through encrypted [JWT-based sessions](https://authjs.dev/concepts/session-strategies#jwt-session) stored in secure, HTTP-only cookies. The example includes automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) functionality using [refresh tokens](https://oauth.net/2/refresh-tokens/), ensuring users maintain their sessions without interruption when access tokens expire.
|
||||
The application leverages [NestJS controllers](https://docs.nestjs.com/controllers) to handle authentication routes and [@mridang/nestjs-auth guards](https://www.npmjs.com/package/@mridang/nestjs-auth) to protect routes requiring authentication. [Session management](https://zitadel.com/docs/guides/integrate/login/oidc/login-users) is handled through encrypted [JWT-based sessions](https://authjs.dev/concepts/session-strategies#jwt-session) stored in secure, HTTP-only cookies. The example includes automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) functionality using [refresh tokens](https://oauth.net/2/refresh-tokens/), ensuring users maintain their sessions without interruption when access tokens expire.
|
||||
|
||||
The logout implementation demonstrates [federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout) by redirecting users to Zitadel's end-session endpoint, terminating both the local application session and the Zitadel session. [CSRF protection](https://owasp.org/www-community/attacks/csrf) during logout is achieved through a state parameter validated in the callback. The example also showcases accessing Zitadel's [UserInfo endpoint](https://zitadel.com/docs/apis/openidoauth/endpoints#userinfo) to fetch real-time user data, including [custom claims](https://zitadel.com/docs/apis/openidoauth/claims), [roles](https://zitadel.com/docs/guides/manage/console/roles), and organization membership.
|
||||
The logout implementation demonstrates [federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout) by redirecting users to Zitadel's end-session endpoint, terminating both the local application session and the Zitadel session. [CSRF protection](https://owasp.org/www-community/attacks/csrf) during logout is achieved through a state parameter validated in the callback. The example also showcases accessing Zitadel's [UserInfo endpoint](https://zitadel.com/docs/apis/openidoauth/endpoints#userinfo_endpoint) to fetch real-time user data, including [custom claims](https://zitadel.com/docs/apis/openidoauth/claims), [roles](https://zitadel.com/docs/guides/manage/console/roles), and organization membership.
|
||||
|
||||
All protected routes are secured using the [@mridang/nestjs-auth global guard](https://www.npmjs.com/package/@mridang/nestjs-auth), with the `@Public()` decorator marking routes that don't require authentication. The application uses [Handlebars templates](https://handlebarsjs.com) for server-side rendering and [Tailwind CSS](https://tailwindcss.com) for styling, providing a complete reference implementation for NestJS developers.
|
||||
|
||||
@@ -35,22 +35,22 @@ All protected routes are secured using the [@mridang/nestjs-auth global guard](h
|
||||
|
||||
### Prerequisites
|
||||
|
||||
Before running this example, you need to create and configure a PKCE application in the [ZITADEL Console](/docs/guides/manage/console/console-overview). Follow the **[Application Setup guide](/docs/guides/manage/console/applications-overview)** to:
|
||||
Before running this example, you need to create and configure a PKCE application in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview). 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](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects)
|
||||
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
|
||||
|
||||
> **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.
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview) 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](https://github.com/zitadel/example-auth-nestjs).
|
||||
2. Create a `.env` file in the project root and configure it with the values from your [ZITADEL Application](/docs/guides/manage/console/applications-overview). **Use the exact environment variable names from the repository:**
|
||||
2. Create a `.env` file in the project root and configure it with the values from your [Zitadel application](https://zitadel.com/docs/guides/manage/console/applications). **Use the exact environment variable names from the repository:**
|
||||
```
|
||||
NODE_ENV=development
|
||||
PORT=3000
|
||||
@@ -85,13 +85,10 @@ Once you have your Zitadel application configured:
|
||||
|
||||
## Learn more and resources
|
||||
|
||||
* [Zitadel documentation](https://zitadel.com/docs)
|
||||
* [PKCE concept](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
* [PKCE application setup](/docs/guides/manage/console/applications-overview)
|
||||
* [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/)
|
||||
* [OIDC integration guide](https://zitadel.com/docs/guides/integrate/login/oidc/login-users)
|
||||
* [Framework docs](https://nestjs.com)
|
||||
* [Auth library (@auth/core)](https://www.npmjs.com/package/@auth/core)
|
||||
* [NestJS auth module](https://www.npmjs.com/package/@mridang/nestjs-auth)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-nestjs)
|
||||
* [All framework examples](/docs/sdk-examples/introduction)
|
||||
|
||||
@@ -1,54 +1,83 @@
|
||||
---
|
||||
title: Next.js
|
||||
sidebar_label: Next.js
|
||||
framework_url: https://nextjs.org
|
||||
auth_library: next-auth
|
||||
auth_library_url: https://next-auth.js.org
|
||||
example_repo: https://github.com/zitadel/example-auth-nextjs
|
||||
auth_flow: pkce
|
||||
status: stable
|
||||
---
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img width="100px" src="/docs/img/tech/nextjs.svg" alt="next js logo" className="hideonlight"/>
|
||||
<img width="100px" src="/docs/img/tech/nextjslight.svg" alt="next js logo" className="hideondark"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://nextjs.org/" target="_blank">Next.js</a> is a React-based framework that provides a powerful and flexible set of tools for building high-performance, SEO-friendly web applications.
|
||||
Get started integrating authentication to your Next.js Application by checking out our <a href="https://github.com/zitadel/zitadel-nextjs" target="_blank">zitadel-nextjs</a> Example.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
## Overview
|
||||
|
||||
[Next.js](https://nextjs.org) is a React framework for building full-stack 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 Next.js application.
|
||||
|
||||
### Resources
|
||||
- [Example App Repository](https://github.com/zitadel/zitadel-nextjs)
|
||||
- [Step-By-Step Guide](/docs/examples/login/nextjs)
|
||||
- [B2B customer portal](https://github.com/zitadel/zitadel-nextjs-b2b): Showcase the use of personal access tokens in a B2B environment built with Next.js
|
||||
#### Auth library
|
||||
|
||||
### SDK
|
||||
This example uses **[next-auth](https://www.npmjs.com/package/next-auth)** with **[openid-client](https://www.npmjs.com/package/openid-client)** 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.
|
||||
|
||||
ZITADEL does not provide a Next.js specific SDK.
|
||||
However, for integrating authentication into your Next.js Application you can use [NextAuth ZITADEL Provider](https://next-auth.js.org/providers/zitadel)
|
||||
---
|
||||
|
||||
Check out our [Example Application](/docs/sdk-examples/nextjs#example-application)
|
||||
## What this example demonstrates
|
||||
|
||||
This Next.js application demonstrates a secure authentication flow using Zitadel with the industry-standard [PKCE flow](https://oauth.net/2/pkce/). Users start on a public landing page, initiate login via the Zitadel authorization server, and after successful authentication are redirected back to a protected profile page displaying their [user information and claims](https://zitadel.com/docs/apis/openidoauth/claims).
|
||||
|
||||
### Example Application
|
||||
The application implements session management using NextAuth.js with a JWT-based session strategy. It includes automatic callback handling with secure token exchange, route protection for authenticated-only pages, and an example of requesting additional [OIDC scopes](https://zitadel.com/docs/apis/openidoauth/scopes) (including `offline_access` for refresh tokens and Zitadel-specific scopes for metadata and roles).
|
||||
|
||||
The [zitadel-nextjs](https://github.com/zitadel/zitadel-nextjs) repository includes an Example Application ready to start and show how a Next.js application looks like with integrated ZITADEL Login.
|
||||
The logout flow implements **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** via the end-session endpoint, terminating both the local session and the Zitadel session before redirecting the user back to the application. It also demonstrates automatic token refresh to maintain long-lived sessions without requiring users to re-authenticate.
|
||||
|
||||
What does the Example include:
|
||||
TODO: ?? Update with correct infos
|
||||
- Home Page with Login Button
|
||||
- Authenticating user with OIDC PKCE Flow
|
||||
- Private Page: Shows user information of authenticated user, only accessible after login
|
||||
- Logout
|
||||
---
|
||||
|
||||
### Step-By-Step Guide
|
||||
## Getting started
|
||||
|
||||
The [Step-By-Step Guide](/docs/examples/login/nextjs) leads you through the whole process from configuring the right application in ZITADEL to a ready application with integrated Login.
|
||||
### Prerequisites
|
||||
|
||||
After completing the Step-By-Step Guide you will have:
|
||||
TODO: ?? Updated with correct infos
|
||||
1. Example Web Application with integrated ZITADEL Login
|
||||
2. Example page accessible by authenticated user showing retrieved user information
|
||||
3. Logout
|
||||
4. Correct setup for your application in ZITADEL
|
||||
Before running this example, you need to create and configure a PKCE application in the [Zitadel Console](https://zitadel.com/docs/guides/manage/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)
|
||||
2. Configure it to use the PKCE authentication method
|
||||
3. Set up your redirect URIs (e.g., `http://localhost:3000/api/auth/callback/zitadel` for development)
|
||||
4. Configure post-logout redirect URIs (e.g., `http://localhost:3000/api/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/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-nextjs).
|
||||
2. Create a `.env.local` file (copy from `.env.example`) and configure it with the values from your [Zitadel application](https://zitadel.com/docs/guides/manage/console/applications). Use these environment variable names exactly as shown:
|
||||
```
|
||||
NODE_ENV=development
|
||||
PORT=3000
|
||||
SESSION_SECRET=your-very-secret-and-strong-session-key
|
||||
SESSION_DURATION=3600
|
||||
ZITADEL_DOMAIN=https://your-zitadel-domain
|
||||
ZITADEL_CLIENT_ID=your-zitadel-application-client-id
|
||||
ZITADEL_CLIENT_SECRET=your-randomly-generated-client-secret
|
||||
ZITADEL_CALLBACK_URL=http://localhost:3000/api/auth/callback/zitadel
|
||||
ZITADEL_POST_LOGIN_URL=/profile
|
||||
ZITADEL_POST_LOGOUT_URL=http://localhost:3000/api/auth/logout/callback
|
||||
NEXTAUTH_URL=http://localhost:3000
|
||||
```
|
||||
Replace these values with:
|
||||
- Your actual [Zitadel instance URL](https://zitadel.com/docs/guides/manage/console/default-settings) (the **ZITADEL_DOMAIN**)
|
||||
- The **Client ID** you copied when creating the application
|
||||
- A randomly generated **SESSION_SECRET** using: `node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"`
|
||||
- A randomly generated **ZITADEL_CLIENT_SECRET** (required by Auth.js / NextAuth.js even though PKCE doesn't require it)
|
||||
- The **redirect URIs** you configured in the PKCE setup (must match exactly)
|
||||
3. Install dependencies using [npm](https://www.npmjs.com) by running `npm install`, then start the development server with `npm run dev` to verify the authentication flow end-to-end at `http://localhost:3000`.
|
||||
|
||||
---
|
||||
|
||||
## 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)
|
||||
* [Next.js documentation](https://nextjs.org)
|
||||
* [NextAuth.js documentation](https://next-auth.js.org/)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-nextjs)
|
||||
|
||||
@@ -11,19 +11,19 @@ status: stable
|
||||
|
||||
## Overview
|
||||
|
||||
[Nuxt.js](https://nuxt.com) is the intuitive [Vue.js](https://vuejs.org) framework that enables you to create full-stack web applications with server-side rendering, file-based routing, and auto-imports. This example demonstrates how to integrate **Zitadel** using the **[OAuth 2.0 PKCE flow](/docs/guides/integrate/login/oidc/login-users#pkce)** to authenticate users securely and maintain sessions across your application.
|
||||
[Nuxt.js](https://nuxt.com) is the intuitive [Vue.js](https://vuejs.org) framework that enables you to create full-stack web applications with server-side rendering, file-based routing, and auto-imports. 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 application.
|
||||
|
||||
#### Auth library
|
||||
|
||||
This example uses **[@sidebase/nuxt-auth](https://www.npmjs.com/package/@sidebase/nuxt-auth)**, a Nuxt module that wraps **[NextAuth.js/Auth.js](https://next-auth.js.org)** for seamless authentication integration. Under the hood, it leverages **[next-auth](https://www.npmjs.com/package/next-auth)** with the **[openid-client](https://www.npmjs.com/package/openid-client)** library to implement the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) protocol, manage [PKCE](/docs/guides/integrate/login/oidc/login-users#pkce), perform token exchange, and handle [session management](https://zitadel.com/docs/concepts/structure/sessions).
|
||||
This example uses **[@sidebase/nuxt-auth](https://www.npmjs.com/package/@sidebase/nuxt-auth)**, a Nuxt module that wraps **[NextAuth.js/Auth.js](https://next-auth.js.org)** for seamless authentication integration. Under the hood, it leverages **[next-auth](https://www.npmjs.com/package/next-auth)** with the **[openid-client](https://www.npmjs.com/package/openid-client)** library to implement the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) protocol, manage [PKCE](https://oauth.net/2/pkce/), perform token exchange, and handle [session management](https://authjs.dev/concepts/session-strategies).
|
||||
|
||||
---
|
||||
|
||||
## What this example demonstrates
|
||||
|
||||
This [Nuxt.js](https://nuxt.com) application showcases a complete authentication pattern using [Zitadel](https://zitadel.com/docs) with the **[PKCE flow](/docs/guides/integrate/login/oidc/login-users#pkce)**. Users begin on a public landing page where they can initiate sign-in with Zitadel through the **[@sidebase/nuxt-auth](https://www.npmjs.com/package/@sidebase/nuxt-auth)** module. After successful authentication, they're redirected to a protected profile page displaying their [user information and claims](https://zitadel.com/docs/apis/openidoauth/claims).
|
||||
This [Nuxt.js](https://nuxt.com) application showcases a complete authentication pattern using [Zitadel](https://zitadel.com/docs) with the **[PKCE flow](https://oauth.net/2/pkce/)**. Users begin on a public landing page where they can initiate sign-in with Zitadel through the **[@sidebase/nuxt-auth](https://www.npmjs.com/package/@sidebase/nuxt-auth)** module. After successful authentication, they're redirected to a protected profile page displaying their [user information and claims](https://zitadel.com/docs/apis/openidoauth/claims).
|
||||
|
||||
The example implements secure [session management](https://zitadel.com/docs/concepts/structure/sessions) using [JWT tokens](https://zitadel.com/docs/concepts/structure/tokens) with automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/endpoints) capabilities through [refresh tokens](https://zitadel.com/docs/concepts/structure/tokens#refresh-token). Protected routes automatically redirect unauthenticated users to the sign-in flow using [Nuxt middleware](https://nuxt.com/docs/guide/directory-structure/middleware), ensuring sensitive areas remain secure. The application also includes complete **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** functionality that properly terminates both the local session and the Zitadel session through the [end-session endpoint](https://zitadel.com/docs/guides/integrate/login/oidc/logout), redirecting users back to the application with proper CSRF protection using state parameters.
|
||||
The example implements secure [session management](https://authjs.dev/concepts/session-strategies) using [JWT tokens](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint) with automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/endpoints) capabilities through [refresh tokens](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token). Protected routes automatically redirect unauthenticated users to the sign-in flow using [Nuxt middleware](https://nuxt.com/docs/guide/directory-structure/middleware), ensuring sensitive areas remain secure. The application also includes complete **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** functionality that properly terminates both the local session and the Zitadel session through the [end-session endpoint](https://zitadel.com/docs/guides/integrate/login/oidc/logout), redirecting users back to the application with proper CSRF protection using state parameters.
|
||||
|
||||
---
|
||||
|
||||
@@ -31,10 +31,10 @@ The example implements secure [session management](https://zitadel.com/docs/conc
|
||||
|
||||
### Prerequisites
|
||||
|
||||
Before running this example, you need to create and configure a PKCE application in the [ZITADEL Console](/docs/guides/manage/console/console-overview). Follow the **[Application Setup guide](/docs/guides/manage/console/applications-overview)** to:
|
||||
Before running this example, you need to create and configure a PKCE application in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview). Follow the PKCE application setup guide to:
|
||||
|
||||
1. Create a new Web application in your [ZITADEL Project](/docs/guides/manage/console/projects-overview)
|
||||
2. Configure it to use the [PKCE authentication method](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects)
|
||||
2. Configure it to use the PKCE authentication method
|
||||
3. Set up your redirect URIs (e.g., `http://localhost:3000/api/auth/callback/zitadel` for development)
|
||||
4. Configure post-logout redirect URIs (e.g., `http://localhost:3000/`)
|
||||
5. Copy your **Client ID** for use in the next steps
|
||||
@@ -46,7 +46,7 @@ Before running this example, you need to create and configure a PKCE application
|
||||
Once you have your Zitadel application configured:
|
||||
|
||||
1. Clone the [repository](https://github.com/zitadel/example-auth-nuxtjs).
|
||||
2. Create a `.env` file and configure it with the values from your [ZITADEL Application](/docs/guides/manage/console/applications-overview). **Use these exact environment variable names:**
|
||||
2. Create a `.env` file and configure it with the values from your [Zitadel application](https://zitadel.com/docs/guides/manage/console/applications). **Use these exact environment variable names:**
|
||||
```
|
||||
PORT=3000
|
||||
SESSION_DURATION=3600
|
||||
@@ -59,7 +59,7 @@ Once you have your Zitadel application configured:
|
||||
AUTH_ORIGIN=http://localhost:3000
|
||||
```
|
||||
Replace these values with:
|
||||
- Your actual Zitadel instance URL (the **Issuer** from your [ZITADEL instance settings](/docs/guides/manage/console/console-overview#overview))
|
||||
- Your actual Zitadel instance URL (the **Issuer** from your [Zitadel instance settings](https://zitadel.com/docs/guides/manage/console/overview))
|
||||
- The **Client ID** you copied when creating the application
|
||||
- A randomly generated **NUXT_AUTH_SECRET** for session encryption (generate using: `node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"`)
|
||||
- The **callback URI** you configured in the PKCE setup (must match exactly)
|
||||
@@ -76,13 +76,10 @@ The application will be running at `http://localhost:3000` where you can test th
|
||||
|
||||
## Learn more and resources
|
||||
|
||||
* [Zitadel documentation](https://zitadel.com/docs)
|
||||
* [PKCE concept](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
* [PKCE application setup](/docs/guides/manage/console/applications-overview)
|
||||
* [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/)
|
||||
* [OIDC integration guide](https://zitadel.com/docs/guides/integrate/login/oidc/login-users)
|
||||
* [Framework docs](https://nuxt.com)
|
||||
* [@sidebase/nuxt-auth](https://www.npmjs.com/package/@sidebase/nuxt-auth)
|
||||
* [NextAuth.js/Auth.js](https://next-auth.js.org)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-nuxtjs)
|
||||
* [All framework examples](/docs/sdk-examples/introduction)
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
---
|
||||
title: Python Django
|
||||
sidebar_label: Python Django
|
||||
---
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img width="100px" src="/docs/img/tech/django.png" alt="python logo"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://www.djangoproject.com/" target="_blank">Django</a> is a high-level <a href="https://www.python.org">Python</a> web framework that encourages rapid development and clean, pragmatic design.
|
||||
Get started integrating authentication to your Django API Application by checking out our <a href="https://github.com/zitadel/example-python-django-oauth" target="_blank">example-python-django-oauth</a> or your Django Web application by checking out our <a href="https://github.com/zitadel/example-python-django-oidc" target="_blank">example-python-django-oidc</a> Example.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
### Resources
|
||||
- [Example API App Repository](https://github.com/zitadel/example-python-django-oauth)
|
||||
- [API App Step-By-Step Guide](/docs/examples/secure-api/python-django)
|
||||
- [Example Web App Repository](https://github.com/zitadel/example-python-django-oidc)
|
||||
- [Web App Step-By-Step Guide](/docs/examples/login/python-django)
|
||||
|
||||
### Django SDK
|
||||
|
||||
ZITADEL does not provide a Python Django specific SDK.
|
||||
But you can integrate ZITADEL to your application by using any OIDC Library such as [mozilla-django-oidc](https://github.com/mozilla/mozilla-django-oidc) or [authlib](https://github.com/lepture/authlib).
|
||||
|
||||
### Examples Application
|
||||
|
||||
What does the API Application Example include:
|
||||
- REST API Application secured with OAuth2
|
||||
- Public Endpoint: Accessible without authentication
|
||||
- Private Endpoint: Accessible with a token
|
||||
- Administrator Endpoint: Accessible with a token of a user with admin role
|
||||
|
||||
[Example API App](https://github.com/zitadel/example-python-django-oauth)
|
||||
|
||||
What does the Web Application Example include:
|
||||
1. Example Web Application with integrated ZITADEL Login
|
||||
2. Example page accessible by authenticated user showing retrieved user information
|
||||
3. Example page accessible by authenticated user showing polls
|
||||
- Votes for polls can only be done if authenticated
|
||||
- New polls can be created by user with admin role
|
||||
4. Logout
|
||||
5. Correct setup for your application in ZITADEL
|
||||
|
||||
[Example Web App](https://github.com/zitadel/example-python-django-oidc)
|
||||
|
||||
### Step-By-Step Guide
|
||||
|
||||
After completing the Step-By-Step Guide for an API you will have:
|
||||
1. Example REST API checking tokens against ZITADEL with OAuth2
|
||||
2. Public Endpoint accessible by any user
|
||||
3. Private Endpoint accessible by authenticated user
|
||||
4. Private Endpoint accessible by user with role 'admin'
|
||||
5. Correct setup for your application in ZITADEL
|
||||
|
||||
[API App Step-By-Step Guide](/docs/examples/secure-api/python-django)
|
||||
|
||||
After completing the Step-By-Step Guide for an Web application you will have:
|
||||
1. Example Web Application with integrated ZITADEL Login
|
||||
2. Example page accessible by authenticated user showing retrieved user information
|
||||
3. Example page accessible by authenticated user showing polls
|
||||
- Votes for polls can only be done if authenticated
|
||||
- New polls can be created by user with admin role
|
||||
4. Logout
|
||||
5. Correct setup for your application in ZITADEL
|
||||
|
||||
[Web App Step-By-Step Guide](/docs/examples/login/python-django)
|
||||
@@ -1,53 +0,0 @@
|
||||
---
|
||||
title: Python Flask
|
||||
sidebar_label: Python Flask
|
||||
---
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img width="100px" src="/docs/img/tech/flask.svg" alt="python logo" className="hideonlight"/>
|
||||
<img width="100px" src="/docs/img/tech/flasklight.svg" alt="python logo" className="hideondark"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://flask.palletsprojects.com/en/3.0.x/" target="_blank">Flask</a> is a lightweight and easy-to-use microframework for <a href="https://www.python.org">Python</a> web development.
|
||||
Get started integrating authentication to your Flask API Application by checking out our <a href="https://github.com/zitadel/example-api-python3-flask" target="_blank">example-api-python3-flask</a> Example.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
### Resources
|
||||
- [Example App Repository](https://github.com/zitadel/example-api-python3-flask)
|
||||
- [API APP Step-By-Step Guide](/docs/examples/secure-api/python-flask)
|
||||
- [Frontend with backend API](https://github.com/zitadel/example-quote-generator-app): A simple web application using a React front-end and a Python back-end API, both secured using ZITADEL
|
||||
- [Fine-grained authorization](https://github.com/zitadel/example-fine-grained-authorization): Leverage actions, custom metadata, and claims for attribute-based access control
|
||||
|
||||
### Flask SDK
|
||||
|
||||
ZITADEL does not provide a Python Flask specific SDK.
|
||||
But you can integrate ZITADEL to your application by using any OIDC Library such as [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc).
|
||||
|
||||
Check out our [Example Application](/docs/sdk-examples/angular#example-application)
|
||||
|
||||
|
||||
### Examples Application
|
||||
|
||||
What does the API Application Example include:
|
||||
- REST API Application secured with OAuth2
|
||||
- Public Endpoint: Accessible without authentication
|
||||
- Private Endpoint: Accessible with a token
|
||||
- Administrator Endpoint: Accessible with a token of a user with admin role
|
||||
|
||||
[Example API App](https://github.com/zitadel/example-api-python3-flask)
|
||||
|
||||
### Step-By-Step Guide
|
||||
|
||||
After completing the Step-By-Step Guide you will have:
|
||||
1. Example REST API checking tokens against ZITADEL with OAuth2
|
||||
2. Public Endpoint accessible by any user
|
||||
3. Private Endpoint accessible by authenticated user
|
||||
4. Private Endpoint accessible by user with role 'admin'
|
||||
5. Correct setup for your application in ZITADEL
|
||||
|
||||
[API APP Step-By-Step Guide](/docs/examples/secure-api/python-flask)
|
||||
@@ -11,21 +11,21 @@ status: stable
|
||||
|
||||
## Overview
|
||||
|
||||
[Qwik](https://qwik.dev) is a framework for building resumable web applications with instant-on interactivity and optimal performance. This example demonstrates how to integrate **Zitadel** using the **[OAuth 2.0 PKCE flow](/docs/guides/integrate/login/oidc/login-users#pkce)** to authenticate users securely and maintain sessions across the app.
|
||||
[Qwik](https://qwik.dev) is a framework for building resumable web applications with instant-on interactivity and optimal performance. 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 the app.
|
||||
|
||||
#### Auth library
|
||||
|
||||
This example uses **[@auth/qwik](https://www.npmjs.com/package/@auth/qwik)**, a Qwik adapter for **[@auth/core](https://www.npmjs.com/package/@auth/core)** (formerly Auth.js/NextAuth.js), which implements the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) flow, manages [PKCE](/docs/guides/integrate/login/oidc/login-users#pkce), performs token exchange, and exposes helpers for [session state](https://zitadel.com/docs/concepts/sessions). The core library handles authentication across multiple frameworks and provides secure [token storage](https://zitadel.com/docs/concepts/tokens) with automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) capabilities.
|
||||
This example uses **[@auth/qwik](https://www.npmjs.com/package/@auth/qwik)**, a Qwik adapter for **[@auth/core](https://www.npmjs.com/package/@auth/core)** (formerly Auth.js/NextAuth.js), which implements the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) flow, manages [PKCE](https://oauth.net/2/pkce/), performs token exchange, and exposes helpers for session state. The core library handles authentication across multiple frameworks and provides secure [token storage](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint) with automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) capabilities.
|
||||
|
||||
---
|
||||
|
||||
## What this example demonstrates
|
||||
|
||||
This [Qwik](https://qwik.dev) application showcases a complete authentication implementation using [ZITADEL](https://zitadel.com/docs) with the [Authorization Code Flow with PKCE](/docs/guides/integrate/login/oidc/login-users#pkce). The example includes secure sign-in functionality that redirects users to ZITADEL's hosted login page, handles the OAuth callback to exchange authorization codes for [access tokens](https://zitadel.com/docs/concepts/tokens), and manages [sessions](https://zitadel.com/docs/concepts/sessions) with [JWT tokens](https://zitadel.com/docs/apis/openidoauth/endpoints#json-web-token-jwt-profile) stored in encrypted server-side cookies.
|
||||
This [Qwik](https://qwik.dev) application showcases a complete authentication implementation using [Zitadel](https://zitadel.com/docs) with the [Authorization Code Flow with PKCE](https://oauth.net/2/pkce/). The example includes secure sign-in functionality that redirects users to Zitadel's hosted login page, handles the OAuth callback to exchange authorization codes for [access tokens](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint), and manages sessions with [JWT tokens](https://zitadel.com/docs/apis/openidoauth/endpoints#token-jwt-response) stored in encrypted server-side cookies.
|
||||
|
||||
Route protection is implemented using [Qwik City's](https://qwik.dev/docs/qwikcity) `onRequest` handler, which performs server-side authentication checks before rendering protected pages. Unauthenticated users attempting to access secured routes are automatically redirected to the login page with a callback URL to return them to their intended destination after successful authentication. The application displays comprehensive user profile information including standard [OIDC claims](https://zitadel.com/docs/apis/openidoauth/claims) like name and email, as well as ZITADEL-specific claims such as [organization membership](/docs/guides/manage/console/organizations-overview) and [project roles](/docs/guides/manage/console/projects-overview).
|
||||
Route protection is implemented using [Qwik City's](https://qwik.dev/docs/qwikcity) `onRequest` handler, which performs server-side authentication checks before rendering protected pages. Unauthenticated users attempting to access secured routes are automatically redirected to the login page with a callback URL to return them to their intended destination after successful authentication. The application displays comprehensive user profile information including standard [OIDC claims](https://zitadel.com/docs/apis/openidoauth/claims) like name and email, as well as Zitadel-specific claims such as [organization membership](https://zitadel.com/docs/guides/manage/console/organizations) and [project roles](https://zitadel.com/docs/guides/manage/console/projects).
|
||||
|
||||
Sign-out functionality implements **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** through ZITADEL's end-session endpoint, ensuring that users are logged out from both the application and ZITADEL's [single sign-on session](https://zitadel.com/docs/concepts/sessions). The logout process includes [CSRF protection](https://zitadel.com/docs/guides/integrate/login/oidc/logout#csrf-protection) using state parameters validated through secure cookies, followed by proper cleanup of session data and redirection back to the application.
|
||||
Sign-out functionality implements **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** through Zitadel's end-session endpoint, ensuring that users are logged out from both the application and Zitadel's single sign-on session. The logout process includes [CSRF protection](https://zitadel.com/docs/guides/integrate/login/oidc/logout#csrf-protection) using state parameters validated through secure cookies, followed by proper cleanup of session data and redirection back to the application.
|
||||
|
||||
---
|
||||
|
||||
@@ -33,22 +33,22 @@ Sign-out functionality implements **[federated logout](https://zitadel.com/docs/
|
||||
|
||||
### Prerequisites
|
||||
|
||||
Before running this example, you need to create and configure a PKCE application in the [ZITADEL Console](/docs/guides/manage/console/console-overview). Follow the **[Application Setup guide](/docs/guides/manage/console/applications-overview)** to:
|
||||
Before running this example, you need to create and configure a PKCE application in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview). Follow the PKCE application setup guide to:
|
||||
|
||||
1. Create a new Web application in your [ZITADEL Project](/docs/guides/manage/console/projects-overview)
|
||||
2. Configure it to use the [PKCE authentication method](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects)
|
||||
2. Configure it to use the PKCE authentication method
|
||||
3. Set up your redirect URIs (e.g., `http://localhost:3000/auth/callback/zitadel` for development)
|
||||
4. Configure post-logout redirect URIs (e.g., `http://localhost:3000/api/auth/logout/callback`)
|
||||
5. Copy your **Client ID** for use in the next steps
|
||||
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [ZITADEL Console](/docs/guides/manage/console/console-overview) if you're using HTTP URLs during local development. For production, always use HTTPS URLs and disable Dev Mode.
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview) 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](/docs/guides/manage/console/applications-overview) configured:
|
||||
Once you have your [Zitadel application](https://zitadel.com/docs/guides/manage/console/applications) configured:
|
||||
|
||||
1. Clone the [repository](https://github.com/zitadel/example-auth-qwik).
|
||||
2. Create a `.env.local` file and configure it with the values from your [ZITADEL Application](/docs/guides/manage/console/applications-overview):
|
||||
2. Create a `.env.local` file and configure it with the values from your [Zitadel application](https://zitadel.com/docs/guides/manage/console/applications):
|
||||
```
|
||||
VITE_PORT=3000
|
||||
VITE_SESSION_SECRET=your-very-secret-and-strong-session-key
|
||||
@@ -60,7 +60,7 @@ Once you have your [ZITADEL Application](/docs/guides/manage/console/application
|
||||
VITE_ZITADEL_POST_LOGOUT_URL=http://localhost:3000/api/auth/logout/callback
|
||||
```
|
||||
Replace these values with:
|
||||
- Your actual Zitadel instance URL (the **Issuer** from your [application settings](https://zitadel.com/docs/guides/integrate/login/oidc/))
|
||||
- Your actual Zitadel instance URL (the **Issuer** from your [application settings](https://zitadel.com/docs/guides/integrate/login/oidc/login-users))
|
||||
- The **Client ID** you copied when creating the application
|
||||
- A randomly generated session secret (generate using: `node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"`)
|
||||
- A randomly generated client secret value (Auth.js requires this for internal configuration)
|
||||
@@ -78,13 +78,10 @@ The application will be available at `http://localhost:3000`.
|
||||
|
||||
## Learn more and resources
|
||||
|
||||
* [Zitadel documentation](https://zitadel.com/docs)
|
||||
* [PKCE concept](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
* [PKCE application setup](/docs/guides/manage/console/applications-overview)
|
||||
* [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/)
|
||||
* [OIDC integration guide](https://zitadel.com/docs/guides/integrate/login/oidc/login-users)
|
||||
* [Framework docs](https://qwik.dev)
|
||||
* [Auth library (@auth/core)](https://www.npmjs.com/package/@auth/core)
|
||||
* [Qwik adapter (@auth/qwik)](https://www.npmjs.com/package/@auth/qwik)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-qwik)
|
||||
* [All framework examples](/docs/sdk-examples/introduction)
|
||||
|
||||
@@ -11,21 +11,21 @@ status: stable
|
||||
|
||||
## Overview
|
||||
|
||||
[React](https://react.dev) 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](/docs/guides/integrate/login/oidc/login-users#pkce)** to authenticate users securely and maintain sessions across your React application.
|
||||
[React](https://react.dev) 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](https://oauth.net/2/pkce/)** to authenticate users securely and maintain sessions across your React application.
|
||||
|
||||
#### Auth library
|
||||
|
||||
This example uses **[react-oidc-context](https://www.npmjs.com/package/react-oidc-context)**, a React wrapper around **[oidc-client-ts](https://www.npmjs.com/package/oidc-client-ts)**. The underlying [oidc-client-ts](https://github.com/authts/oidc-client-ts) library implements the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) protocol, manages [PKCE](/docs/guides/integrate/login/oidc/login-users#pkce) code challenge generation, performs secure [token exchange](https://zitadel.com/docs/concepts/tokens), and exposes React hooks for managing authentication state throughout your application.
|
||||
This example uses **[react-oidc-context](https://www.npmjs.com/package/react-oidc-context)**, a React wrapper around **[oidc-client-ts](https://www.npmjs.com/package/oidc-client-ts)**. The underlying [oidc-client-ts](https://github.com/authts/oidc-client-ts) library implements the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) protocol, manages [PKCE](https://oauth.net/2/pkce/) code challenge generation, performs secure [token exchange](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint), and exposes React hooks for managing authentication state throughout your application.
|
||||
|
||||
---
|
||||
|
||||
## What this example demonstrates
|
||||
|
||||
This [React](https://react.dev) application showcases a complete authentication flow using [Zitadel](https://zitadel.com/docs) with the secure [PKCE](/docs/guides/integrate/login/oidc/login-users#pkce) standard. Users begin on a public landing page where they can initiate login through [react-oidc-context](https://www.npmjs.com/package/react-oidc-context), which redirects them to [Zitadel's authorization endpoint](https://zitadel.com/docs/apis/openidoauth/endpoints) for authentication. After successful authentication, the application handles the OAuth callback, exchanges the authorization code for [access tokens](https://zitadel.com/docs/concepts/tokens), and establishes a secure [session](https://zitadel.com/docs/apis/openidoauth/endpoints).
|
||||
This [React](https://react.dev) application showcases a complete authentication flow using [Zitadel](https://zitadel.com/docs) with the secure [PKCE](https://oauth.net/2/pkce/) standard. Users begin on a public landing page where they can initiate login through [react-oidc-context](https://www.npmjs.com/package/react-oidc-context), which redirects them to [Zitadel's authorization endpoint](https://zitadel.com/docs/apis/openidoauth/endpoints) for authentication. After successful authentication, the application handles the OAuth callback, exchanges the authorization code for [access tokens](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint), and establishes a secure [session](https://zitadel.com/docs/apis/openidoauth/endpoints).
|
||||
|
||||
Protected routes are secured using [react-oidc-context's](https://www.npmjs.com/package/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](https://zitadel.com/docs/apis/openidoauth/claims), including profile details, email, and metadata. The application implements complete [federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout) functionality, properly terminating both the local session and the Zitadel session through the end-session endpoint.
|
||||
|
||||
The example leverages [React Router](https://reactrouter.com) for client-side navigation and [Vite](https://vite.dev) as the build tool, demonstrating modern React development patterns with [TypeScript](https://www.typescriptlang.org). All authentication state management, including [token refresh](https://zitadel.com/docs/concepts/tokens) with offline access, is handled automatically by the [oidc-client-ts](https://www.npmjs.com/package/oidc-client-ts) library under the hood.
|
||||
The example leverages [React Router](https://reactrouter.com) for client-side navigation and [Vite](https://vite.dev) as the build tool, demonstrating modern React development patterns with [TypeScript](https://www.typescriptlang.org). All authentication state management, including [token refresh](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint) with offline access, is handled automatically by the [oidc-client-ts](https://www.npmjs.com/package/oidc-client-ts) library under the hood.
|
||||
|
||||
---
|
||||
|
||||
@@ -33,22 +33,22 @@ The example leverages [React Router](https://reactrouter.com) for client-side na
|
||||
|
||||
### Prerequisites
|
||||
|
||||
Before running this example, you need to create and configure a PKCE application in the [ZITADEL Console](/docs/guides/manage/console/console-overview). Follow the **[Application Setup guide](/docs/guides/manage/console/applications-overview)** to:
|
||||
Before running this example, you need to create and configure a PKCE application in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview). Follow the PKCE application setup guide to:
|
||||
|
||||
1. Create a new Web application in your [ZITADEL Project](/docs/guides/manage/console/projects-overview)
|
||||
2. Configure it to use the [PKCE authentication method](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects)
|
||||
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](/docs/guides/manage/console/console-overview) if you're using HTTP URLs during local development. For production, always use HTTPS URLs and disable Dev Mode.
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview) 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](https://github.com/zitadel/example-auth-react).
|
||||
2. Create a `.env` file (copy from `.env.example`) and configure it with the values from your [ZITADEL Application](/docs/guides/manage/console/applications-overview). **Use these exact environment variable names:**
|
||||
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). **Use these exact environment variable names:**
|
||||
```
|
||||
VITE_ZITADEL_DOMAIN=https://your-instance.zitadel.cloud
|
||||
VITE_ZITADEL_CLIENT_ID=your_client_id_from_console
|
||||
@@ -58,9 +58,9 @@ VITE_POST_LOGIN_URL=/profile
|
||||
VITE_PORT=3000
|
||||
```
|
||||
Replace these values with:
|
||||
- Your actual Zitadel instance URL (the **Issuer** from your [Zitadel application settings](https://zitadel.com/docs/guides/integrate/login/oidc/))
|
||||
- Your actual Zitadel instance URL (the **Issuer** from your [Zitadel application settings](https://zitadel.com/docs/guides/integrate/login/oidc/login-users))
|
||||
- The **Client ID** you copied when creating the application
|
||||
- The **redirect URI** you configured in the [PKCE setup](/docs/guides/manage/console/applications-overview) (must match exactly)
|
||||
- The **redirect URI** you configured in the PKCE setup (must match exactly)
|
||||
- The **post-logout redirect URI** you configured
|
||||
3. Install dependencies using [npm](https://www.npmjs.com) and start the development server:
|
||||
```bash
|
||||
@@ -74,14 +74,11 @@ The application will be running at `http://localhost:3000` where you can test th
|
||||
|
||||
## Learn more and resources
|
||||
|
||||
* [Zitadel documentation](https://zitadel.com/docs)
|
||||
* [PKCE concept](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
* [PKCE application setup](/docs/guides/manage/console/applications-overview)
|
||||
* [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/)
|
||||
* [OIDC integration guide](https://zitadel.com/docs/guides/integrate/login/oidc/login-users)
|
||||
* [React documentation](https://react.dev)
|
||||
* [react-oidc-context](https://www.npmjs.com/package/react-oidc-context)
|
||||
* [oidc-client-ts](https://www.npmjs.com/package/oidc-client-ts)
|
||||
* [React Router](https://reactrouter.com)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-react)
|
||||
* [All framework examples](/docs/sdk-examples/introduction)
|
||||
|
||||
@@ -11,19 +11,19 @@ status: stable
|
||||
|
||||
## Overview
|
||||
|
||||
[SolidStart](https://start.solidjs.com) is a full-stack web framework built on top of [SolidJS](https://solidjs.com) that enables you to create performant web applications with a modern development experience. This example demonstrates how to integrate **[Zitadel](https://zitadel.com/docs)** using the **[OAuth 2.0 PKCE flow](/docs/guides/integrate/login/oidc/login-users#pkce)** to authenticate users securely and maintain [sessions](/docs/guides/manage/console/default-settings#login-lifetimes) across the app.
|
||||
[SolidStart](https://start.solidjs.com) is a full-stack web framework built on top of [SolidJS](https://solidjs.com) that enables you to create performant web applications with a modern development experience. This example demonstrates how to integrate **[Zitadel](https://zitadel.com/docs)** using the **[OAuth 2.0 PKCE flow](https://oauth.net/2/pkce/)** to authenticate users securely and maintain [sessions](https://authjs.dev/concepts/session-strategies) across the app.
|
||||
|
||||
#### Auth library
|
||||
|
||||
This example uses **[@auth/solid-start](https://www.npmjs.com/package/@auth/solid-start)**, the SolidStart adapter for [Auth.js](https://authjs.dev), which builds on **[@auth/core](https://www.npmjs.com/package/@auth/core)**. Auth.js implements the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) flow, manages [PKCE](/docs/guides/integrate/login/oidc/login-users#pkce), performs [token exchange](https://zitadel.com/docs/apis/openidoauth/grant-types), and exposes helpers for [session state](/docs/guides/manage/console/default-settings#login-lifetimes). The example also uses **[openid-client](https://www.npmjs.com/package/openid-client)** ([GitHub](https://github.com/panva/node-openid-client)) for manual token refresh operations and logout URL construction.
|
||||
This example uses **[@auth/solid-start](https://www.npmjs.com/package/@auth/solid-start)**, the SolidStart adapter for [Auth.js](https://authjs.dev), which builds on **[@auth/core](https://www.npmjs.com/package/@auth/core)**. Auth.js implements the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) flow, manages [PKCE](https://oauth.net/2/pkce/), performs [token exchange](https://zitadel.com/docs/apis/openidoauth/grant-types), and exposes helpers for [session state](https://authjs.dev/concepts/session-strategies). The example also uses **[openid-client](https://www.npmjs.com/package/openid-client)** ([GitHub](https://github.com/panva/node-openid-client)) for manual token refresh operations and logout URL construction.
|
||||
|
||||
---
|
||||
|
||||
## What this example demonstrates
|
||||
|
||||
This example shows a complete authentication implementation using [SolidStart](https://start.solidjs.com) with [Zitadel](https://zitadel.com/docs). Users start on a public landing page and click a login button to authenticate with Zitadel using the secure **[PKCE flow](/docs/guides/integrate/login/oidc/login-users#pkce)**. The [Auth.js](https://authjs.dev) library handles the [OAuth 2.0](https://zitadel.com/docs/guides/integrate/login/oidc/oauth-recommended-flows) authorization code exchange and manages secure [session storage](/docs/guides/manage/console/default-settings#login-lifetimes) using encrypted [JWT tokens](https://zitadel.com/docs/concepts/tokens). After successful authentication, users are redirected to a protected profile page displaying their user information including [OIDC claims](https://zitadel.com/docs/apis/openidoauth/claims) like name, email, and custom [Zitadel metadata](https://zitadel.com/docs/apis/openidoauth/claims#reserved-claims).
|
||||
This example shows a complete authentication implementation using [SolidStart](https://start.solidjs.com) with [Zitadel](https://zitadel.com/docs). Users start on a public landing page and click a login button to authenticate with Zitadel using the secure **[PKCE flow](https://oauth.net/2/pkce/)**. The [Auth.js](https://authjs.dev) library handles the [OAuth 2.0](https://zitadel.com/docs/guides/integrate/login/oidc/oauth-recommended-flows) authorization code exchange and manages secure [session storage](https://authjs.dev/concepts/session-strategies) using encrypted [JWT tokens](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint). After successful authentication, users are redirected to a protected profile page displaying their user information including [OIDC claims](https://zitadel.com/docs/apis/openidoauth/claims) like name, email, and custom [Zitadel metadata](https://zitadel.com/docs/apis/openidoauth/claims#reserved-claims).
|
||||
|
||||
The application implements automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) to maintain long-lived sessions without requiring users to re-authenticate. When an [access token](https://zitadel.com/docs/concepts/tokens) expires, the refresh logic seamlessly exchanges the [refresh token](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) for new tokens in the background. [Route protection](https://start.solidjs.com/api/createAsync) is implemented using [SolidStart's server functions](https://start.solidjs.com/api/server$), ensuring only authenticated users can access sensitive areas. The logout flow implements [federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout) with CSRF protection using state parameters, properly terminating both the local session and the Zitadel session before redirecting users back to the application.
|
||||
The application implements automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) to maintain long-lived sessions without requiring users to re-authenticate. When an [access token](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint) expires, the refresh logic seamlessly exchanges the [refresh token](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) for new tokens in the background. [Route protection](https://start.solidjs.com/api/createAsync) is implemented using [SolidStart's server functions](https://start.solidjs.com/api/server$), ensuring only authenticated users can access sensitive areas. The logout flow implements [federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout) with CSRF protection using state parameters, properly terminating both the local session and the Zitadel session before redirecting users back to the application.
|
||||
|
||||
---
|
||||
|
||||
@@ -31,22 +31,22 @@ The application implements automatic [token refresh](https://zitadel.com/docs/ap
|
||||
|
||||
### Prerequisites
|
||||
|
||||
Before running this example, you need to create and configure a PKCE application in the [ZITADEL Console](/docs/guides/manage/console/console-overview). Follow the **[Application Setup guide](/docs/guides/manage/console/applications-overview)** to:
|
||||
Before running this example, you need to create and configure a PKCE application in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview). Follow the PKCE application setup guide to:
|
||||
|
||||
1. Create a new Web application in your [ZITADEL Project](/docs/guides/manage/console/projects-overview)
|
||||
2. Configure it to use the [PKCE authentication method](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects)
|
||||
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/api/auth/logout/callback`)
|
||||
5. Copy your **Client ID** for use in the next steps
|
||||
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [ZITADEL Console](/docs/guides/manage/console/console-overview) if you're using HTTP URLs during local development. For production, always use HTTPS URLs and disable Dev Mode.
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview) 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](/docs/guides/manage/console/applications-overview) configured:
|
||||
Once you have your [Zitadel application](https://zitadel.com/docs/guides/manage/console/applications) configured:
|
||||
|
||||
1. Clone the [repository](https://github.com/zitadel/example-auth-solidstart).
|
||||
2. Create a `.env` file and configure it with the values from your [ZITADEL Application](/docs/guides/manage/console/applications-overview). Use the exact environment variable names from the repository:
|
||||
2. Create a `.env` file and configure it with the values from your [Zitadel application](https://zitadel.com/docs/guides/manage/console/applications). Use the exact environment variable names from the repository:
|
||||
```
|
||||
NODE_ENV=development
|
||||
PORT=3000
|
||||
@@ -61,8 +61,8 @@ Once you have your [ZITADEL Application](/docs/guides/manage/console/application
|
||||
NEXTAUTH_URL="http://localhost:3000"
|
||||
```
|
||||
Replace these values with:
|
||||
- Your actual [Zitadel instance URL](https://zitadel.com/docs/guides/manage/console/instance-settings) (the **Issuer**)
|
||||
- The **Client ID** you copied when [creating the application](/docs/guides/manage/console/applications-overview)
|
||||
- Your actual [Zitadel instance URL](https://zitadel.com/docs/guides/manage/console/default-settings) (the **Issuer**)
|
||||
- The **Client ID** you copied when creating the application
|
||||
- The **redirect URIs** you configured in the PKCE setup (must match exactly)
|
||||
- A secure random string for `SESSION_SECRET` (generate using: `node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"`)
|
||||
- A secure random string for `ZITADEL_CLIENT_SECRET` for [Auth.js](https://authjs.dev) configuration compatibility
|
||||
@@ -76,15 +76,12 @@ Once you have your [ZITADEL Application](/docs/guides/manage/console/application
|
||||
|
||||
## Learn more and resources
|
||||
|
||||
* [Zitadel documentation](https://zitadel.com/docs)
|
||||
* [PKCE concept](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
* [PKCE application setup](/docs/guides/manage/console/applications-overview)
|
||||
* [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/)
|
||||
* [OIDC integration guide](https://zitadel.com/docs/guides/integrate/login/oidc/login-users)
|
||||
* [SolidStart documentation](https://start.solidjs.com)
|
||||
* [Auth.js documentation](https://authjs.dev)
|
||||
* [@auth/solid-start](https://www.npmjs.com/package/@auth/solid-start)
|
||||
* [@auth/core](https://www.npmjs.com/package/@auth/core)
|
||||
* [openid-client](https://www.npmjs.com/package/openid-client)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-solidstart)
|
||||
* [All framework examples](/docs/sdk-examples/introduction)
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
---
|
||||
title: Spring Boot
|
||||
sidebar_label: Spring Boot
|
||||
framework_url: https://spring.io/projects/spring-boot
|
||||
auth_library: "Spring Security"
|
||||
auth_library_url: https://spring.io/projects/spring-security
|
||||
example_repo: https://github.com/zitadel/example-auth-spring
|
||||
auth_flow: pkce
|
||||
status: stable
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
[Spring Boot](https://spring.io/projects/spring-boot) is a powerful, production-ready framework for building Java applications. This example shows how to integrate **Zitadel** into a Spring Boot web application using **OpenID Connect (OIDC)** and the **Authorization Code Flow + PKCE**.
|
||||
|
||||
It demonstrates a common web app pattern: users start on a public landing page, authenticate with Zitadel via a login button, and are then redirected to a protected profile page that displays user information. Logout is also implemented to end both the local session and the Zitadel session.
|
||||
|
||||
#### Auth library
|
||||
|
||||
This example uses **[Spring Security](https://spring.io/projects/spring-security)**, the standard framework for authentication and access control in Spring applications. Spring Security supports OIDC natively and manages the PKCE flow for you.
|
||||
|
||||
---
|
||||
|
||||
## What this example demonstrates
|
||||
|
||||
This example shows a complete authentication implementation using Spring Security’s OAuth 2.0 / OIDC support:
|
||||
|
||||
- **Public landing page** (`/`) accessible without authentication.
|
||||
- **Sign-in with Zitadel** via Spring Security’s OAuth2 login entrypoint.
|
||||
- **Route protection** so authenticated access is required for protected routes (e.g. `/profile`).
|
||||
- **Profile page** that renders the authenticated user’s OIDC claims.
|
||||
- **Server-side session management** handled by the servlet container + Spring Security.
|
||||
- **Federated logout** that clears the local session and triggers RP-initiated logout against Zitadel, returning the user to a post-logout callback route.
|
||||
|
||||
---
|
||||
|
||||
## Getting started
|
||||
|
||||
### Prerequisites
|
||||
|
||||
Before you begin, ensure you have the following:
|
||||
|
||||
#### System Requirements
|
||||
|
||||
- Java Development Kit (JDK) 17 or later
|
||||
- Maven (or use the included `mvnw` wrapper)
|
||||
|
||||
#### Account Setup
|
||||
|
||||
You’ll need a Zitadel account and an application configured for a Web app using Authorization Code + PKCE.
|
||||
|
||||
> **Important:** Configure the following URLs in your Zitadel application settings:
|
||||
>
|
||||
> - **Redirect URIs:** `http://localhost:3000/auth/callback`
|
||||
> - **Post Logout Redirect URIs:** `http://localhost:3000/auth/logout/callback`
|
||||
>
|
||||
> These URLs must exactly match what your Spring Boot application uses. For production, add your production URLs.
|
||||
|
||||
### Run the example
|
||||
|
||||
1. Clone the repository.
|
||||
2. Copy `.env.example` to `.env` and fill in your Zitadel details.
|
||||
|
||||
```dotenv
|
||||
# Port number where your Spring Boot server will listen for incoming HTTP requests.
|
||||
PORT=3000
|
||||
|
||||
# Session timeout in seconds. Users will be automatically logged out after this
|
||||
# duration of inactivity. 3600 seconds = 1 hour.
|
||||
SESSION_DURATION=3600
|
||||
|
||||
# Your Zitadel instance domain URL. Include the full https:// URL.
|
||||
ZITADEL_DOMAIN="https://your-zitadel-domain"
|
||||
|
||||
# Application Client ID from your Zitadel application settings.
|
||||
ZITADEL_CLIENT_ID="your-client-id"
|
||||
|
||||
# Provide a randomly generated string here.
|
||||
ZITADEL_CLIENT_SECRET="your-randomly-generated-client-secret"
|
||||
```
|
||||
|
||||
3. Build and start the server:
|
||||
|
||||
```bash
|
||||
# 1. Clone the repository
|
||||
git clone [email protected]:zitadel/example-auth-spring.git
|
||||
cd example-auth-spring
|
||||
|
||||
# 2. Build the project and download dependencies
|
||||
mvn clean install
|
||||
|
||||
# 3. Start the development server
|
||||
mvn spring-boot:run
|
||||
```
|
||||
|
||||
4. Open `http://localhost:3000` and walk through login → profile → logout.
|
||||
|
||||
---
|
||||
|
||||
## 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)
|
||||
* [Spring Boot documentation](https://spring.io/projects/spring-boot)
|
||||
* [Spring Security documentation](https://spring.io/projects/spring-security)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-spring)
|
||||
@@ -11,19 +11,19 @@ status: stable
|
||||
|
||||
## Overview
|
||||
|
||||
[SvelteKit](https://kit.svelte.dev) is a framework for building web applications with flexible filesystem-based routing and a unified approach to server-side and client-side logic. This example demonstrates how to integrate **Zitadel** using the **[OAuth 2.0 PKCE flow](/docs/guides/integrate/login/oidc/login-users#pkce)** to authenticate users securely and maintain sessions across your application.
|
||||
[SvelteKit](https://kit.svelte.dev) is a framework for building web applications with flexible filesystem-based routing and a unified approach to server-side and client-side logic. 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 application.
|
||||
|
||||
#### Auth library
|
||||
|
||||
This example uses **[@auth/sveltekit](https://www.npmjs.com/package/@auth/sveltekit)**, the SvelteKit integration of **[@auth/core](https://www.npmjs.com/package/@auth/core)** (formerly NextAuth.js). Auth.js provides a complete authentication solution that handles the [OpenID Connect](https://zitadel.com/docs/apis/openidoauth/endpoints) protocol, manages [PKCE](/docs/guides/integrate/login/oidc/login-users#pkce) code generation and verification, performs secure token exchange, and provides session management utilities across your SvelteKit application.
|
||||
This example uses **[@auth/sveltekit](https://www.npmjs.com/package/@auth/sveltekit)**, the SvelteKit integration of **[@auth/core](https://www.npmjs.com/package/@auth/core)** (formerly NextAuth.js). Auth.js provides a complete authentication solution that handles the [OpenID Connect](https://zitadel.com/docs/apis/openidoauth/endpoints) protocol, manages [PKCE](https://oauth.net/2/pkce/) code generation and verification, performs secure token exchange, and provides session management utilities across your SvelteKit application.
|
||||
|
||||
---
|
||||
|
||||
## What this example demonstrates
|
||||
|
||||
This example provides a complete authentication implementation showing how to secure a [SvelteKit](https://kit.svelte.dev) application with [Zitadel](https://zitadel.com/docs). Users start on a public landing page and click a login button to authenticate through Zitadel's [authorization server](https://zitadel.com/docs/apis/openidoauth/endpoints) using the **[PKCE flow](/docs/guides/integrate/login/oidc/login-users#pkce)**. After successful authentication, they're redirected to a protected profile page that displays their [user information and claims](https://zitadel.com/docs/apis/openidoauth/claims).
|
||||
This example provides a complete authentication implementation showing how to secure a [SvelteKit](https://kit.svelte.dev) application with [Zitadel](https://zitadel.com/docs). Users start on a public landing page and click a login button to authenticate through Zitadel's [authorization server](https://zitadel.com/docs/apis/openidoauth/endpoints) using the **[PKCE flow](https://oauth.net/2/pkce/)**. After successful authentication, they're redirected to a protected profile page that displays their [user information and claims](https://zitadel.com/docs/apis/openidoauth/claims).
|
||||
|
||||
The example demonstrates route protection using [SvelteKit's server-side load functions](https://kit.svelte.dev/docs/load) that verify [session state](https://zitadel.com/docs/concepts/tokens) before rendering protected pages. Authentication state is managed through [@auth/sveltekit hooks](https://www.npmjs.com/package/@auth/sveltekit), which integrate with [SvelteKit's hooks system](https://kit.svelte.dev/docs/hooks) to provide session data throughout your application. The implementation includes automatic [access token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) to maintain long-lived sessions without requiring users to re-authenticate.
|
||||
The example demonstrates route protection using [SvelteKit's server-side load functions](https://kit.svelte.dev/docs/load) that verify [session state](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint) before rendering protected pages. Authentication state is managed through [@auth/sveltekit hooks](https://www.npmjs.com/package/@auth/sveltekit), which integrate with [SvelteKit's hooks system](https://kit.svelte.dev/docs/hooks) to provide session data throughout your application. The implementation includes automatic [access token refresh](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) to maintain long-lived sessions without requiring users to re-authenticate.
|
||||
|
||||
The logout flow implements **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** with proper CSRF protection, terminating both the local application session and the Zitadel session before redirecting users back to your application. Custom error pages provide user-friendly messages for authentication failures, and the example includes comprehensive security headers configured through [SvelteKit's hooks](https://kit.svelte.dev/docs/hooks).
|
||||
|
||||
@@ -33,22 +33,22 @@ The logout flow implements **[federated logout](https://zitadel.com/docs/guides/
|
||||
|
||||
### Prerequisites
|
||||
|
||||
Before running this example, you need to create and configure a PKCE application in the [ZITADEL Console](/docs/guides/manage/console/console-overview). Follow the **[Application Setup guide](/docs/guides/manage/console/applications-overview)** to:
|
||||
Before running this example, you need to create and configure a PKCE application in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview). Follow the PKCE application setup guide to:
|
||||
|
||||
1. Create a new Web application in your [ZITADEL Project](/docs/guides/manage/console/projects-overview)
|
||||
2. Configure it to use the [PKCE authentication method](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects)
|
||||
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
|
||||
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [ZITADEL Console](/docs/guides/manage/console/console-overview) if you're using HTTP URLs during local development. For production, always use HTTPS URLs and disable Dev Mode.
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview) 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](https://github.com/zitadel/example-auth-sveltekit).
|
||||
2. Create a `.env.local` file in the project root and configure it with the values from your [ZITADEL Application](/docs/guides/manage/console/applications-overview). **Use these exact environment variable names:**
|
||||
2. Create a `.env.local` file in the project root and configure it with the values from your [Zitadel application](https://zitadel.com/docs/guides/manage/console/applications). **Use these exact environment variable names:**
|
||||
```
|
||||
SESSION_SECRET=your-very-secret-and-strong-session-key
|
||||
SESSION_DURATION=3600
|
||||
@@ -77,13 +77,10 @@ Once you have your Zitadel application configured:
|
||||
|
||||
## Learn more and resources
|
||||
|
||||
* [Zitadel documentation](https://zitadel.com/docs)
|
||||
* [PKCE concept](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
* [PKCE application setup](/docs/guides/manage/console/applications-overview)
|
||||
* [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/)
|
||||
* [OIDC integration guide](https://zitadel.com/docs/guides/integrate/login/oidc/login-users)
|
||||
* [SvelteKit documentation](https://kit.svelte.dev)
|
||||
* [Auth.js (SvelteKit)](https://www.npmjs.com/package/@auth/sveltekit)
|
||||
* [Auth.js Core](https://www.npmjs.com/package/@auth/core)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-sveltekit)
|
||||
* [All framework examples](/docs/sdk-examples/introduction)
|
||||
|
||||
@@ -1,53 +1,79 @@
|
||||
---
|
||||
title: Symfony PHP Framework
|
||||
sidebar_label: Symfony PHP
|
||||
title: Symfony
|
||||
sidebar_label: Symfony
|
||||
framework_url: https://symfony.com
|
||||
auth_library: "Symfony Security"
|
||||
auth_library_url: https://symfony.com/doc/current/security.html
|
||||
example_repo: https://github.com/zitadel/example-auth-symfony
|
||||
auth_flow: pkce
|
||||
status: stable
|
||||
---
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img width="100px" src="/docs/img/tech/php.svg" alt="php logo"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://symfony.com/" target="_blank">Symfony</a> is a high-performance PHP framework that provides a solid foundation for building scalable and maintainable web applications.
|
||||
Integrate authentication to your Symfony application easily by using the <a href="https://github.com/zitadel/example-symfony-oidc" target="_blank">example-symfony-oidc</a> Example.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
## Overview
|
||||
|
||||
### Resources
|
||||
- [Example Web App with ZITADEL Login](https://github.com/zitadel/example-symfony-oidc)
|
||||
- [Step-By-Step Guide](/docs/examples/login/symfony)
|
||||
[Symfony](https://symfony.com) is a set of reusable PHP components and a PHP framework for web projects. It provides a robust set of features for web applications, making it one of the most popular choices for building server-side applications. This example demonstrates how to integrate **[Zitadel](https://zitadel.com/docs)** using the **[OAuth 2.0 PKCE flow](https://oauth.net/2/pkce/)** to authenticate users securely and maintain sessions across your application.
|
||||
|
||||
### PHP SDK
|
||||
#### Auth library
|
||||
|
||||
ZITADEL does not provide a Symfony specific SDK.
|
||||
But you can integrate ZITADEL to your application by using any OIDC Library such as [symfony-oidc](https://github.com/Drenso/symfony-oidc).
|
||||
This example uses **[Symfony Security](https://symfony.com/doc/current/security.html)**, the standard authentication component for Symfony applications. Symfony Security implements the [OpenID Connect (OIDC)](https://zitadel.com/docs/apis/openidoauth/endpoints) flow through a custom authenticator, manages [PKCE](https://oauth.net/2/pkce/), performs secure token exchange, and provides session management through Symfony's firewall system.
|
||||
|
||||
Check out our [Example Application](/docs/sdk-examples/symfony#example-application)
|
||||
---
|
||||
|
||||
### Example Application
|
||||
## What this example demonstrates
|
||||
|
||||
The [example-symfony-oidc](https://github.com/zitadel/example-symfony-oidc) repository includes an Example Application ready to start and show how a Symfony application looks like with integrated ZITADEL Login.
|
||||
This example shows a complete authentication implementation using [Symfony](https://symfony.com) with [Zitadel](https://zitadel.com/docs). Users start on a public landing page, click a login button to authenticate with Zitadel using the secure [PKCE flow](https://oauth.net/2/pkce/), and are redirected to a protected profile page displaying their [user information](https://zitadel.com/docs/apis/openidoauth/claims) after successful authentication.
|
||||
|
||||
What does the Example include:
|
||||
- OIDC Code flow with User Info call after authentication.
|
||||
- Fully integrated with Symfony security and firewall.
|
||||
- User Role mapping
|
||||
- Persistent user data using local sqlite file. See DATABASE_URL in .env.
|
||||
- Public page at /
|
||||
- Authenticated /profile page for all users.
|
||||
- Authenticated /admin page for admin role users.
|
||||
- Logout
|
||||
The application implements server-side session management with Symfony's security system, storing authentication state securely through the framework's user provider pattern. Protected routes use Symfony Security's firewall configuration to automatically redirect unauthenticated users to the sign-in flow, ensuring only authenticated users can access sensitive areas. The profile page displays comprehensive user information including [OIDC claims](https://zitadel.com/docs/apis/openidoauth/claims) and [session metadata](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint).
|
||||
|
||||
### Step-By-Step Guide
|
||||
The application demonstrates proper **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** by terminating sessions both locally and with Zitadel's [end-session endpoint](https://zitadel.com/docs/guides/integrate/login/oidc/logout), complete with CSRF protection using state parameters. Additionally, it includes automatic [token refresh](https://zitadel.com/docs/apis/openidoauth/endpoints) using [refresh tokens](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) to maintain long-lived sessions without requiring users to re-authenticate. The example uses [Zitadel-specific scopes](https://zitadel.com/docs/apis/openidoauth/scopes) like `urn:zitadel:iam:user:metadata` and `urn:zitadel:iam:org:projects:roles` to access extended user attributes and role information for implementing [role-based access control (RBAC)](https://zitadel.com/docs/guides/manage/console/roles).
|
||||
|
||||
The [Step-By-Step Guide](/docs/examples/login/symfony) leads you through the whole process from configuring the right application in ZITADEL to a ready application with integrated Login.
|
||||
---
|
||||
|
||||
After completing the Step-By-Step Guide you will have:
|
||||
1. Example Web Application with integrated ZITADEL Login
|
||||
2. Example page accessible without authentication
|
||||
3. Example page accessible by authenticated user showing retrieved user information
|
||||
4. Example administrator page accessible by user with administrator role
|
||||
5. Logout
|
||||
6. Correct setup for your application in ZITADEL
|
||||
## 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/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)
|
||||
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/overview) 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](https://zitadel.com/docs/guides/manage/console/applications) configured:
|
||||
|
||||
1. Clone the [repository](https://github.com/zitadel/example-auth-symfony).
|
||||
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). **Use these exact environment variable names:**
|
||||
```
|
||||
APP_SECRET=your-app-secret-key
|
||||
SERVER_URL=http://localhost:3000
|
||||
SERVER_PORT=3000
|
||||
ZITADEL_DOMAIN=https://your-zitadel-domain
|
||||
ZITADEL_CLIENT_ID=your-zitadel-application-client-id
|
||||
ZITADEL_CLIENT_SECRET=your-randomly-generated-client-secret
|
||||
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) for `ZITADEL_DOMAIN` (the issuer)
|
||||
- The **Client ID** you copied when creating the application for `ZITADEL_CLIENT_ID`
|
||||
- The **post-logout redirect URI** for `ZITADEL_POST_LOGOUT_URL`
|
||||
- A strong random string for `APP_SECRET` (generate using: `php -r "echo bin2hex(random_bytes(32));"`)
|
||||
- A randomly generated string for `ZITADEL_CLIENT_SECRET` (generate using: `php -r "echo bin2hex(random_bytes(32));"`)
|
||||
3. Install dependencies using [Composer](https://getcomposer.org) with `composer install` and start the development server with `composer run dev` 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)
|
||||
* [Symfony documentation](https://symfony.com/doc)
|
||||
* [Symfony Security documentation](https://symfony.com/doc/current/security.html)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-symfony)
|
||||
|
||||
@@ -11,21 +11,21 @@ status: stable
|
||||
|
||||
## Overview
|
||||
|
||||
[Vue.js](https://vuejs.org) 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](/docs/guides/integrate/login/oidc/login-users#pkce)** to authenticate users securely and maintain sessions across your Vue.js application.
|
||||
[Vue.js](https://vuejs.org) 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](https://oauth.net/2/pkce/)** to authenticate users securely and maintain sessions across your Vue.js application.
|
||||
|
||||
#### Auth library
|
||||
|
||||
This example uses **[vue-oidc-context](https://www.npmjs.com/package/vue-oidc-context)**, a Vue 3 wrapper around **[oidc-client-ts](https://www.npmjs.com/package/oidc-client-ts)**, which implements the [OpenID Connect](https://openid.net/connect/) (OIDC) flow. The underlying [oidc-client-ts](https://github.com/authts/oidc-client-ts) library manages [PKCE](/docs/guides/integrate/login/oidc/login-users#pkce), performs [token exchange](https://zitadel.com/docs/apis/openidoauth/endpoints), and exposes helpers for [session state](https://zitadel.com/docs/concepts/tokens) management.
|
||||
This example uses **[vue-oidc-context](https://www.npmjs.com/package/vue-oidc-context)**, a Vue 3 wrapper around **[oidc-client-ts](https://www.npmjs.com/package/oidc-client-ts)**, which implements the [OpenID Connect](https://openid.net/connect/) (OIDC) flow. The underlying [oidc-client-ts](https://github.com/authts/oidc-client-ts) library manages [PKCE](https://oauth.net/2/pkce/), performs token exchange, and exposes helpers for [session state](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint) management.
|
||||
|
||||
---
|
||||
|
||||
## What this example demonstrates
|
||||
|
||||
This [Vue.js](https://vuejs.org) application showcases a complete authentication pattern using [Zitadel](https://zitadel.com/docs) with [PKCE](/docs/guides/integrate/login/oidc/login-users#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](https://zitadel.com/docs/apis/openidoauth/endpoints) and redirects users to a protected profile page displaying their [user information and claims](https://zitadel.com/docs/apis/openidoauth/claims).
|
||||
This [Vue.js](https://vuejs.org) 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](https://zitadel.com/docs/apis/openidoauth/endpoints) and redirects users to a protected profile page displaying their [user information and claims](https://zitadel.com/docs/apis/openidoauth/claims).
|
||||
|
||||
The application uses [vue-oidc-context](https://www.npmjs.com/package/vue-oidc-context) to wrap authentication logic around [Vue Router](https://router.vuejs.org) navigation guards, automatically protecting routes and ensuring only authenticated users can access sensitive areas. The [withAuthenticationRequired](https://github.com/authts/vue-oidc-context#protecting-routes) higher-order component secures individual routes by checking [session state](https://zitadel.com/docs/concepts/tokens) before rendering protected views.
|
||||
The application uses [vue-oidc-context](https://www.npmjs.com/package/vue-oidc-context) to wrap authentication logic around [Vue Router](https://router.vuejs.org) navigation guards, automatically protecting routes and ensuring only authenticated users can access sensitive areas. The [withAuthenticationRequired](https://github.com/authts/vue-oidc-context#protecting-routes) higher-order component secures individual routes by checking [session state](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint) before rendering protected views.
|
||||
|
||||
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](https://zitadel.com/docs/apis/openidoauth/endpoints#end-session), which terminates both the local application session and the Zitadel session. The app demonstrates proper handling of [refresh tokens](https://zitadel.com/docs/concepts/tokens) using the `offline_access` [scope](https://zitadel.com/docs/apis/openidoauth/scopes), and includes comprehensive [error handling](https://github.com/authts/vue-oidc-context#error-handling) for authentication failures.
|
||||
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](https://zitadel.com/docs/apis/openidoauth/endpoints#end_session_endpoint), which terminates both the local application session and the Zitadel session. The app demonstrates proper handling of [refresh tokens](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint) using the `offline_access` [scope](https://zitadel.com/docs/apis/openidoauth/scopes), and includes comprehensive [error handling](https://github.com/authts/vue-oidc-context#error-handling) for authentication failures.
|
||||
|
||||
---
|
||||
|
||||
@@ -33,22 +33,22 @@ The example includes secure sign-out functionality implementing **[federated log
|
||||
|
||||
### Prerequisites
|
||||
|
||||
Before running this example, you need to create and configure a PKCE application in the [ZITADEL Console](/docs/guides/manage/console/console-overview). Follow the **[Application Setup guide](/docs/guides/manage/console/applications-overview)** to:
|
||||
Before running this example, you need to create and configure a PKCE application in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview). Follow the PKCE application setup guide to:
|
||||
|
||||
1. Create a new Web application in your [ZITADEL Project](/docs/guides/manage/console/projects-overview)
|
||||
2. Configure it to use the [PKCE authentication method](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects)
|
||||
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
|
||||
5. Copy your **Client ID** for use in the next steps
|
||||
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [ZITADEL Console](/docs/guides/manage/console/console-overview) if you're using HTTP URLs during local development. For production, always use HTTPS URLs and disable Dev Mode.
|
||||
> **Note:** Make sure to enable **Dev Mode** in the [Zitadel Console](https://zitadel.com/docs/guides/manage/console/overview) 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](https://zitadel.com/docs/guides/integrate/login/oidc/), follow these steps:
|
||||
Once you have your [Zitadel application configured](https://zitadel.com/docs/guides/integrate/login/oidc/login-users), follow these steps:
|
||||
|
||||
1. Clone the [repository](https://github.com/zitadel/example-auth-vuejs).
|
||||
2. Create a `.env` file in the project root and configure it with the values from your [ZITADEL Application](/docs/guides/manage/console/applications-overview):
|
||||
2. Create a `.env` file in the project root and configure it with the values from your [Zitadel application](https://zitadel.com/docs/guides/manage/console/applications):
|
||||
```
|
||||
VITE_ZITADEL_DOMAIN=https://your-instance.zitadel.cloud
|
||||
VITE_ZITADEL_CLIENT_ID=your_client_id_from_console
|
||||
@@ -57,8 +57,8 @@ VITE_ZITADEL_POST_LOGOUT_URL=http://localhost:3000
|
||||
VITE_POST_LOGIN_URL=/profile
|
||||
```
|
||||
Replace these values with:
|
||||
- Your actual [Zitadel instance URL](https://zitadel.com/docs) (the **Issuer**)
|
||||
- The **Client ID** you copied when creating the application in the [PKCE setup](/docs/guides/manage/console/applications-overview)
|
||||
- Your actual [Zitadel instance URL](https://zitadel.com/docs/guides/manage/console/default-settings) (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](https://zitadel.com/docs/guides/integrate/login/oidc/logout)
|
||||
3. Install dependencies using [npm](https://www.npmjs.com) and start the development server:
|
||||
@@ -71,15 +71,12 @@ npm run dev
|
||||
|
||||
## Learn more and resources
|
||||
|
||||
* [Zitadel documentation](https://zitadel.com/docs)
|
||||
* [PKCE concept](/docs/guides/integrate/login/oidc/login-users#pkce)
|
||||
* [PKCE application setup](/docs/guides/manage/console/applications-overview)
|
||||
* [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/)
|
||||
* [OIDC integration guide](https://zitadel.com/docs/guides/integrate/login/oidc/login-users)
|
||||
* [Vue.js documentation](https://vuejs.org)
|
||||
* [Vue Router documentation](https://router.vuejs.org)
|
||||
* [vue-oidc-context (wrapper)](https://www.npmjs.com/package/vue-oidc-context)
|
||||
* [oidc-client-ts (primary library)](https://www.npmjs.com/package/oidc-client-ts)
|
||||
* [oidc-client-ts GitHub](https://github.com/authts/oidc-client-ts)
|
||||
* [Example repository](https://github.com/zitadel/example-auth-vuejs)
|
||||
* [All framework examples](/docs/sdk-examples/introduction)
|
||||
|
||||
+66
-11
@@ -65,7 +65,7 @@
|
||||
"id": "spring",
|
||||
"title": "Spring",
|
||||
"imgSrcDark": "/docs/img/tech/spring.svg",
|
||||
"docsLink": "/docs/sdk-examples/java"
|
||||
"docsLink": "/docs/sdk-examples/spring"
|
||||
},
|
||||
{
|
||||
"title": "NestJS",
|
||||
@@ -81,15 +81,22 @@
|
||||
},
|
||||
{
|
||||
"id": "django",
|
||||
"title": "Python Django",
|
||||
"title": "Django",
|
||||
"imgSrcDark": "/docs/img/tech/django.svg",
|
||||
"docsLink": "/docs/sdk-examples/python-django"
|
||||
"docsLink": "/docs/sdk-examples/django"
|
||||
},
|
||||
{
|
||||
"title": "Python Flask",
|
||||
"id": "flask",
|
||||
"title": "Flask",
|
||||
"imgSrcDark": "/docs/img/tech/flask.svg",
|
||||
"imgSrcLight": "/docs/img/tech/flask.svg",
|
||||
"docsLink": "/docs/sdk-examples/python-flask"
|
||||
"docsLink": "/docs/sdk-examples/flask"
|
||||
},
|
||||
{
|
||||
"id": "fastapi",
|
||||
"title": "FastAPI",
|
||||
"imgSrcDark": "/docs/img/tech/fastapi.svg",
|
||||
"docsLink": "/docs/sdk-examples/fastapi"
|
||||
},
|
||||
{
|
||||
"id": "react",
|
||||
@@ -125,12 +132,6 @@
|
||||
"docsLink": "https://github.com/maennchen/zitadel_api",
|
||||
"external": true
|
||||
},
|
||||
{
|
||||
"title": "FastAPI",
|
||||
"imgSrcDark": "/docs/img/tech/fastapi.svg",
|
||||
"docsLink": "https://github.com/cleanenergyexchange/fastapi-zitadel-auth",
|
||||
"external": true
|
||||
},
|
||||
{
|
||||
"title": "NextAuth",
|
||||
"imgSrcDark": "/docs/img/tech/nextjs.svg",
|
||||
@@ -170,5 +171,59 @@
|
||||
"imgSrcDark": "/docs/img/tech/javascript.svg",
|
||||
"docsLink": "https://github.com/zitadel/zitadel-vanilla-js",
|
||||
"external": true
|
||||
},
|
||||
{
|
||||
"id": "astro",
|
||||
"title": "Astro",
|
||||
"imgSrcDark": "/docs/img/tech/astro.svg",
|
||||
"docsLink": "/docs/sdk-examples/astro"
|
||||
},
|
||||
{
|
||||
"id": "expressjs",
|
||||
"title": "Express.js",
|
||||
"imgSrcDark": "/docs/img/tech/expressjs.svg",
|
||||
"docsLink": "/docs/sdk-examples/expressjs"
|
||||
},
|
||||
{
|
||||
"id": "fastify",
|
||||
"title": "Fastify",
|
||||
"imgSrcDark": "/docs/img/tech/fastify.svg",
|
||||
"docsLink": "/docs/sdk-examples/fastify"
|
||||
},
|
||||
{
|
||||
"id": "hono",
|
||||
"title": "Hono",
|
||||
"imgSrcDark": "/docs/img/tech/hono.svg",
|
||||
"docsLink": "/docs/sdk-examples/hono"
|
||||
},
|
||||
{
|
||||
"id": "nuxtjs",
|
||||
"title": "Nuxt.js",
|
||||
"imgSrcDark": "/docs/img/tech/nuxtjs.svg",
|
||||
"docsLink": "/docs/sdk-examples/nuxtjs"
|
||||
},
|
||||
{
|
||||
"id": "qwik",
|
||||
"title": "Qwik",
|
||||
"imgSrcDark": "/docs/img/tech/qwik.svg",
|
||||
"docsLink": "/docs/sdk-examples/qwik"
|
||||
},
|
||||
{
|
||||
"id": "solidstart",
|
||||
"title": "SolidStart",
|
||||
"imgSrcDark": "/docs/img/tech/solidstart.svg",
|
||||
"docsLink": "/docs/sdk-examples/solidstart"
|
||||
},
|
||||
{
|
||||
"id": "sveltekit",
|
||||
"title": "SvelteKit",
|
||||
"imgSrcDark": "/docs/img/tech/sveltekit.svg",
|
||||
"docsLink": "/docs/sdk-examples/sveltekit"
|
||||
},
|
||||
{
|
||||
"id": "laravel",
|
||||
"title": "Laravel",
|
||||
"imgSrcDark": "/docs/img/tech/laravel.svg",
|
||||
"docsLink": "/docs/sdk-examples/laravel"
|
||||
}
|
||||
]
|
||||
|
||||
+5
-7
@@ -311,13 +311,9 @@ module.exports = {
|
||||
label: "Python",
|
||||
items: [
|
||||
"sdk-examples/client-libraries/python",
|
||||
"sdk-examples/python-flask",
|
||||
"sdk-examples/python-django",
|
||||
{
|
||||
type: "link",
|
||||
label: "FastAPI",
|
||||
href: "https://github.com/cleanenergyexchange/fastapi-zitadel-auth",
|
||||
},
|
||||
"sdk-examples/flask",
|
||||
"sdk-examples/django",
|
||||
"sdk-examples/fastapi",
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -330,6 +326,7 @@ module.exports = {
|
||||
label: "Java",
|
||||
items: [
|
||||
"sdk-examples/java",
|
||||
"sdk-examples/spring",
|
||||
"sdk-examples/client-libraries/java",
|
||||
],
|
||||
},
|
||||
@@ -338,6 +335,7 @@ module.exports = {
|
||||
label: "PHP",
|
||||
items: [
|
||||
"sdk-examples/symfony",
|
||||
"sdk-examples/laravel",
|
||||
"sdk-examples/client-libraries/php",
|
||||
],
|
||||
},
|
||||
|
||||
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title>file_type_astro</title><path d="M5.9,18.847a7.507,7.507,0,0,0-.572,2.624,3.265,3.265,0,0,0,.551,1.553,7.427,7.427,0,0,0,2.093,1.681L13.1,28.119A7.332,7.332,0,0,0,15.2,29.287a3.239,3.239,0,0,0,1.5,0,7.381,7.381,0,0,0,2.117-1.16L24,24.711a7.512,7.512,0,0,0,2.117-1.688,3.241,3.241,0,0,0,.55-1.563,7.515,7.515,0,0,0-.587-2.643L21.547,4.551a3.973,3.973,0,0,0-.54-1.3,1.733,1.733,0,0,0-.7-.51,3.972,3.972,0,0,0-1.4-.122H13.005a3.932,3.932,0,0,0-1.4.125,1.713,1.713,0,0,0-.7.512,3.94,3.94,0,0,0-.535,1.3L5.9,18.848Zm13.24-13.2a3.329,3.329,0,0,1,.441,1.093l3.892,12.784a16.168,16.168,0,0,0-4.653-1.573L16.291,9.391a.331.331,0,0,0-.513-.169.323.323,0,0,0-.119.169l-2.5,8.557a16.14,16.14,0,0,0-4.674,1.579L12.393,6.743a3.281,3.281,0,0,1,.442-1.094,1.458,1.458,0,0,1,.582-.43,3.31,3.31,0,0,1,1.175-.1h2.793a3.314,3.314,0,0,1,1.176.1,1.454,1.454,0,0,1,.583.432ZM16.127,21.06a5.551,5.551,0,0,0,3.4-.923,2.8,2.8,0,0,1-.207,2.182A3.938,3.938,0,0,1,17.773,23.8c-.674.428-1.254.8-1.254,1.787a2.079,2.079,0,0,0,.209.914,2.49,2.49,0,0,1-1.535-2.3v-.061c0-.683,0-1.524-.962-1.524a1.028,1.028,0,0,0-.391.077,1.021,1.021,0,0,0-.552.551,1.03,1.03,0,0,0-.079.391,3.769,3.769,0,0,1-.988-2.644,4.206,4.206,0,0,1,.175-1.248c.4.757,1.92,1.32,3.731,1.32Z" style="fill:#ff5d01;fill-rule:evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><path d="M24 18.588a1.529 1.529 0 0 1-1.895-.72l-3.45-4.771-.5-.667-4.003 5.444a1.466 1.466 0 0 1-1.802.708l5.158-6.92-4.798-6.251a1.595 1.595 0 0 1 1.9.666l3.576 4.83 3.596-4.81a1.435 1.435 0 0 1 1.788-.668L21.708 7.9l-2.522 3.283a.666.666 0 0 0 0 .994l4.804 6.412zM.002 11.576l.42-2.075c1.154-4.103 5.858-5.81 9.094-3.27 1.895 1.489 2.368 3.597 2.275 5.973H1.116C.943 16.447 4.005 19.009 7.92 17.7a4.078 4.078 0 0 0 2.582-2.876c.207-.666.548-.78 1.174-.588a5.417 5.417 0 0 1-2.589 3.957 6.272 6.272 0 0 1-7.306-.933 6.575 6.575 0 0 1-1.64-3.858c0-.235-.08-.455-.134-.666A88.33 88.33 0 0 1 0 11.577zm1.127-.286h9.654c-.06-3.076-2.001-5.258-4.59-5.278-2.882-.04-4.944 2.094-5.071 5.264z"/></svg>
|
||||
|
After Width: | Height: | Size: 929 B |
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 -45.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid">
|
||||
<g>
|
||||
<path d="M247.942394,23.313675 L256,2.4439738 L255.649669,1.15108664 L175.932749,22.1542472 C184.432439,9.85930729 181.513017,0 181.513017,0 C181.513017,0 156.055651,16.2570135 136.804145,15.8316119 C117.552638,15.4062103 111.346779,10.2680265 81.8272458,19.6852497 C52.3077124,29.0941318 43.9665048,57.9797335 35.4084259,64.1855919 C26.850347,70.3914503 0,90.6021961 0,90.6021961 L0.0583884526,90.960868 L24.2645727,83.2535923 C24.2645727,83.2535923 17.6249715,89.5094979 3.51998957,108.51911 C3.51998957,108.51911 3.27809456,108.293897 2.86103418,107.910202 L2.8860578,108.043661 C2.8860578,108.043661 14.2217588,125.368349 25.3489297,122.165325 C26.4666515,121.840018 27.7261738,121.306181 29.102473,120.60552 C33.5817015,123.099541 39.4288879,125.551856 45.8849826,126.227493 C45.8849826,126.227493 41.5141898,121.147698 37.8690821,115.367241 C38.8533446,114.733309 39.8626307,114.074354 40.8885993,113.407057 L40.4131504,113.740706 L49.6301847,117.127236 L48.6125574,108.460721 C48.6459223,108.444039 48.6709459,108.419015 48.7043107,108.402333 L57.7628621,111.730475 L56.6367991,103.848034 C57.7878857,103.247467 58.9306311,102.680265 60.0733766,102.154768 L69.5156235,66.4377179 L108.560816,39.8042423 L105.457887,47.6116125 C97.5420807,67.0799909 82.6780489,71.6759962 82.6780489,71.6759962 L76.4721905,74.0282167 C71.8595028,79.4833665 69.9160014,80.8263009 68.331172,99.1352514 C72.0513506,98.2010361 75.604705,97.9758235 78.8244111,98.8433091 C95.5068261,103.33922 101.287283,123.44153 96.7913721,129.005116 C95.665309,130.398097 92.9877814,132.775341 89.6095924,135.569646 L82.8365319,135.569646 L82.7447786,141.05816 C82.5112248,141.241667 82.277671,141.416832 82.0524584,141.600339 L75.162621,141.600339 L75.0792089,146.955394 C74.4703007,147.422502 73.8613926,147.872927 73.2775081,148.315011 C66.804731,148.44847 58.605324,142.801473 58.605324,142.801473 C58.605324,147.939657 62.8843635,155.847121 62.8843635,155.847121 C62.8843635,155.847121 63.1679645,155.713662 63.6434134,155.480108 C63.226353,155.788733 62.9927992,155.955557 62.9927992,155.955557 C62.9927992,155.955557 80.3174872,167.508129 91.2277866,163.22909 C100.928611,159.425499 126.043987,139.623473 147.722785,130.247955 L213.326382,112.964973 L221.976215,90.5521488 L171.979017,103.722916 L171.979017,83.5955818 L230.642729,68.1393242 L239.292561,45.7264996 L171.995699,63.4599068 L171.995699,43.3242319 L247.942394,23.313675 Z" fill="#000000" fill-rule="nonzero">
|
||||
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g><path style="opacity:0.993" fill="#ff5b11" d="M 257.5,0.5 C 258.822,0.330034 259.989,0.663368 261,1.5C 298.193,46.8936 333.193,93.8936 366,142.5C 390.289,179.069 410.955,217.735 428,258.5C 455.221,331.104 441.054,394.271 385.5,448C 336.892,489.082 280.892,505.082 217.5,496C 141.727,480.551 90.2265,436.718 63,364.5C 55.9081,340.989 53.5748,316.989 56,292.5C 60.0384,250.347 70.0384,209.68 86,170.5C 92.6509,154.514 101.318,139.848 112,126.5C 120.715,136.88 129.048,147.547 137,158.5C 140.682,162.349 144.515,166.016 148.5,169.5C 178.917,109.136 215.251,52.8028 257.5,0.5 Z"/></g>
|
||||
<g><path style="opacity:1" fill="#ff9758" d="M 250.5,81.5 C 287.193,124.06 320.36,169.393 350,217.5C 359.293,233.418 366.959,250.085 373,267.5C 385.584,317.008 372.084,357.842 332.5,390C 294.216,416.939 252.216,424.939 206.5,414C 157.201,398.702 128.701,365.535 121,314.5C 119.131,298.409 120.798,282.742 126,267.5C 133.418,248.663 142.418,230.663 153,213.5C 163,198.833 173,184.167 183,169.5C 205.716,140.29 228.216,110.957 250.5,81.5 Z"/></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Vendored
+12
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="-4 0 264 264" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid">
|
||||
<g>
|
||||
<path
|
||||
d="M255.855641,59.619717 C255.950565,59.9710596 256,60.3333149 256,60.6972536 L256,117.265345 C256,118.743206 255.209409,120.108149 253.927418,120.843385 L206.448786,148.178786 L206.448786,202.359798 C206.448786,203.834322 205.665123,205.195421 204.386515,205.937838 L105.27893,262.990563 C105.05208,263.119455 104.804608,263.201946 104.557135,263.289593 C104.464333,263.320527 104.376687,263.377239 104.278729,263.403017 C103.585929,263.58546 102.857701,263.58546 102.164901,263.403017 C102.051476,263.372083 101.948363,263.310215 101.840093,263.26897 C101.613244,263.186479 101.376082,263.1143 101.159544,262.990563 L2.07258227,205.937838 C0.7913718,205.201819 0,203.837372 0,202.359798 L0,32.6555248 C0,32.2843161 0.0515567729,31.9234187 0.144358964,31.5728326 C0.175293028,31.454252 0.24747251,31.3459828 0.288717928,31.2274022 C0.366053087,31.0108638 0.438232569,30.7891697 0.55165747,30.5880982 C0.628992629,30.4540506 0.742417529,30.3457814 0.83521972,30.2220451 C0.953800298,30.0570635 1.06206952,29.8869261 1.20127281,29.7425672 C1.31985339,29.6239866 1.4745237,29.5363401 1.60857131,29.4332265 C1.75808595,29.3094903 1.89213356,29.1754427 2.06227091,29.0774848 L2.06742659,29.0774848 L51.6134853,0.551122364 C52.8901903,-0.183535768 54.4613221,-0.183535768 55.7380271,0.551122364 L105.284086,29.0774848 L105.294397,29.0774848 C105.459379,29.1805983 105.598582,29.3094903 105.748097,29.4280708 C105.882144,29.5311844 106.031659,29.6239866 106.15024,29.7374115 C106.294599,29.8869261 106.397712,30.0570635 106.521448,30.2220451 C106.609095,30.3457814 106.727676,30.4540506 106.799855,30.5880982 C106.918436,30.7943253 106.985459,31.0108638 107.06795,31.2274022 C107.109196,31.3459828 107.181375,31.454252 107.212309,31.5779883 C107.307234,31.9293308 107.355765,32.2915861 107.356668,32.6555248 L107.356668,138.651094 L148.643332,114.878266 L148.643332,60.6920979 C148.643332,60.3312005 148.694889,59.9651474 148.787691,59.619717 C148.823781,59.4959808 148.890804,59.3877116 148.93205,59.269131 C149.014541,59.0525925 149.08672,58.8308984 149.200145,58.629827 C149.27748,58.4957794 149.390905,58.3875102 149.478552,58.2637739 C149.602288,58.0987922 149.705401,57.9286549 149.84976,57.7842959 C149.968341,57.6657153 150.117856,57.5780688 150.251903,57.4749553 C150.406573,57.351219 150.540621,57.2171714 150.705603,57.1192136 L150.710758,57.1192136 L200.261973,28.5928511 C201.538395,27.8571345 203.110093,27.8571345 204.386515,28.5928511 L253.932573,57.1192136 C254.107866,57.2223271 254.241914,57.351219 254.396584,57.4697996 C254.525476,57.5729132 254.674991,57.6657153 254.793572,57.7791402 C254.93793,57.9286549 255.041044,58.0987922 255.16478,58.2637739 C255.257582,58.3875102 255.371007,58.4957794 255.443187,58.629827 C255.561767,58.8308984 255.628791,59.0525925 255.711282,59.269131 C255.757683,59.3877116 255.824707,59.4959808 255.855641,59.619717 Z M247.740605,114.878266 L247.740605,67.8378666 L230.402062,77.8192579 L206.448786,91.6106946 L206.448786,138.651094 L247.745761,114.878266 L247.740605,114.878266 Z M198.194546,199.97272 L198.194546,152.901386 L174.633101,166.357704 L107.351512,204.757188 L107.351512,252.27191 L198.194546,199.97272 Z M8.25939501,39.7961379 L8.25939501,199.97272 L99.0921175,252.266755 L99.0921175,204.762344 L51.6392637,177.906421 L51.6237967,177.89611 L51.603174,177.885798 C51.443348,177.792996 51.3093004,177.658949 51.1597857,177.545524 C51.0308938,177.44241 50.8813791,177.359919 50.7679542,177.246494 L50.7576429,177.231027 C50.6235953,177.102135 50.5307931,176.942309 50.4173682,176.79795 C50.3142546,176.658747 50.1905184,176.540167 50.1080276,176.395808 L50.1028719,176.380341 C50.0100697,176.22567 49.9533572,176.040066 49.8863334,175.864773 C49.8193096,175.710103 49.7316631,175.565744 49.6904177,175.400762 L49.6904177,175.395606 C49.6388609,175.19969 49.6285496,174.993463 49.6079269,174.792392 C49.5873041,174.637722 49.5460587,174.483051 49.5460587,174.328381 L49.5460587,174.31807 L49.5460587,63.5689658 L25.5979377,49.7723734 L8.25939501,39.8012935 L8.25939501,39.7961379 Z M53.6809119,8.89300821 L12.3994039,32.6555248 L53.6706006,56.4180414 L94.9469529,32.6503692 L53.6706006,8.89300821 L53.6809119,8.89300821 Z M75.1491521,157.19091 L99.0972731,143.404629 L99.0972731,39.7961379 L81.7587304,49.7775291 L57.8054537,63.5689658 L57.8054537,167.177457 L75.1491521,157.19091 Z M202.324244,36.934737 L161.047891,60.6972536 L202.324244,84.4597702 L243.59544,60.6920979 L202.324244,36.934737 Z M198.194546,91.6106946 L174.24127,77.8192579 L156.902727,67.8378666 L156.902727,114.878266 L180.850848,128.664547 L198.194546,138.651094 L198.194546,91.6106946 Z M103.216659,197.616575 L163.759778,163.052915 L194.023603,145.781396 L152.778185,122.034346 L105.289242,149.374903 L62.0073307,174.292291 L103.216659,197.616575 Z"
|
||||
fill="#FF2D20">
|
||||
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.0 KiB |
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title>file_type_nuxt</title><path d="M10.648,25.734a1.465,1.465,0,0,1-.157-.942H3.847L13.716,7.417l4.159,7.41,1.308-.976L15.076,6.467A1.752,1.752,0,0,0,13.7,5.56a1.531,1.531,0,0,0-1.343.924l-10,17.593a1.729,1.729,0,0,0-.087,1.656,1.526,1.526,0,0,0,1.456.706H12.1a1.523,1.523,0,0,1-1.456-.7Z" style="fill:#00c58e"/><path d="M29.636,24.112,21.589,9.823a1.692,1.692,0,0,0-1.351-.907,1.489,1.489,0,0,0-1.308.907l-1.064,1.7v3.3l2.371-4.071,7.951,14.071H25.163a1.377,1.377,0,0,1-.122.837l-.026.052a1.729,1.729,0,0,1-1.456.732h4.734a1.72,1.72,0,0,0,1.456-.732,1.548,1.548,0,0,0-.122-1.6Z" style="fill:#108775"/><path d="M25.233,25.7l.026-.052.07-.139a1.278,1.278,0,0,0,.061-.7,2.11,2.11,0,0,0-.27-.724l-6.286-10.9-.95-1.656h-.017l-.959,1.648-6.277,10.9a2.18,2.18,0,0,0-.244.715,1.438,1.438,0,0,0,.148.942,1.563,1.563,0,0,0,1.482.7H23.725a1.79,1.79,0,0,0,1.508-.741ZM17.866,14.836,23.62,24.8H12.112Z" style="fill:#2f495e"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(9.411765%,71.372549%,96.470588%);fill-opacity:1;" d="M 95.671875 112.554688 L 78.242188 95.214844 L 77.996094 95.257812 L 77.996094 95.074219 L 40.929688 58.417969 L 50.082031 49.597656 L 44.699219 18.757812 L 19.230469 50.355469 C 14.90625 54.722656 14.074219 61.863281 17.207031 67.105469 L 33.125 93.527344 C 35.558594 97.578125 39.382812 100.183594 44.722656 99.992188 C 56.027344 99.589844 60.996094 99.589844 60.996094 99.589844 L 95.664062 112.546875 L 95.671875 112.558594 Z M 95.671875 112.554688 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(67.45098%,49.411765%,95.686275%);fill-opacity:1;" d="M 104.285156 63.960938 C 106.792969 58.785156 107.691406 54.257812 105.214844 49.707031 L 101.691406 43.222656 L 99.863281 39.894531 L 99.152344 38.597656 L 99.085938 38.671875 L 89.5 22.042969 C 87.082031 17.835938 82.582031 15.265625 77.734375 15.320312 L 69.328125 15.558594 L 44.234375 15.625 C 39.496094 15.65625 35.125 18.175781 32.722656 22.257812 L 17.476562 52.539062 L 44.761719 18.59375 L 80.554688 57.953125 L 74.148438 64.445312 L 77.972656 95.238281 L 78.027344 95.167969 L 78.027344 95.257812 L 77.972656 95.257812 L 78.046875 95.332031 L 81.03125 98.238281 L 95.46875 112.339844 C 96.074219 112.925781 97.058594 112.222656 96.65625 111.5 L 87.730469 93.9375 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 80.640625 57.855469 L 44.753906 18.695312 L 49.851562 49.359375 L 40.71875 58.222656 L 77.90625 95.179688 L 74.554688 64.5 L 80.640625 57.867188 Z M 80.640625 57.855469 "/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Vendored
+1
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><defs><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient></defs><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Vendored
+13
@@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="-26 0 308 308" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid">
|
||||
<g>
|
||||
<path d="M239.681566,40.706757 C211.113272,-0.181889366 154.69089,-12.301439 113.894816,13.6910393 L42.2469062,59.3555354 C22.6760042,71.6680028 9.1958152,91.6538543 5.11196889,114.412133 C1.69420521,133.371174 4.6982178,152.928576 13.6483951,169.987905 C7.51549676,179.291145 3.33259428,189.7413 1.3524912,200.706787 C-2.77083771,223.902098 2.62286977,247.780539 16.3159596,266.951444 C44.8902975,307.843936 101.312954,319.958266 142.10271,293.967161 L213.75062,248.302665 C233.322905,235.991626 246.803553,216.005094 250.885557,193.246067 C254.302867,174.287249 251.30121,154.730228 242.355449,137.668922 C248.486748,128.365895 252.667894,117.916162 254.646134,106.951413 C258.772188,83.7560394 253.378243,59.8765465 239.682665,40.706757" fill="#FF3E00">
|
||||
|
||||
</path>
|
||||
<path d="M106.888658,270.841265 C83.7871855,276.848065 59.3915045,267.805346 45.7864111,248.192566 C37.5477583,236.66102 34.3023491,222.296573 36.7830958,208.343155 C37.1989333,206.075414 37.7711933,203.839165 38.4957755,201.650433 L39.845476,197.534835 L43.5173097,200.231763 C51.9971301,206.462491 61.4784803,211.199728 71.5527203,214.239302 L74.2164003,215.047419 L73.9710252,217.705878 C73.6455499,221.487851 74.6696022,225.262925 76.8616703,228.361972 C80.9560313,234.269749 88.3011363,236.995968 95.2584831,235.190159 C96.8160691,234.773852 98.3006859,234.121384 99.6606718,233.25546 L171.331634,187.582718 C174.877468,185.349963 177.321139,181.729229 178.065299,177.605596 C178.808171,173.400048 177.830501,169.072361 175.351884,165.594581 C171.255076,159.685578 163.908134,156.9582 156.947927,158.762547 C155.392392,159.178888 153.90975,159.83088 152.551509,160.695872 L125.202489,178.130144 C120.705281,180.989558 115.797437,183.144784 110.64897,184.521162 C87.547692,190.527609 63.1523949,181.484801 49.5475471,161.872188 C41.3085624,150.340895 38.0631179,135.976391 40.5442317,122.023052 C43.0002744,108.333716 51.1099574,96.3125326 62.8835328,88.9089537 L134.548175,43.2323647 C139.047294,40.3682559 143.958644,38.21032 149.111311,36.8336525 C172.21244,30.8273594 196.607527,39.8700206 210.212459,59.4823515 C218.451112,71.013898 221.696522,85.3783452 219.215775,99.3317627 C218.798144,101.59911 218.225915,103.835236 217.503095,106.024485 L216.153395,110.140083 L212.483484,107.447276 C204.004261,101.212984 194.522,96.4735732 184.44615,93.4336926 L181.78247,92.6253012 L182.027845,89.9668419 C182.350522,86.1852063 181.326723,82.4111645 179.1372,79.3110228 C175.042839,73.4032457 167.697734,70.677026 160.740387,72.4828355 C159.182801,72.8991426 157.698185,73.5516104 156.338199,74.4175344 L84.6672364,120.0922 C81.1218886,122.323199 78.6795938,125.943704 77.9387928,130.066574 C77.1913232,134.271925 78.1673502,138.601163 80.6469865,142.078963 C84.7438467,147.987899 92.0907405,150.71526 99.0509435,148.910997 C100.608143,148.493836 102.092543,147.841423 103.452857,146.976298 L130.798305,129.548621 C135.293566,126.685437 140.201191,124.528302 145.350175,123.152382 C168.451453,117.145935 192.846751,126.188743 206.451598,145.801356 C214.690583,157.332649 217.936027,171.697153 215.454914,185.650492 C212.997261,199.340539 204.888162,211.362752 193.115613,218.769811 L121.450695,264.442553 C116.951576,267.306662 112.040226,269.464598 106.887559,270.841265" fill="#FFFFFF">
|
||||
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
Reference in New Issue
Block a user