andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-10-18 21:52:54 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
dbb0da71afdbda4e2ae1fbf9b838cd71e65f4df3
zitadel/apps/docs/content/guides/start/quickstart.mdx
T
MaximilianGitHubCopilot Autofix powered by AI
 385c5ae54b docs: Update restrict console guide (#12262) 
<!--
Please inform yourself about the contribution guidelines on submitting a
PR here:
https://github.com/zitadel/zitadel/blob/main/CONTRIBUTING.md#submit-a-pull-request-pr.
Take note of how PR/commit titles should be written and replace the
template texts in the sections below. Don't remove any of the sections.
It is important that the commit history clearly shows what is changed
and why.
Important: By submitting a contribution you agree to the terms from our
Licensing Policy as described here:
https://github.com/zitadel/zitadel/blob/main/LICENSING.md#community-contributions.
-->

# Which Problems Are Solved

The projects setting texts and sceenshot where outdated. 

# How the Problems Are Solved

Update the text and screenshot.

# Additional Changes

* Rewording
* Lockout warning component

---------

Co-authored-by: Copilot Autofix powered by AI <[email protected]>
2026-06-10 10:38:37 +00:00

1084 lines
39 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
title: The ZITADEL Quick Start Guide
description: "Get started with ZITADEL by setting up an account and integrating OIDC authentication into your applications"
sidebar_label: Quick Start Guide
keywords: [ZITADEL, OIDC, PKCE, Authentication, Identity Management]
---
import { Tab } from 'fumadocs-ui/components/tabs';
import { FrameworkSelector } from '@/components/framework_selector';
import AppConfig from './_app_config.mdx';
import AppValues from './_app_values.mdx';
In this guide, you’ll set up a Zitadel account and configure it to work with our pre-built example applications.
You can simply clone the repository, follow the console setup, and have a working authentication flow in minutes.
## Get Started with ZITADEL Cloud
Set up your ZITADEL account and organization to begin managing identities for your applications.
### 1. Create your Account and Organization
You first need access to the ZITADEL Cloud Customer Portal.
This is the administrative hub for managing your billing, teams, and instances.
1. **Sign Up**: Go to [zitadel.com](https://zitadel.com) and select Sign Up.
2. **Onboarding**: Follow the prompts to verify your email and set up your Portal Team.
- Tip: We recommend using Passkeys for a secure, passwordless login experience.
3. **Access**: Once authenticated, you will be redirected to the Customer Portal dashboard.
![Home Page](../../../public/img/guides/quickstart/cloud_sign_up.png)
![Registration Page](../../../public/img/guides/quickstart/cloud_register.png)
### 2. Quick Onboarding
Complete the brief onboarding questions.
This data helps us prioritize the development of new features, SDKs, and integrations that matter most to our community.
![Onboarding Questions](../../../public/img/guides/quickstart/onboarding_questions.png)
### 3. Create your ZITADEL instance
An [Instance](/concepts/structure/instance) is a fully isolated identity environment with its own users, policies, and data.
Most developers use separate instances to isolate Development, Test, and Production workflows.
Follow these steps to deploy your first instance:
1. **Start**: Click Create Instance on your dashboard.
2. **Identity**: Provide an Instance Name (e.g., dev-environment). This will be used to generate your default domain (e.g., dev-environment-xxxx.zitadel.cloud).
3. **Locality**: Select your Region.
- Note: Choosing a region close to your users minimizes latency and helps with data residency compliance.
4. **Admin Setup**: Create your Instance Administrator. This user has "root" permissions to manage all organizations, policies, and settings within this specific instance.
5. **Deploy**: Review your settings and click Create Instance.
![Create Instance](../../../public/img/guides/quickstart/cloud_create_instance.png)
### 4. Create your Project and Application
In ZITADEL, [**Applications**](/guides/manage/console/applications-overview) are grouped into [**Projects**](/guides/manage/console/projects-overview).
This allows multiple applications (like a React frontend and a Go backend) to share the same roles and role assignments.
#### Launch the Management Console
Click **Create your app**. This opens the Management Console for your instance in a new tab.
Log in using the Admin credentials you just created.
![Create App](../../../public/img/guides/quickstart/cloud_create_app.png)
#### Step 1: Define your Project
- **Name**: Enter a name (e.g., Project1).
- **Framework**: Select your preferred framework
- **Continue**: Click the Continue button.
![Project Name and Framework/Language](../../../public/img/guides/quickstart/create_project_react.png)
#### Step 2: Review Default Settings
ZITADEL automatically configures the best security settings for your selected framework.
<FrameworkSelector>
<Tab value="Angular">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback"
postLogoutRedirectUrl="http://localhost:3000/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="Astro">
<AppConfig
redirectUrl="http://localhost:3000/api/auth/callback/zitadel"
postLogoutRedirectUrl="http://localhost:3000/api/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="ASP.NET Core">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback"
postLogoutRedirectUrl="http://localhost:3000/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="Django">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback"
postLogoutRedirectUrl="http://localhost:3000/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="Express.js">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback/zitadel"
postLogoutRedirectUrl="http://localhost:3000/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="FastAPI">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback"
postLogoutRedirectUrl="http://localhost:3000/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="Fastify">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback/zitadel"
postLogoutRedirectUrl="http://localhost:3000/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="Flask">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback"
postLogoutRedirectUrl="http://localhost:3000/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="Flutter">
<AppConfig
redirectUrl="http://localhost:4444/auth.html, com.example.zitadelflutter"
postLogoutRedirectUrl="http://localhost:4444, com.example.zitadelflutter">
</AppConfig>
</Tab>
<Tab value="Go">
<AppConfig
redirectUrl="http://localhost:8089/auth/callback"
postLogoutRedirectUrl="http://localhost:8089">
</AppConfig>
</Tab>
<Tab value="Hono">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback/zitadel"
postLogoutRedirectUrl="http://localhost:3000/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="Laravel">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback"
postLogoutRedirectUrl="http://localhost:3000/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="NestJS">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback/zitadel"
postLogoutRedirectUrl="http://localhost:3000/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="Next.js">
<AppConfig
redirectUrl="http://localhost:3000/api/auth/callback/zitadel"
postLogoutRedirectUrl="http://localhost:3000/api/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="Nuxt">
<AppConfig
redirectUrl="http://localhost:3000/api/auth/callback/zitadel"
postLogoutRedirectUrl="http://localhost:3000">
</AppConfig>
</Tab>
<Tab value="Qwik">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback/zitadel"
postLogoutRedirectUrl="http://localhost:3000/api/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="React">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback"
postLogoutRedirectUrl="http://localhost:3000">
</AppConfig>
</Tab>
<Tab value="SolidStart">
<AppConfig
redirectUrl="http://localhost:3000/api/auth/callback/zitadel"
postLogoutRedirectUrl="http://localhost:3000/api/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="Spring">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback"
postLogoutRedirectUrl="http://localhost:3000/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="Symfony">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback"
postLogoutRedirectUrl="http://localhost:3000/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="Svelte">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback/zitadel"
postLogoutRedirectUrl="http://localhost:3000/auth/logout/callback">
</AppConfig>
</Tab>
<Tab value="Vue.js">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback"
postLogoutRedirectUrl="http://localhost:3000">
</AppConfig>
</Tab>
</FrameworkSelector>
![Project Configuration Overview](../../../public/img/guides/quickstart/project_config_overview_react.png)
### 5. Collect your Integration Keys
<FrameworkSelector>
<Tab value="Angular">
<AppValues valueCount="two" clientSecret={false} ></AppValues>
</Tab>
<Tab value="Astro">
<AppValues valueCount="three" clientSecret={true} ></AppValues>
</Tab>
<Tab value="ASP.NET Core">
<AppValues valueCount="three" clientSecret={true}></AppValues>
</Tab>
<Tab value="Django">
<AppValues valueCount="two" clientSecret={false}></AppValues>
</Tab>
<Tab value="Express.js">
<AppValues valueCount="three" clientSecret={true}></AppValues>
</Tab>
<Tab value="FastAPI">
<AppValues valueCount="three" clientSecret={true}></AppValues>
</Tab>
<Tab value="Fastify">
<AppValues valueCount="three" clientSecret={true}></AppValues>
</Tab>
<Tab value="Flask">
<AppValues valueCount="three" clientSecret={true}></AppValues>
</Tab>
<Tab value="Flutter">
<AppValues valueCount="two" clientSecret={false}></AppValues>
</Tab>
<Tab value="Go">
<AppValues valueCount="two" clientSecret={false}></AppValues>
</Tab>
<Tab value="Hono">
<AppValues valueCount="three" clientSecret={true}></AppValues>
</Tab>
<Tab value="Laravel">
<AppValues valueCount="three" clientSecret={true}></AppValues>
</Tab>
<Tab value="NestJS">
<AppValues valueCount="three" clientSecret={true}></AppValues>
</Tab>
<Tab value="Next.js">
<AppValues valueCount="three" clientSecret={true}></AppValues>
</Tab>
<Tab value="Nuxt">
<AppValues valueCount="three" clientSecret={true}></AppValues>
</Tab>
<Tab value="Qwik">
<AppValues valueCount="three" clientSecret={true}></AppValues>
</Tab>
<Tab value="React">
<AppValues valueCount="two" clientSecret={false}></AppValues>
</Tab>
<Tab value="SolidStart">
<AppValues valueCount="three" clientSecret={true}></AppValues>
</Tab>
<Tab value="Spring">
<AppValues valueCount="three" clientSecret={true}></AppValues>
</Tab>
<Tab value="Symfony">
<AppValues valueCount="three" clientSecret={true}></AppValues>
</Tab>
<Tab value="Svelte">
<AppValues valueCount="three" clientSecret={true}></AppValues>
</Tab>
<Tab value="Vue.js">
<AppValues valueCount="two" clientSecret={false}></AppValues>
</Tab>
</FrameworkSelector>
## Integrate ZITADEL into your App
### How the Authentication Flow Works
ZITADEL handles the complexity of the OIDC handshake so your app stays secure without manual token management.
1. **Login**: App redirects the user to ZITADEL with a PKCE challenge.
2. **Auth**: User authenticates on the ZITADEL hosted login page.
3. **Exchange**: ZITADEL returns an Auth Code, which the app exchanges for an Access Token.
4. **Tokens**: The app shows the Access and ID Token
5. **Logout**: The app clears local tokens and terminates the ZITADEL session.
### 1. Prerequisites
<FrameworkSelector>
<Tab value="Angular">
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
</Tab>
<Tab value="Astro">
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
</Tab>
<Tab value="ASP.NET Core">
- [.NET SDK 8 or later](https://dotnet.microsoft.com/download)
</Tab>
<Tab value="Django">
- [Python](https://www.python.org/)
- [Poetry](https://python-poetry.org/)
</Tab>
<Tab value="Express.js">
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
</Tab>
<Tab value="FastAPI">
- [Python](https://www.python.org/)
- [Poetry](https://python-poetry.org/)
</Tab>
<Tab value="Fastify">
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
</Tab>
<Tab value="Flask">
- [Python](https://www.python.org/)
- [Poetry](https://python-poetry.org/)
</Tab>
<Tab value="Flutter">
- [Flutter](https://docs.flutter.dev/install)
</Tab>
<Tab value="Go">
- [Go](https://go.dev/)
</Tab>
<Tab value="Hono">
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
</Tab>
<Tab value="Laravel">
- [PHP](https://www.php.net/)
- [Composer](https://getcomposer.org/)
</Tab>
<Tab value="NestJS">
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
</Tab>
<Tab value="Next.js">
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
</Tab>
<Tab value="Nuxt">
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
</Tab>
<Tab value="Qwik">
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
</Tab>
<Tab value="React">
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
</Tab>
<Tab value="SolidStart">
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
</Tab>
<Tab value="Spring">
- [Java Development Kit (JDK)](https://www.java.com/en/)
- [Maven](https://maven.apache.org/)
</Tab>
<Tab value="Symfony">
- [PHP](https://www.php.net/)
- [Composer](https://getcomposer.org/)
</Tab>
<Tab value="Svelte">
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
</Tab>
<Tab value="Vue.js">
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
</Tab>
</FrameworkSelector>
### 2. Get the Example Project
<FrameworkSelector>
<Tab value="Angular">
```bash
git clone https://github.com/zitadel/example-auth-angular.git
cd example-auth-angular
```
</Tab>
<Tab value="Astro">
```bash
git clone https://github.com/zitadel/example-auth-astro.git
cd example-auth-astro
```
</Tab>
<Tab value="ASP.NET Core">
```bash
git clone https://github.com/zitadel/example-auth-dotnet.git
cd example-auth-dotnet
```
</Tab>
<Tab value="Django">
```bash
git clone https://github.com/zitadel/example-auth-django.git
cd example-auth-django
```
</Tab>
<Tab value="Express.js">
```bash
git clone https://github.com/zitadel/example-auth-expressjs.git
cd example-auth-expressjs
```
</Tab>
<Tab value="FastAPI">
```bash
git clone https://github.com/zitadel/example-auth-fastapi.git
cd example-auth-fastapi
```
</Tab>
<Tab value="Fastify">
```bash
git clone https://github.com/zitadel/example-auth-fastify.git
cd example-auth-fastify
```
</Tab>
<Tab value="Flask">
```bash
git clone https://github.com/zitadel/example-auth-flask.git
cd example-auth-flask
```
</Tab>
<Tab value="Flutter">
```bash
git clone https://github.com/zitadel/zitadel_flutter.git
cd zitadel_flutter
```
</Tab>
<Tab value="Go">
```bash
git clone https://github.com/zitadel/zitadel-go.git
cd zitadel-go
```
</Tab>
<Tab value="Hono">
```bash
git clone https://github.com/zitadel/zitadel-auth-hono.git
cd zitadel-auth-hono
```
</Tab>
<Tab value="Laravel">
```bash
git clone https://github.com/zitadel/example-auth-laravel.git
cd example-auth-laravel
```
</Tab>
<Tab value="NestJS">
```bash
git clone https://github.com/zitadel/example-auth-nestjs.git
cd example-auth-nestjs
```
</Tab>
<Tab value="Next.js">
```bash
git clone https://github.com/zitadel/example-auth-nextjs.git
cd example-auth-nextjs
```
</Tab>
<Tab value="Nuxt">
```bash
git clone https://github.com/zitadel/example-auth-nuxtjs.git
cd example-auth-nuxtjs
```
</Tab>
<Tab value="Qwik">
```bash
git clone https://github.com/zitadel/example-auth-qwik.git
cd example-auth-qwik
```
</Tab>
<Tab value="React">
```bash
git clone https://github.com/zitadel/example-auth-react.git
cd example-auth-react
```
</Tab>
<Tab value="SolidStart">
```bash
git clone https://github.com/zitadel/example-auth-solidstart.git
cd example-auth-solidstart
```
</Tab>
<Tab value="Spring">
```bash
git clone https://github.com/zitadel/example-auth-spring.git
cd example-auth-spring
```
</Tab>
<Tab value="Symfony">
```bash
git clone https://github.com/zitadel/example-auth-symfony.git
cd example-auth-symfony
```
</Tab>
<Tab value="Svelte">
```bash
git clone https://github.com/zitadel/example-auth-sveltekit.git
cd example-auth-sveltekit
```
</Tab>
<Tab value="Vue.js">
```bash
git clone https://github.com/zitadel/example-auth-vue.git
cd example-auth-vue
```
</Tab>
</FrameworkSelector>
### 3. Configure your Credentials
<FrameworkSelector>
<Tab value="Angular">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
PORT=3000
NG_APP_ZITADEL_DOMAIN="https://your-zitadel-domain"
NG_APP_ZITADEL_CLIENT_ID="your-client-id"
NG_APP_ZITADEL_CALLBACK_URL="http://localhost:3000/auth/callback"
NG_APP_ZITADEL_POST_LOGOUT_URL="http://localhost:3000/auth/logout/callback"
NG_APP_ZITADEL_POST_LOGIN_URL="/profile"
```
</Tab>
<Tab value="Astro">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID, ZITADEL_CLIENT_SECRET and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
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-zitadel-application-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"
```
</Tab>
<Tab value="ASP.NET Core">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID, ZITADEL_CLIENT_SECRET and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
PORT=3000
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_POST_LOGOUT_URL="http://localhost:3000/auth/logout/callback"
```
</Tab>
<Tab value="Django">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
PY_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/auth/callback"
ZITADEL_POST_LOGIN_URL="/profile"
ZITADEL_POST_LOGOUT_URL="http://localhost:3000/auth/logout/callback"
```
</Tab>
<Tab value="Express.js">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID, ZITADEL_CLIENT_SECRET and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
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-zitadel-application-client-secret"
ZITADEL_CALLBACK_URL="http://localhost:3000/auth/callback/zitadel"
ZITADEL_POST_LOGIN_URL="/profile"
ZITADEL_POST_LOGOUT_URL="http://localhost:3000/auth/logout/callback"
```
</Tab>
<Tab value="FastAPI">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID, ZITADEL_CLIENT_SECRET and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
PY_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-zitadel-application-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"
```
</Tab>
<Tab value="Fastify">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID, ZITADEL_CLIENT_SECRET and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
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-zitadel-application-client-secret"
ZITADEL_CALLBACK_URL="http://localhost:3000/auth/callback/zitadel"
ZITADEL_POST_LOGIN_URL="/profile"
ZITADEL_POST_LOGOUT_URL="http://localhost:3000/auth/logout/callback"
```
</Tab>
<Tab value="Flask">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID, ZITADEL_CLIENT_SECRET and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
PY_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-zitadel-application-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"
```
</Tab>
<Tab value="Flutter">
No action required for this step.
The issuer and client Id will be passed directly when running the app (next step)
</Tab>
<Tab value="Go">
No action required for this step.
The issuer and client Id will be passed directly when running the app (next step)
</Tab>
<Tab value="Hono">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID, ZITADEL_CLIENT_SECRET and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
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-zitadel-application-client-secret"
ZITADEL_CALLBACK_URL="http://localhost:3000/auth/callback/zitadel"
ZITADEL_POST_LOGIN_URL="/profile"
ZITADEL_POST_LOGOUT_URL="http://localhost:3000/auth/logout/callback"
```
</Tab>
<Tab value="Laravel">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID, ZITADEL_CLIENT_SECRET and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
3. Generate app key, this will update the APP_KEY variable in the .env file
```bash
php artisan key:generate
```
```bash
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"
```
</Tab>
<Tab value="NestJS">
1. Copy+paste the .env.example to .env.local
2. Update the ZITADEL_CLIENT_ID, ZITADEL_CLIENT_SECRET and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
NODE_ENV=development
PORT=3000
SESSION_SECRET="your-very-secret-and-strong-session-key"
SESSION_SALT="your-very-secret-and-strong-session-salt"
SESSION_DURATION=3600
ZITADEL_DOMAIN="https://your-zitadel-domain"
ZITADEL_CLIENT_ID="your-zitadel-application-client-id"
ZITADEL_CLIENT_SECRET="your-zitadel-application-client-secret"
ZITADEL_CALLBACK_URL="http://localhost:3000/auth/callback/zitadel"
ZITADEL_POST_LOGIN_URL="/profile"
ZITADEL_POST_LOGOUT_URL="http://localhost:3000/auth/logout/callback"
```
</Tab>
<Tab value="Next.js">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID, ZITADEL_CLIENT_SECRET and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
NODE_ENV=development
PORT=3000
SESSION_SECRET="your-very-secret-and-strong-session-key"
SESSION_DURATION=3600
ZITADEL_DOMAIN="[https://your-instance.zitadel.cloud/](https://your-instance.zitadel.cloud/)"
ZITADEL_CLIENT_ID="zitadel-client-id"
ZITADEL_CLIENT_SECRET="zitadel-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"
```
</Tab>
<Tab value="Nuxt">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID, ZITADEL_CLIENT_SECRET and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
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-zitadel-application-client-secret"
ZITADEL_CALLBACK_URL="http://localhost:3000/api/auth/callback/zitadel"
ZITADEL_POST_LOGIN_URL="/profile"
ZITADEL_POST_LOGOUT_URL="http://localhost:3000"
NEXTAUTH_URL="http://localhost:3000"
```
</Tab>
<Tab value="Qwik">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID, ZITADEL_CLIENT_SECRET and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
NODE_ENV=development
VITE_PORT=3000
VITE_SESSION_SECRET="your-very-secret-and-strong-session-key"
VITE_SESSION_DURATION=3600
VITE_ZITADEL_DOMAIN="https://your-zitadel-domain"
VITE_ZITADEL_CLIENT_ID="your-zitadel-application-client-id"
VITE_ZITADEL_CLIENT_SECRET="your-zitadel-application-client-secret"
VITE_ZITADEL_CALLBACK_URL="http://localhost:3000/auth/callback/zitadel"
VITE_ZITADEL_POST_LOGOUT_URL="http://localhost:3000/api/auth/logout/callback"
```
</Tab>
<Tab value="React">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
NODE_ENV=development
PORT=3000
VITE_ZITADEL_DOMAIN="https://your-zitadel-domain"
VITE_ZITADEL_CLIENT_ID="your-client-id"
VITE_ZITADEL_CALLBACK_URL="http://localhost:3000/auth/callback"
VITE_ZITADEL_POST_LOGIN_URL="/profile"
VITE_ZITADEL_POST_LOGOUT_URL="http://localhost:3000"
```
</Tab>
<Tab value="SolidStart">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID, ZITADEL_CLIENT_SECRET and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
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-zitadel-application-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"
```
</Tab>
<Tab value="Spring">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID, ZITADEL_CLIENT_SECRET and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
SPRING_PROFILES_ACTIVE=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/auth/callback"
ZITADEL_POST_LOGOUT_URL="http://localhost:3000/auth/logout/callback"
```
</Tab>
<Tab value="Symfony">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID, ZITADEL_CLIENT_SECRET and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
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"
```
</Tab>
<Tab value="Svelte">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID, ZITADEL_CLIENT_SECRET and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
SESSION_SECRET="your-very-secret-and-strong-session-key"
SESSION_DURATION=3600
# Example: https://my-org-a1b2c3.zitadel.cloud
ZITADEL_DOMAIN="https://your-zitadel-domain"
ZITADEL_CLIENT_ID="your-zitadel-application-client-id"
ZITADEL_CLIENT_SECRET="your-zitadel-application-client-secret"
ZITADEL_CALLBACK_URL="http://localhost:3000/auth/callback/zitadel"
ZITADEL_POST_LOGIN_URL="/profile"
ZITADEL_POST_LOGOUT_URL="http://localhost:3000/auth/logout/callback"
NEXTAUTH_URL="http://localhost:3000"
```
</Tab>
<Tab value="Vue.js">
1. Copy+paste the .env.example to .env
2. Update the ZITADEL_CLIENT_ID and ZITADEL_DOMAIN with the client id and issuer you collected in Step 5.
```bash
NODE_ENV=development
PORT=3000
VITE_ZITADEL_DOMAIN="https://your-zitadel-domain"
VITE_ZITADEL_CLIENT_ID="your-client-id"
VITE_ZITADEL_CALLBACK_URL="http://localhost:3000/auth/callback"
VITE_ZITADEL_POST_LOGIN_URL="/profile"
VITE_ZITADEL_POST_LOGOUT_URL="http://localhost:3000"
```
</Tab>
</FrameworkSelector>
### 4. Build and Run
<FrameworkSelector>
<Tab value="Angular">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![Angular Example App](../../../public/img/guides/quickstart/angular_example_app.png)
</Tab>
<Tab value="Astro">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![Astro Example App](../../../public/img/guides/quickstart/astro_example_app.png)
</Tab>
<Tab value="ASP.NET Core">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
</Tab>
<Tab value="Django">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![Django Example App](../../../public/img/guides/quickstart/django_example_app.png)
</Tab>
<Tab value="Express.js">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![Express.js Example App](../../../public/img/guides/quickstart/expressjs_example_app.png)
</Tab>
<Tab value="Fastify">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![Fastify Example App](../../../public/img/guides/quickstart/fastify_example_app.png)
</Tab>
<Tab value="FastAPI">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![FastAPI Example App](../../../public/img/guides/quickstart/fastapi_example_app.png)
</Tab>
<Tab value="Flask">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![Flask Example App](../../../public/img/guides/quickstart/flask_example_app.png)
</Tab>
<Tab value="Flutter">
Make sure to replace the [zitadel_issuer] and [zitadel_client_id] with your own value before running the command
```bash
flutter run -d chrome --web-port=4444 --dart-define zitadel_url=[zitadel_issuer] --dart-define zitadel_client_id=[zitadel_client_id]
```
Your app will be live at `http://localhost:4444`.
![Flutter Example App](../../../public/img/guides/quickstart/flutter_example_app.png)
</Tab>
<Tab value="Go">
Make sure to replace the [zitadel_domain] (use the domain from the issuer without the https://) and [zitadel_client_id] with your own value before running the command
```bash
go run example/app/app.go --domain [zitadel_domain] --key XKv2Lqd7YAq13NUZVUWZEWZeruqyzViM --clientID [zitadel_client_id] --redirectURI http://localhost:8089/auth/callback
```
Your app will be live at `http://localhost:8089`.
![Go Example App](../../../public/img/guides/quickstart/go_example_app.png)
</Tab>
<Tab value="Hono">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![Hono Example App](../../../public/img/guides/quickstart/hono_example_app.png)
</Tab>
<Tab value="Laravel">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![Laravel Example App](../../../public/img/guides/quickstart/laravel_example_app.png)
</Tab>
<Tab value="NestJS">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![NestJS Example App](../../../public/img/guides/quickstart/nestjs_example_app.png)
</Tab>
<Tab value="Next.js">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![Next.js Example App](../../../public/img/guides/quickstart/next_example_app.png)
</Tab>
<Tab value="Nuxt">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![Nuxt Example App](../../../public/img/guides/quickstart/nuxt_example_app.png)
</Tab>
<Tab value="Qwik">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![Qwik Example App](../../../public/img/guides/quickstart/qwik_example_app.png)
</Tab>
<Tab value="React">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![React Example App](../../../public/img/guides/quickstart/react_example_app.png)
</Tab>
<Tab value="SolidStart">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![SolidStart Example App](../../../public/img/guides/quickstart/solidstart_example_app.png)
</Tab>
<Tab value="Spring">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![Spring Example App](../../../public/img/guides/quickstart/spring_example_app.png)
</Tab>
<Tab value="Symfony">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![Symfony Example App](../../../public/img/guides/quickstart/symfony_example_app.png)
</Tab>
<Tab value="Svelte">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![Svelte Example App](../../../public/img/guides/quickstart/sveltekit_example_app.png)
</Tab>
<Tab value="Vue.js">
```bash
make start
```
Your app will be live at `http://localhost:3000`.
![Vue Example App](../../../public/img/guides/quickstart/vue_example_app.png)
</Tab>
</FrameworkSelector>
## Success! 🚀
You’ve successfully integrated ZITADEL into an application.
<PreventLockout />
### What’s next?
- [**Example Applications**](/examples/introduction): Find more comprehensive guides and examples for the different frameworks
- [**SSO**](/guides/integrate/services): Learn how to add SSO to your services
- [**Customize the UI**](/guides/manage/customize/branding): Make the login page your own with Branding.
- [**Explore the API**](/apis/introduction): Check out the ZITADEL API Reference for advanced integrations.
Need help? Join our [Discord community](https://zitadel.com/chat) or explore the full Documentation. Happy coding!
Reference in New Issue View Git Blame Copy Permalink