fix: add prompt

zitadel · Jan 26, 2024 · b797368 · b797368
1 parent d1d999f
commit b797368
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 32 deletions.
diff --git a/lib/dist/zitadelAuth.d.ts b/lib/dist/zitadelAuth.d.ts
@@ -6,6 +6,7 @@ export interface ZitadelConfig {
     post_logout_redirect_uri?: string;
     scope?: string;
     project_resource_id?: string;
+    prompt?: string;
 }
 interface ZitadelAuth {
     authorize(): Promise<void>;

diff --git a/lib/dist/zitadelAuth.js b/lib/dist/zitadelAuth.js
@@ -1,6 +1,6 @@
 import { UserManager, WebStorageStateStore, } from "oidc-client-ts";
 export function createZitadelAuth(zitadelConfig) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const authConfig = {
         authority: `${zitadelConfig.issuer}`,
         client_id: `${zitadelConfig.client_id}`,
@@ -9,7 +9,8 @@ export function createZitadelAuth(zitadelConfig) {
         scope: (_b = zitadelConfig.scope) !== null && _b !== void 0 ? _b : `openid profile email ${zitadelConfig.project_resource_id
             ? `urn:zitadel:iam:org:project:id:${zitadelConfig.project_resource_id}:aud urn:zitadel:iam:org:projects:roles`
             : ""}`,
-        post_logout_redirect_uri: `${(_c = zitadelConfig.post_logout_redirect_uri) !== null && _c !== void 0 ? _c : "http://localhost:3000/"}`,
+        prompt: (_c = zitadelConfig.prompt) !== null && _c !== void 0 ? _c : "",
+        post_logout_redirect_uri: `${(_d = zitadelConfig.post_logout_redirect_uri) !== null && _d !== void 0 ? _d : "http://localhost:3000/"}`,
         response_mode: "query",
     };
     const userManager = new UserManager({

diff --git a/lib/src/zitadelAuth.ts b/lib/src/zitadelAuth.ts
@@ -1,6 +1,5 @@
 import {
   UserManagerSettings,
-  Logger,
   UserManager,
   WebStorageStateStore,
 } from "oidc-client-ts";
@@ -12,6 +11,7 @@ export interface ZitadelConfig {
   post_logout_redirect_uri?: string;
   scope?: string;
   project_resource_id?: string;
+  prompt?: string;
 }
 
 interface ZitadelAuth {
@@ -35,6 +35,7 @@ export function createZitadelAuth(zitadelConfig: ZitadelConfig): ZitadelAuth {
           ? `urn:zitadel:iam:org:project:id:${zitadelConfig.project_resource_id}:aud urn:zitadel:iam:org:projects:roles`
           : ""
       }`,
+    prompt: zitadelConfig.prompt ?? "",
     post_logout_redirect_uri: `${
       zitadelConfig.post_logout_redirect_uri ?? "http://localhost:3000/"
     }`,

diff --git a/src/App.tsx b/src/App.tsx
@@ -9,8 +9,9 @@ import Callback from "./components/Callback";
 
 function App() {
   const config: ZitadelConfig = {
-    issuer: "https://maxsecond-ekvdou.zitadel.cloud/",
-    client_id: "251008059999082377@react",
+    issuer: "",
+    client_id: "",
+    prompt: "login",
   };
 
   const zitadel = createZitadelAuth(config);

diff --git a/src/components/Callback.tsx b/src/components/Callback.tsx
@@ -9,6 +9,7 @@ type Props = {
   setUserInfo: any;
   handleLogout: any;
 };
+
 const Callback = ({
   issuer,
   authenticated,
@@ -18,24 +19,27 @@ const Callback = ({
   setUserInfo,
   handleLogout,
 }: Props) => {
+  function loadUserDiscovery(accessToken: string) {
+    const userInfoEndpoint = `${issuer}oidc/v1/userinfo`;
+    fetch(userInfoEndpoint, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    })
+      .then((response) => response.json())
+      .then((userInfo) => {
+        setUserInfo(userInfo);
+      });
+  }
+
   useEffect(() => {
     if (authenticated === null) {
       userManager
         .signinRedirectCallback()
         .then((user: any) => {
           if (user) {
             setAuth(true);
-            const access_token = user.access_token;
-            const userInfoEndpoint = `${issuer}oidc/v1/userinfo`;
-            fetch(userInfoEndpoint, {
-              headers: {
-                Authorization: `Bearer ${access_token}`,
-              },
-            })
-              .then((response) => response.json())
-              .then((userInfo) => {
-                setUserInfo(userInfo);
-              });
+            loadUserDiscovery(user.access_token);
           } else {
             setAuth(false);
           }
@@ -50,17 +54,7 @@ const Callback = ({
         .then((user: any) => {
           if (user) {
             setAuth(true);
-            const access_token = user.access_token;
-            const userInfoEndpoint = `${issuer}oidc/v1/userinfo`;
-            fetch(userInfoEndpoint, {
-              headers: {
-                Authorization: `Bearer ${access_token}`,
-              },
-            })
-              .then((response) => response.json())
-              .then((userInfo) => {
-                setUserInfo(userInfo);
-              });
+            loadUserDiscovery(user.access_token);
           } else {
             setAuth(false);
           }
@@ -73,12 +67,17 @@ const Callback = ({
   if (authenticated === true && userInfo) {
     return (
       <div className="user">
-        <h1>Welcome, {userInfo.name}!</h1>
+        <h2>Welcome, {userInfo.name}!</h2>
         <p className="description">Your ZITADEL Profile Information</p>
-        <h3>Name: {userInfo.name}</h3>
-        <h3>Email: {userInfo.email}</h3>
-        <h3>Email Verified: {userInfo.email_verified ? "Yes" : "No"}</h3>
-        <h3>Locale: {userInfo.locale}</h3>
+        <p>Name: {userInfo.name}</p>
+        <p>Email: {userInfo.email}</p>
+        <p>Email Verified: {userInfo.email_verified ? "Yes" : "No"}</p>
+        <p>
+          Roles:{" "}
+          {JSON.stringify(
+            userInfo["urn:zitadel:iam:org:project:251288942656156695:roles"]
+          )}
+        </p>
 
         <button onClick={handleLogout}>Log out</button>
       </div>