IntenseFinance/zitadel
3
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2026-08-17 16:35:14 -05:00
Code Issues Packages Projects Releases Wiki Activity

docs: Quickstart missing frameworks to quickstart (#11507)

Browse Source 
# Which Problems Are Solved

Some frameworks a user can select in the onboarding of the console are
missing in the quickstart

# How the Problems Are Solved

- Add missing frameworks to quickstart
  - Astro
  - Django
  - Express.js
  - FastAPI
  - Fastify
  - Flask
  - Hono
  - Laravel
  - Nuxtjs
  - Qwik
  - SolidStart
  - Spring
  - Svelte
- Update console configurations to match the example repositories
- Remove console client configurations, as they all point towards an SDK
which doesn't make sense with a default configuration

---------

Co-authored-by: Federico Coppede <fcoppede@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Mridang Agarwalla <mridang@zitadel.com>
This commit is contained in:
Fabienne Bühler
2026-02-11 08:48:52 +00:00
committed by GitHub
co-authored by Federico Coppede Copilot Mridang Agarwalla
parent 5dab2ba658
commit 702e0d0447
24 changed files with 847 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/docs/components/framework_selector.tsx
+3 -3
View File
@@ -4,8 +4,8 @@ import { useSearchParams } from 'next/navigation';
import { Tabs } from 'fumadocs-ui/components/tabs';
import { ReactNode, Suspense, useMemo } from 'react';
const FRAMEWORKS = ['angular', 'flutter', 'go', 'nextjs', 'react', 'symfony', 'vue'];
const DISPLAY_NAMES = ['Angular', 'Flutter', 'Go', 'Next.js', 'React', 'Symfony', 'Vue.js'];
const FRAMEWORKS = ['angular', 'astro', 'django', 'expressjs', 'fastapi', 'fastify', 'flask', 'flutter', 'go', 'hono', 'laravel', 'nestjs', 'nextjs', 'nuxt', 'qwik', 'react', 'solidstart', 'spring', 'symfony', 'svelte', 'vue'];
const DISPLAY_NAMES = ['Angular', 'Astro', 'Django', 'Express.js', 'FastAPI', 'Fastify', 'Flask', 'Flutter', 'Go', 'Hono', 'Laravel', 'NestJS', 'Next.js', 'Nuxt', 'Qwik', 'React', 'SolidStart', 'Spring', 'Symfony', 'Svelte', 'Vue.js'];
function FrameworkSelectorInner({ children }: { children: ReactNode }) {
const searchParams = useSearchParams();
@@ -43,4 +43,4 @@ export function FrameworkSelector(props: { children: ReactNode }) {
<FrameworkSelectorInner {...props} />
</Suspense>
);
}
}
apps/docs/content/guides/start/_app_values.mdx
+1 -6
View File
@@ -3,7 +3,7 @@ import ProjectClientIdSecretImg from '@pub/img/guides/quickstart/project_client_
import ProjectUrlsImg from '@pub/img/guides/quickstart/project_urls.png'
import ProjectProjectIdImg from '@pub/img/guides/quickstart/project_project_id.png'
export default function AppValue({ valueCount, clientSecret, projectID }) {
export default function AppValue({ valueCount, clientSecret }) {
return (
<div>
<p>
@@ -29,11 +29,6 @@ export default function AppValue({ valueCount, clientSecret, projectID }) {
<img src={ProjectUrlsImg.src} alt="Get URLs"/>
</li>
{!!projectID && (<li >
<b>Project ID</b> Your currently in the application configuration which is a sub resource of the Project. Navigate to the Project with the back arrow and copy the Project ID.
<img src={ProjectProjectIdImg.src} alt="Get Project ID"/>
</li>)}
</ol>
</div>
apps/docs/content/guides/start/quickstart.mdx
+679 -50
View File
@@ -10,7 +10,8 @@ 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 authenticate your first example application.
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
@@ -73,7 +74,43 @@ ZITADEL automatically configures the best security settings for your selected fr
<Tab value="Angular">
<AppConfig
redirectUrl="http://localhost:3000/auth/callback"
postLogoutRedirectUrl="http://localhost:3000/signedout">
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="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">
@@ -88,28 +125,76 @@ ZITADEL automatically configures the best security settings for your selected fr
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/callback"
postLogoutRedirectUrl="http://localhost:3000/">
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:8000/login_check"
postLogoutRedirectUrl="http://localhost:8000/logout">
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/">
postLogoutRedirectUrl="http://localhost:3000">
</AppConfig>
</Tab>
</FrameworkSelector>
@@ -120,25 +205,67 @@ ZITADEL automatically configures the best security settings for your selected fr
<FrameworkSelector>
<Tab value="Angular">
<AppValues valueCount="two" clientSecret={false} projectID={false}></AppValues>
<AppValues valueCount="two" clientSecret={false} ></AppValues>
</Tab>
<Tab value="Astro">
<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} projectID={false}></AppValues>
<AppValues valueCount="two" clientSecret={false}></AppValues>
</Tab>
<Tab value="Go">
<AppValues valueCount="two" clientSecret={false} projectID={false}></AppValues>
<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} projectID={false}></AppValues>
<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} projectID={false}></AppValues>
<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} projectID={false}></AppValues>
<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} projectID={false}></AppValues>
<AppValues valueCount="two" clientSecret={false}></AppValues>
</Tab>
</FrameworkSelector>
@@ -159,32 +286,85 @@ ZITADEL handles the complexity of the OIDC handshake so your app stays secure wi
<FrameworkSelector>
<Tab value="Angular">
- [Node.js](https://nodejs.org/)
- Code Editor: [VS Code](https://code.visualstudio.com/) or similar
- [npm](https://www.npmjs.com/)
</Tab>
<Tab value="Astro">
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
</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)
- Code Editor: [VS Code](https://code.visualstudio.com/) or similar
</Tab>
<Tab value="Go">
- [Go](https://go.dev/)
- Code Editor: [VS Code](https://code.visualstudio.com/) or similar
</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/)
- Code Editor: [VS Code](https://code.visualstudio.com/) or similar
- [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/)
- Code Editor: [VS Code](https://code.visualstudio.com/) or similar
- [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/)
- Code Editor: [VS Code](https://code.visualstudio.com/) or similar
</Tab>
<Tab value="Svelte">
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
</Tab>
<Tab value="Vue.js">
- [Node.js](https://nodejs.org/)
- Code Editor: [VS Code](https://code.visualstudio.com/) or similar
- [npm](https://www.npmjs.com/)
</Tab>
</FrameworkSelector>
@@ -197,6 +377,42 @@ ZITADEL handles the complexity of the OIDC handshake so your app stays secure wi
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="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
@@ -206,30 +422,78 @@ ZITADEL handles the complexity of the OIDC handshake so your app stays secure wi
<Tab value="Go">
```bash
git clone https://github.com/zitadel/zitadel-go.git
cd zitadel_go
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 git@github.com:zitadel/example-auth-nextjs.git
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 git@github.com:zitadel/example-auth-vuejs.git
git clone https://github.com/zitadel/example-auth-vuejs.git
cd example-auth-vuejs
```
</Tab>
@@ -240,7 +504,7 @@ ZITADEL handles the complexity of the OIDC handshake so your app stays secure wi
<FrameworkSelector>
<Tab value="Angular">
1. Copy+paste the .env.example to .env.local
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
@@ -252,6 +516,110 @@ ZITADEL handles the complexity of the OIDC handshake so your app stays secure wi
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="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)
@@ -260,8 +628,64 @@ ZITADEL handles the complexity of the OIDC handshake so your app stays secure wi
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+past the .env.example to .env.local
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
@@ -279,6 +703,40 @@ ZITADEL handles the complexity of the OIDC handshake so your app stays secure wi
```
</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.
@@ -293,18 +751,69 @@ ZITADEL handles the complexity of the OIDC handshake so your app stays secure wi
VITE_ZITADEL_POST_LOGOUT_URL="http://localhost:3000"
```
</Tab>
<Tab value="Symfony">
<Tab value="SolidStart">
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.
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
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"
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">
@@ -329,14 +838,67 @@ ZITADEL handles the complexity of the OIDC handshake so your app stays secure wi
<FrameworkSelector>
<Tab value="Angular">
```bash
npm install
npm run dev
make start
```
Your app will be live at `http://localhost:4200`.
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="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
@@ -357,42 +919,109 @@ ZITADEL handles the complexity of the OIDC handshake so your app stays secure wi
![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
npm install
npm run dev
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
npm install
npm run dev
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="Symfony">
<Tab value="SolidStart">
```bash
composer install
composer run dev
make start
```
Your app will be live at `http://localhost:3000`.
![Angular Example App](../../../public/img/guides/quickstart/symfony_example_app.png)
![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
npm install
npm run dev
make start
```
Your app will be live at `http://localhost:3000`.
@@ -409,7 +1038,7 @@ You’ve successfully integrated ZITADEL into an application.
1. **Generate a backup PAT:** Create a [Service User Personal Access Token](/guides/integrate/service-accounts/personal-access-token) with the [`IAM_OWNER`](/guides/manage/console/managers) role to revert any login UI misconfigurations using the API.
2. **Add a second Instance Manager:** Always designate at least one [**second instance manager**](/guides/manage/console/managers).
</Callout>
### What’s next?
@@ -418,4 +1047,4 @@ You’ve successfully integrated ZITADEL into an application.
- [**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!
Need help? Join our [Discord community](https://zitadel.com/chat) or explore the full Documentation. Happy coding!
apps/docs/content/sdk-examples/astro.mdx
+1 -1
View File
@@ -53,7 +53,7 @@ Once you have your [Zitadel application configured](https://zitadel.com/docs/gui
PORT=3000
SESSION_DURATION=3600
SESSION_SECRET=your-very-secret-and-strong-session-key
ZITADEL_DOMAIN=https://your-zitadel-instance.zitadel.cloud
ZITADEL_DOMAIN=https://your-zitadel-domain
ZITADEL_CLIENT_ID=your_client_id_from_console
ZITADEL_CLIENT_SECRET=your-randomly-generated-client-secret
ZITADEL_CALLBACK_URL=http://localhost:3000/api/auth/callback/zitadel
apps/docs/content/sdk-examples/fastify.mdx
+1 -1
View File
@@ -38,7 +38,7 @@ Before running this example, you need to create and configure a PKCE application
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects)
2. Configure it to use the PKCE authentication method
3. Set up your redirect URIs (e.g., `http://localhost:3000/auth/callback/zitadel` for development)
4. Configure post-logout redirect URIs (e.g., `http://localhost:3000`)
4. Configure post-logout redirect URIs (e.g., `http://localhost:3000/auth/logout/callback`)
5. Copy your **Client ID** for use in the next steps
6. Optionally enable [refresh tokens](https://zitadel.com/docs/apis/openidoauth/grant-types#refresh-token) in Token Settings for long-lived sessions
apps/docs/content/sdk-examples/nuxtjs.mdx
+2 -2
View File
@@ -36,7 +36,7 @@ Before running this example, you need to create and configure a PKCE application
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects)
2. Configure it to use the PKCE authentication method
3. Set up your redirect URIs (e.g., `http://localhost:3000/api/auth/callback/zitadel` for development)
4. Configure post-logout redirect URIs (e.g., `http://localhost:3000/`)
4. Configure post-logout redirect URIs (e.g., `http://localhost:3000`)
5. Copy your **Client ID** for use in the next steps
> **Note:** Make sure to enable **Dev Mode** in the ZITADEL Management Console if you're using HTTP URLs during local development. For production, always use HTTPS URLs and disable Dev Mode.
@@ -55,7 +55,7 @@ Once you have your Zitadel application configured:
ZITADEL_CLIENT_ID=your-client-id
ZITADEL_CLIENT_SECRET=your-randomly-generated-client-secret
ZITADEL_CALLBACK_URL=http://localhost:3000/api/auth/callback/zitadel
ZITADEL_POST_LOGOUT_URL=http://localhost:3000/
ZITADEL_POST_LOGOUT_URL=http://localhost:3000
AUTH_ORIGIN=http://localhost:3000
```
Replace these values with:
apps/docs/content/sdk-examples/react.mdx
+2 -2
View File
@@ -38,7 +38,7 @@ Before running this example, you need to create and configure a PKCE application
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects)
2. Configure it to use the PKCE authentication method
3. Set up your redirect URIs (e.g., `http://localhost:3000/auth/callback` for development)
4. Configure post-logout redirect URIs (e.g., `http://localhost:3000/`)
4. Configure post-logout redirect URIs (e.g., `http://localhost:3000`)
5. Copy your **Client ID** for use in the next steps
> **Note:** Make sure to enable **Dev Mode** in the [ZITADEL Management Console](https://zitadel.com/docs/guides/manage/console/overview) if you're using HTTP URLs during local development. For production, always use HTTPS URLs and disable Dev Mode.
@@ -53,7 +53,7 @@ Once you have your Zitadel application configured:
VITE_ZITADEL_DOMAIN=https://your-instance.zitadel.cloud
VITE_ZITADEL_CLIENT_ID=your_client_id_from_console
VITE_ZITADEL_CALLBACK_URL=http://localhost:3000/auth/callback
VITE_ZITADEL_POST_LOGOUT_URL=http://localhost:3000/
VITE_ZITADEL_POST_LOGOUT_URL=http://localhost:3000
VITE_POST_LOGIN_URL=/profile
VITE_PORT=3000
```
apps/docs/content/sdk-examples/vue.mdx
+1 -1
View File
@@ -38,7 +38,7 @@ Before running this example, you need to create and configure a PKCE application
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects)
2. Configure it to use the PKCE authentication method
3. Set up your redirect URIs (e.g., `http://localhost:3000/auth/callback` for development)
4. Configure post-logout redirect URIs
4. Configure post-logout redirect URIs (e.g., `http://localhost:3000`)
5. Copy your **Client ID** for use in the next steps
> **Note:** Make sure to enable **Dev Mode** in the [ZITADEL Management Console](https://zitadel.com/docs/guides/manage/console/overview) if you're using HTTP URLs during local development. For production, always use HTTPS URLs and disable Dev Mode.
apps/docs/frameworks.json
+78 -174
View File
@@ -1,47 +1,4 @@
[
{
"id": "client-php",
"title": "PHP",
"imgSrcDark": "/docs/img/tech/php.svg",
"docsLink": "/docs/sdk-examples/client-libraries/php",
"client": true
},
{
"id": "client-java",
"title": "Java",
"imgSrcDark": "/docs/img/tech/java.svg",
"docsLink": "/docs/sdk-examples/client-libraries/java",
"client": true
},
{
"id": "client-go",
"title": "Go",
"imgSrcDark": "/docs/img/tech/golang.svg",
"docsLink": "/docs/guides/start/quickstart?framework=go",
"client": true,
"sdk": true
},
{
"id": "client-ruby",
"title": "Ruby",
"imgSrcDark": "/docs/img/tech/ruby.svg",
"docsLink": "/docs/sdk-examples/client-libraries/ruby",
"client": true
},
{
"id": "client-python",
"title": "Python",
"imgSrcDark": "/docs/img/tech/python.svg",
"docsLink": "/docs/sdk-examples/client-libraries/python",
"client": true
},
{
"id": "client-node",
"title": "Node.js",
"imgSrcDark": "/docs/img/tech/nodejs.svg",
"docsLink": "/docs/sdk-examples/client-libraries/node",
"client": true
},
{
"id": "angular",
"title": "Angular",
@@ -50,6 +7,43 @@
"imgSrcDark": "/docs/img/tech/angular.svg",
"docsLink": "/docs/guides/start/quickstart?framework=angular"
},
{
"id": "astro",
"title": "Astro",
"imgSrcDark": "/docs/img/tech/astro.svg",
"docsLink": "/docs/guides/start/quickstart?framework=astro"
},
{
"id": "django",
"title": "Django",
"imgSrcDark": "/docs/img/tech/django.svg",
"docsLink": "/docs/guides/start/quickstart?framework=django"
},
{
"id": "expressjs",
"title": "Express.js",
"imgSrcDark": "/docs/img/tech/expressjs.svg",
"docsLink": "/docs/guides/start/quickstart?framework=expressjs"
},
{
"id": "fastapi",
"title": "FastAPI",
"imgSrcDark": "/docs/img/tech/fastapi.svg",
"docsLink": "/docs/guides/start/quickstart?framework=fastapi"
},
{
"id": "fastify",
"title": "Fastify",
"imgSrcDark": "/docs/img/tech/fastify.svg",
"docsLink": "/docs/guides/start/quickstart?framework=fastify"
},
{
"id": "flask",
"title": "Flask",
"imgSrcDark": "/docs/img/tech/flask.svg",
"imgSrcLight": "/docs/img/tech/flask.svg",
"docsLink": "/docs/guides/start/quickstart?framework=flask"
},
{
"id": "flutter",
"title": "Flutter",
@@ -59,18 +53,25 @@
{
"title": "Go",
"imgSrcDark": "/docs/img/tech/golang.svg",
"docsLink": "/docs/guides/start/quickstart?framework=go"
"docsLink": "/docs/guides/start/quickstart?framework=go",
"sdk": true
},
{
"id": "spring",
"title": "Spring",
"imgSrcDark": "/docs/img/tech/spring.svg",
"docsLink": "/docs/sdk-examples/spring"
"id": "hono",
"title": "Hono",
"imgSrcDark": "/docs/img/tech/hono.svg",
"docsLink": "/docs/guides/start/quickstart?framework=hono"
},
{
"id": "laravel",
"title": "Laravel",
"imgSrcDark": "/docs/img/tech/laravel.svg",
"docsLink": "/docs/sdk-examples/laravel"
},
{
"title": "NestJS",
"imgSrcDark": "/docs/img/tech/nestjs.svg",
"docsLink": "/docs/sdk-examples/nestjs"
"docsLink": "/docs/guides/start/quickstart?framework=nestjs"
},
{
"id": "next",
@@ -80,23 +81,10 @@
"docsLink": "/docs/guides/start/quickstart?framework=nextjs"
},
{
"id": "django",
"title": "Django",
"imgSrcDark": "/docs/img/tech/django.svg",
"docsLink": "/docs/sdk-examples/django"
},
{
"id": "flask",
"title": "Flask",
"imgSrcDark": "/docs/img/tech/flask.svg",
"imgSrcLight": "/docs/img/tech/flask.svg",
"docsLink": "/docs/sdk-examples/flask"
},
{
"id": "fastapi",
"title": "FastAPI",
"imgSrcDark": "/docs/img/tech/fastapi.svg",
"docsLink": "/docs/sdk-examples/fastapi"
"id": "nuxt",
"title": "Nuxt.js",
"imgSrcDark": "/docs/img/tech/nuxtjs.svg",
"docsLink": "/docs/guides/start/quickstart?framework=nuxt"
},
{
"id": "react",
@@ -105,125 +93,41 @@
"imgSrcDark": "/docs/img/tech/react.svg",
"docsLink": "/docs/guides/start/quickstart?framework=react"
},
{
"id": "qwik",
"title": "Qwik",
"imgSrcDark": "/docs/img/tech/qwik.svg",
"docsLink": "/docs/guides/start/quickstart?framework=qwik"
},
{
"id": "solidstart",
"title": "SolidStart",
"imgSrcDark": "/docs/img/tech/solidstart.svg",
"docsLink": "/docs/guides/start/quickstart?framework=solidstart"
},
{
"id": "spring",
"title": "Spring",
"imgSrcDark": "/docs/img/tech/spring.svg",
"docsLink": "/docs/guides/start/quickstart?framework=spring"
},
{
"id": "symfony",
"title": "Symfony",
"imgSrcDark": "/docs/img/tech/symfony.svg",
"docsLink": "/docs/guides/start/quickstart?framework=symfony"
},
{
"id": "svelte",
"title": "Svelte",
"imgSrcDark": "/docs/img/tech/sveltekit.svg",
"docsLink": "/docs/guides/start/quickstart?framework=sveltekit"
},
{
"id": "vue",
"title": "Vue.js",
"description": "This preset sets up an OIDC configuration with Authentication Code Flow, secured by PKCE",
"imgSrcDark": "/docs/img/tech/vue.svg",
"docsLink": "/docs/guides/start/quickstart?framework=vue"
},
{
"title": "Dart",
"imgSrcDark": "/docs/img/tech/dart.svg",
"docsLink": "https://github.com/smartive/zitadel-dart",
"external": true,
"client": true,
"sdk": true
},
{
"title": "Elixir",
"imgSrcDark": "/docs/img/tech/elixir.svg",
"docsLink": "https://github.com/maennchen/zitadel_api",
"external": true
},
{
"title": "NextAuth",
"imgSrcDark": "/docs/img/tech/nextjs.svg",
"imgSrcLight": "/docs/img/tech/nextjslight.svg",
"docsLink": "https://next-auth.js.org/providers/zitadel",
"external": true
},
{
"title": ".Net",
"imgSrcDark": "/docs/img/tech/dotnet.svg",
"docsLink": "https://github.com/smartive/zitadel-net",
"external": true,
"client": true
},
{
"title": "Passport.js",
"imgSrcDark": "/docs/img/tech/passportjs.svg",
"docsLink": "https://github.com/buehler/node-passport-zitadel",
"external": true
},
{
"title": "Rust",
"imgSrcLight": "/docs/img/tech/rust.svg",
"imgSrcDark": "/docs/img/tech/rustlight.svg",
"docsLink": "https://github.com/smartive/zitadel-rust",
"client": true,
"external": true
},
{
"title": "Pylon",
"imgSrcDark": "/docs/img/tech/pylon.svg",
"docsLink": "https://github.com/getcronit/pylon",
"external": true
},
{
"title": "Vanilla-JS",
"imgSrcDark": "/docs/img/tech/javascript.svg",
"docsLink": "https://github.com/zitadel/zitadel-vanilla-js",
"external": true
},
{
"id": "astro",
"title": "Astro",
"imgSrcDark": "/docs/img/tech/astro.svg",
"docsLink": "/docs/sdk-examples/astro"
},
{
"id": "expressjs",
"title": "Express.js",
"imgSrcDark": "/docs/img/tech/expressjs.svg",
"docsLink": "/docs/sdk-examples/expressjs"
},
{
"id": "fastify",
"title": "Fastify",
"imgSrcDark": "/docs/img/tech/fastify.svg",
"docsLink": "/docs/sdk-examples/fastify"
},
{
"id": "hono",
"title": "Hono",
"imgSrcDark": "/docs/img/tech/hono.svg",
"docsLink": "/docs/sdk-examples/hono"
},
{
"id": "nuxtjs",
"title": "Nuxt.js",
"imgSrcDark": "/docs/img/tech/nuxtjs.svg",
"docsLink": "/docs/sdk-examples/nuxtjs"
},
{
"id": "qwik",
"title": "Qwik",
"imgSrcDark": "/docs/img/tech/qwik.svg",
"docsLink": "/docs/sdk-examples/qwik"
},
{
"id": "solidstart",
"title": "SolidStart",
"imgSrcDark": "/docs/img/tech/solidstart.svg",
"docsLink": "/docs/sdk-examples/solidstart"
},
{
"id": "sveltekit",
"title": "SvelteKit",
"imgSrcDark": "/docs/img/tech/sveltekit.svg",
"docsLink": "/docs/sdk-examples/sveltekit"
},
{
"id": "laravel",
"title": "Laravel",
"imgSrcDark": "/docs/img/tech/laravel.svg",
"docsLink": "/docs/sdk-examples/laravel"
}
]
apps/docs/public/img/guides/quickstart/astro_example_app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 311 KiB

apps/docs/public/img/guides/quickstart/django_example_app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 310 KiB

apps/docs/public/img/guides/quickstart/expressjs_example_app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 325 KiB

apps/docs/public/img/guides/quickstart/fastapi_example_app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 313 KiB

apps/docs/public/img/guides/quickstart/fastify_example_app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

apps/docs/public/img/guides/quickstart/flask_example_app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 314 KiB

apps/docs/public/img/guides/quickstart/hono_example_app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

apps/docs/public/img/guides/quickstart/laravel_example_app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 350 KiB

apps/docs/public/img/guides/quickstart/nestjs_example_app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

apps/docs/public/img/guides/quickstart/nuxt_example_app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 323 KiB

apps/docs/public/img/guides/quickstart/qwik_example_app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

apps/docs/public/img/guides/quickstart/solidstart_example_app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 326 KiB

apps/docs/public/img/guides/quickstart/spring_example_app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 354 KiB

apps/docs/public/img/guides/quickstart/sveltekit_example_app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

console/src/app/utils/framework.ts
+79 -44
View File
@@ -13,7 +13,7 @@ export const OIDC_CONFIGURATIONS: OidcAppConfigurations = {
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:3000/auth/callback'])
.setPostLogoutRedirectUrisList(['http://localhost:3000/signedout']),
.setPostLogoutRedirectUrisList(['http://localhost:3000/auth/logout/callback']),
['react']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_USER_AGENT)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE)
@@ -27,72 +27,72 @@ export const OIDC_CONFIGURATIONS: OidcAppConfigurations = {
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:3000/auth/callback'])
.setPostLogoutRedirectUrisList(['http://localhost:3000/']),
.setPostLogoutRedirectUrisList(['http://localhost:3000']),
// web applications
['next']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:3000/callback'])
.setRedirectUrisList(['http://localhost:3000/api/auth/callback/zitadel'])
.setPostLogoutRedirectUrisList(['http://localhost:3000/api/auth/logout/callback']),
['nestjs']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:3000/auth/callback/zitadel'])
.setPostLogoutRedirectUrisList(['http://localhost:3000/auth/logout/callback']),
['nuxt']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:3000/api/auth/callback/zitadel'])
.setPostLogoutRedirectUrisList(['http://localhost:3000']),
['java']: new AddOIDCAppRequest()
['svelte']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:18080/webapp/login/oauth2/code/zitadel'])
.setPostLogoutRedirectUrisList(['http://localhost:18080/webapp']),
['client-java']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:18080/webapp/login/oauth2/code/zitadel'])
.setPostLogoutRedirectUrisList(['http://localhost:18080/webapp']),
.setRedirectUrisList(['http://localhost:3000/auth/callback/zitadel'])
.setPostLogoutRedirectUrisList(['http://localhost:3000/auth/logout/callback']),
['spring']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:8080/login/oauth2/code/zitadel'])
.setPostLogoutRedirectUrisList(['http://localhost:8080']),
['client-php']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:8080/callback'])
.setPostLogoutRedirectUrisList(['http://localhost:8080']),
['client-python']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:8000/callback'])
.setPostLogoutRedirectUrisList(['http://localhost:8000']),
['client-node']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:3000/callback'])
.setPostLogoutRedirectUrisList(['http://localhost:3000']),
['client-go']: new AddOIDCAppRequest()
.setRedirectUrisList(['http://localhost:3000/auth/callback'])
.setPostLogoutRedirectUrisList(['http://localhost:3000/auth/logout/callback']),
['go']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:8089/auth/callback'])
.setPostLogoutRedirectUrisList(['http://localhost:8089']),
['client-ruby']: new AddOIDCAppRequest()
['symfony']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:3000/callback'])
.setPostLogoutRedirectUrisList(['http://localhost:3000']),
['symfony']: new AddOIDCAppRequest()
.setRedirectUrisList(['http://localhost:3000/auth/callback'])
.setPostLogoutRedirectUrisList(['http://localhost:3000/auth/logout/callback']),
['laravel']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:3000/auth/callback'])
.setPostLogoutRedirectUrisList(['http://localhost:3000/auth/logout/callback']),
['fastapi']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:3000/auth/callback'])
.setPostLogoutRedirectUrisList(['http://localhost:3000/auth/logout/callback']),
['flask']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
@@ -104,8 +104,43 @@ export const OIDC_CONFIGURATIONS: OidcAppConfigurations = {
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:8000/oidc/callback/'])
.setPostLogoutRedirectUrisList(['http://localhost:8000/oidc/logout/ ']),
.setRedirectUrisList(['http://localhost:3000/auth/callback'])
.setPostLogoutRedirectUrisList(['http://localhost:3000/auth/logout/callback']),
['astro']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:3000/api/auth/callback/zitadel'])
.setPostLogoutRedirectUrisList(['http://localhost:3000/api/auth/logout/callback']),
['hono']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:3000/auth/callback/zitadel'])
.setPostLogoutRedirectUrisList(['http://localhost:3000/auth/logout/callback']),
['solidstart']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:3000/api/auth/callback/zitadel'])
.setPostLogoutRedirectUrisList(['http://localhost:3000/api/auth/logout/callback']),
['expressjs']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:3000/auth/callback/zitadel'])
.setPostLogoutRedirectUrisList(['http://localhost:3000/auth/logout/callback']),
['fastify']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_WEB)
.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC)
.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE])
.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE])
.setRedirectUrisList(['http://localhost:3000/auth/callback/zitadel'])
.setPostLogoutRedirectUrisList(['http://localhost:3000/auth/logout/callback']),
// native
['flutter']: new AddOIDCAppRequest()
.setAppType(OIDCAppType.OIDC_APP_TYPE_NATIVE)