diff --git a/lib/dist/zitadelAuth.d.ts b/lib/dist/zitadelAuth.d.ts index 0957d06..d154f3c 100644 --- 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; diff --git a/lib/dist/zitadelAuth.js b/lib/dist/zitadelAuth.js index c0daffc..1ba6f48 100644 --- 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 index 018b70a..6e5d155 100644 --- 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 index 450d580..56ffe6e 100644 --- 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 index a6aa815..645a3ba 100644 --- 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,6 +19,19 @@ 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 @@ -25,17 +39,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); } @@ -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 (
-

Welcome, {userInfo.name}!

+

Welcome, {userInfo.name}!

Your ZITADEL Profile Information

-

Name: {userInfo.name}

-

Email: {userInfo.email}

-

Email Verified: {userInfo.email_verified ? "Yes" : "No"}

-

Locale: {userInfo.locale}

+

Name: {userInfo.name}

+

Email: {userInfo.email}

+

Email Verified: {userInfo.email_verified ? "Yes" : "No"}

+

+ Roles:{" "} + {JSON.stringify( + userInfo["urn:zitadel:iam:org:project:251288942656156695:roles"] + )} +