feat: docs rehaul, fix missing context in console, quickstarts (#1212)

* onboarding components, routing, steps * onboarding component, toc * fix onboarding mixin * header * refactor docs * fix layout * cleanup routing * docs routing * fix conventions * de en routing * docs, guide contents, nav * rem i18n support * fix routing from docs * rollup onwarn changes, preload * update svelte plugin, update rollup config * move docs * revert img style, remove code table * rem de completely * rollup optim, template * angular quickstart, quickstart overview page, update deps * fix link * pack, slug * prefetch binding, hidden links * export log * guards route ch * fix homepage * angular docs * docs * resolve fsh * overview * docs * docs * packages fix race condition * nav, home link * add vue, aspnet * doc optimizations * embed status pal * angular guide * angular guide * dotnet, angular guide * viewbox * typo * block onboarding route for non iam writers * set links from component data * fix: fetch org context in guard, more main cnt (#1192) * change get started guide, fix code blockquotes, typos * flutter guide * h2 spacing * highlight strong * plus * rm start sublinks * add proxy quickstart * regex * prevent outside click, fix project grant write Co-authored-by: Florian Forster <florian@caos.ch> Co-authored-by: Livio Amstutz <livio.a@gmail.com>
2025-12-06 04:52:37 +00:00 · 2021-02-16 16:59:18 +01:00
parent 30a06e5bec
commit 27be460c07
168 changed files with 2306 additions and 1652 deletions
--- a/site/docs/quickstarts/01-singlepageapp.md
+++ b/site/docs/quickstarts/01-singlepageapp.md
@@ -0,0 +1,62 @@
+---
+title:  Single Page Application
+description: ...
+---
+
+### SPA Protocol and Flow recommendation
+
+If your [client](administrate#Clients) is a single page application (SPA) we recommend that you use [Authorization Code](architecture#Authorization_Code) in combination with [Proof Key for Code Exchange](architecture#Proof_Key_for_Code_Exchange).
+
+This flow has great support with most modern languages and frameworks and is the recommended default.
+
+> In the OIDC and OAuth world this **client profile** is called "user-agent-based application"
+
+### Typescript Example
+
+#### Typescript Authentication Example
+
+If you use a framework like Angular, Vue, React, ... you can use this code snippet here to integrate **ZITADEL** into you application
+
+Library used for this example [https://github.com/IdentityModel/oidc-client-js](https://github.com/IdentityModel/oidc-client-js)
+
+```ts
+import { UserManager, WebStorageStateStore, User } from 'oidc-client';
+
+export default class AuthService {
+    private userManager: UserManager;
+
+    constructor() {
+        const ZITADEL_ISSUER_DOMAIN: string = "https://issuer.zitadel.ch";
+
+        const settings: any = {
+            userStore: new WebStorageStateStore({ store: window.localStorage }),
+            authority: ZITADEL_ISSUER_DOMAIN,
+            client_id: 'YOUR_ZITADEL_CLIENT_ID',
+            redirect_uri: 'http://localhost:44444/callback.html',
+            response_type: 'code',
+            scope: 'openid profile',
+            post_logout_redirect_uri: 'http://localhost:44444/',
+        };
+
+        this.userManager = new UserManager(settings);
+    }
+
+    public getUser(): Promise<User | null> {
+        return this.userManager.getUser();
+    }
+
+    public login(): Promise<void> {
+        return this.userManager.signinRedirect();
+    }
+
+    public logout(): Promise<void> {
+        return this.userManager.signoutRedirect();
+    }
+
+    public getAccessToken(): Promise<string> {
+        return this.userManager.getUser().then((data: any) => {
+            return data.access_token;
+        });
+    }
+}
+```