---
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!