ContextQMD
Back to Zitadel

The ZITADEL Quick Start Guide

apps/docs/content/guides/start/quickstart.mdx

5.0.0-base39.1 KB
Original Source

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 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.
  1. Access: Once authenticated, you will be redirected to the Customer Portal dashboard.

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.

3. Create your ZITADEL instance

An 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.
  1. Admin Setup: Create your Instance Administrator. This user has "root" permissions to manage all organizations, policies, and settings within this specific instance.
  2. Deploy: Review your settings and click Create Instance.

4. Create your Project and Application

In ZITADEL, Applications are grouped into Projects. 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.

Step 1: Define your Project

  • Name: Enter a name (e.g., Project1).
  • Framework: Select your preferred framework
  • Continue: Click the Continue button.

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>

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-vuejs.git cd example-auth-vuejs ``` </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.

<Callout type="warn" title="Prevent Settings Misconfiguration Lockouts"> Login policy settings misconfigurations that occur during the testing phase can easily lead to a [lockout](/legal/policies/account-lockout-policy). To ensure you don't lose access to your instance:
  1. Generate a backup PAT: Create a Service Account Personal Access Token with the IAM_OWNER role to revert any login UI misconfigurations using the API.
  2. Add a second Instance Administrator: Always designate at least one second instance administrator. </Callout>

What’s next?

  • Example Applications: Find more comprehensive guides and examples for the different frameworks
  • SSO: Learn how to add SSO to your services
  • Customize the UI: Make the login page your own with Branding.
  • Explore the API: Check out the ZITADEL API Reference for advanced integrations.

Need help? Join our Discord community or explore the full Documentation. Happy coding!