+
+
+);
+}
\ No newline at end of file
diff --git a/apps/docs/content/guides/start/_app_values.mdx b/apps/docs/content/guides/start/_app_values.mdx
new file mode 100644
index 000000000..588219e5b
--- /dev/null
+++ b/apps/docs/content/guides/start/_app_values.mdx
@@ -0,0 +1,41 @@
+import ProjectClientIdImg from '@pub/img/guides/quickstart/project_client_id.png'
+import ProjectClientIdSecretImg from '@pub/img/guides/quickstart/project_client_id_secret.png'
+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 }) {
+ return (
+ -
+
- + Auth Strategy: Authorization Code Flow (PKCE). This modern standard ensures tokens are exchanged securely without needing a client secret in your frontend. + +
- Redirect URIs: These define where users return after authentication:
+
-
+
- Redirect URI: {redirectUrl} (Landing page after login) +
- Post Logout URI: {postLogoutRedirectUrl} (Landing page after logout) +
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/docs/content/guides/start/quickstart.mdx b/apps/docs/content/guides/start/quickstart.mdx
index 85adceb55..981350868 100644
--- a/apps/docs/content/guides/start/quickstart.mdx
+++ b/apps/docs/content/guides/start/quickstart.mdx
@@ -1,18 +1,16 @@
---
title: The ZITADEL Quick Start Guide
-description: Learn how to integrate OIDC PKCE authentication in React using ZITADEL in under 5 minutes.
+description: Learn how to integrate OIDC PKCE authentication in your application using ZITADEL in under 5 minutes.
sidebar_label: Quick Start Guide
-keywords: [ZITADEL, React, OIDC, PKCE, Authentication, Identity Management]
-framework: React
-stack: Node.js
+keywords: [ZITADEL, OIDC, PKCE, Authentication, Identity Management]
---
-import { ResponsivePlayer } from "@/components/player";
+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';
-This sample app implements the [OIDC PKCE](/guides/integrate/login/oidc/login-users) flow for secure authentication.
-- Login: Exchanges a code challenge for an access token via ZITADEL.
-- Authorize: Uses the token to retrieve profile data from the userinfo endpoint.
-- Logout: Clears the local session and revokes the token.
+In this guide, you’ll set up a Zitadel account and authenticate your first example application.
## Get Started with ZITADEL Cloud
@@ -34,8 +32,7 @@ This is the administrative hub for managing your billing, teams, and instances.
Complete the brief onboarding questions.
This data helps us prioritize the development of new features, SDKs, and integrations that matter most to our community.
-
-
+
### 3. Create your ZITADEL instance
@@ -65,33 +62,88 @@ Log in using the Admin credentials you just created.
#### Step 1: Define your Project
- **Name**: Enter a name (e.g., Project1).
-- **Framework**: Select React (or choose Other if your stack isn't listed).
+- **Framework**: Select your preferred framework
- **Continue**: Click the Continue button.
-
-
+
#### Step 2: Review Default Configuration
ZITADEL automatically configures the best security settings for your selected framework.
-- **Auth Strategy**: [Authorization Code Flow](/apis/openidoauth/grant-types#authorization-code) with [PKCE](/apis/openidoauth/grant-types#authorization-code). This modern standard ensures tokens are exchanged securely without needing a client secret in your frontend.
-- **Redirect URIs**: These define where users return after authentication:
- - Redirect URI: http://localhost:3000/callback (Landing page after login)
- - Post Logout URI: http://localhost:3000/ (Landing page after logout)
-
++ To connect your application to ZITADEL, you need {valueCount} primary configuration values. + These are typically stored as environment variables in your project. +
+-
+ {!!clientSecret == false && (
-
+ Client ID Navigate to Configurations in the left sidebar. This is the unique public identifier for your React application.
+
+
)}
+ {!!clientSecret && ( -
+ Client ID & Client Secret Copy the client id and secret from the modal. The client id is the unique public identifier for your application.
+ Note: If you missed copy the secret, you can generate a new one in the Actions dropdown.
+
+
)}
+ -
+ Issuer URL Click on URLs in the left sidebar to find your Discovery Endpoint.
+ - The Value: Copy the issuer URL (e.g., https://your-instance.zitadel.cloud).
+ - Why it matters: ZITADEL supports OIDC Discovery. By providing just the Issuer URL to your SDK, the library automatically finds the login, logout, and token endpoints for you.
+
+
+
+ {!!projectID && ( -
+ Project ID 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.
+
+
+
)}
+