From bb9fbeac718fd9c756dddc93f1b1b86f6ddd1b58 Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Mon, 9 Dec 2024 01:14:00 +0100 Subject: [PATCH] fmt --- src/App.tsx | 168 +++++++++++++++++++++++++----------------------- src/oidc.ts | 180 ++++++++++++++++++++++++---------------------------- 2 files changed, 172 insertions(+), 176 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 9c0e8ce..5e264d1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,70 +11,86 @@ import LogoutIcon from "@mui/icons-material/Logout"; import CircularProgress from "@mui/material/CircularProgress"; export function App() { + const { css } = useStyles(); - const { css } = useStyles(); - - return ( - ( -
- - {(() => { - switch (initializationError.type) { - case "server down": - return ( - <> - Your local Keycloak doesn't seem to be running.
- If you are using uBlock Origin, or some other ad blocker, it might be blocking the redirection.
- Please refer to the documentation. - - ); - case "bad configuration": - return ( - <> - You've modified the configuration of the Keycloak server in a way that is incompatible with - - this test application - .
- You can open the console to see the error message. - - ); - case "unknown": - return initializationError.message; - } - })()} - -
- )} - fallback={ -
- - -   - Redirecting to your local Keycloak server... - -
- } + return ( + ( +
- - - ); - + + {(() => { + switch (initializationError.type) { + case "server down": + return ( + <> + Your local Keycloak doesn't seem to be running. +
+ If you are using uBlock Origin, or some other ad blocker, + it might be blocking the redirection. +
+ Please refer to the{" "} + + documentation + + . + + ); + case "bad configuration": + return ( + <> + You've modified the configuration of the Keycloak server + in a way that is incompatible with + + this test application + + .
+ You can open the console to see the error message. + + ); + case "unknown": + return initializationError.message; + } + })()} + +
+ )} + fallback={ +
+ + +   Redirecting to your local Keycloak server... + +
+ } + > + + + ); } export function ContextualizedApp() { @@ -123,8 +139,8 @@ export function ContextualizedApp() { Learn more .
- They will redirect to the login UI. - (and not to the account UI) + They will redirect to the login UI. (and not to the + account UI)
@@ -241,23 +257,19 @@ export function ContextualizedApp() { Link to the Keycloak Admin UI for the {realm} realm. - Note that user {oidcTokens.decodedIdToken.preferred_username} has to have the realm-admin role to access this page: + Note that user{" "} + {oidcTokens.decodedIdToken.preferred_username} has to + have the realm-admin role to access this page: - {(()=>{ - - const url = `${new URL(issuerUri).origin}/admin/${realm}/console`; - - return ( - - {url} - - ); + {(() => { + const url = `${new URL(issuerUri).origin}/admin/${realm}/console`; + return ( + + {url} + + ); })()} diff --git a/src/oidc.ts b/src/oidc.ts index fdb5a89..f17085e 100644 --- a/src/oidc.ts +++ b/src/oidc.ts @@ -2,121 +2,105 @@ import { createReactOidc } from "oidc-spa/react"; import { createMockReactOidc } from "oidc-spa/mock/react"; export const { OidcProvider, useOidc } = (() => { + const isAuthGloballyRequired = true; + + const publicUrl = import.meta.env.BASE_URL; + + if (import.meta.env.DEV) { + return createMockReactOidc({ + isUserInitiallyLoggedIn: true, + isAuthGloballyRequired, + publicUrl, + mockedTokens: { + decodedIdToken: { + exp: 1722824053, + iat: 1722823753, + auth_time: 1722823752, + jti: "fcfbe727-9420-439a-b735-d01cf873fd2d", + iss: "http://localhost:8080/realms/myrealm", + aud: "myclient", + sub: "d93e1772-4916-4243-850f-a6d9b2615716", + typ: "ID", + azp: "myclient", + sid: "40f34d36-75cc-4934-a347-8c7522ddd935", + at_hash: "JOhzt7rCARGvf894-gZZmA", + acr: "1", + email_verified: true, + gender: "prefer_not_to_say", + name: "Test User", + favourite_pet: "cat", + preferred_username: "testuser", + locale: "en", + given_name: "Test", + family_name: "User", + email: "testuser@gmail.com", + }, + }, + mockedParams: { + issuerUri: "http://localhost:8080/realms/myrealm", + clientId: "myclient", + }, + }); + } - const isAuthGloballyRequired = true; - - const publicUrl = import.meta.env.BASE_URL; - - if (import.meta.env.DEV) { - - return createMockReactOidc({ - isUserInitiallyLoggedIn: true, - isAuthGloballyRequired, - publicUrl, - mockedTokens: { - decodedIdToken: { - exp: 1722824053, - iat: 1722823753, - auth_time: 1722823752, - jti: "fcfbe727-9420-439a-b735-d01cf873fd2d", - iss: "http://localhost:8080/realms/myrealm", - aud: "myclient", - sub: "d93e1772-4916-4243-850f-a6d9b2615716", - typ: "ID", - azp: "myclient", - sid: "40f34d36-75cc-4934-a347-8c7522ddd935", - at_hash: "JOhzt7rCARGvf894-gZZmA", - acr: "1", - email_verified: true, - gender: "prefer_not_to_say", - name: "Test User", - favourite_pet: "cat", - preferred_username: "testuser", - locale: "en", - given_name: "Test", - family_name: "User", - email: "testuser@gmail.com" - } - }, - mockedParams: { - issuerUri: "http://localhost:8080/realms/myrealm", - clientId: "myclient" - } - }); - - } - - const getParam= (params: { - name: string; - defaultValue: string; - }) => { - - const { name, defaultValue } = params; - - const value = new URLSearchParams(window.location.search).get(name); - - if( value !== null ){ - - sessionStorage.setItem(name, value); - return value; - - } - - const storedValue = sessionStorage.getItem(name); - - if( storedValue !== null ){ - return storedValue; - } - - return defaultValue; - - }; + const getParam = (params: { name: string; defaultValue: string }) => { + const { name, defaultValue } = params; - const realm = getParam({ name: "realm", defaultValue: "myrealm" }); + const value = new URLSearchParams(window.location.search).get(name); - const issuerUri = (() => { + if (value !== null) { + sessionStorage.setItem(name, value); + return value; + } - const port = getParam({ name: "port", defaultValue: "8080" }); - const kcHttpRelativePath = getParam({ name: "kcHttpRelativePath", defaultValue: "" }); + const storedValue = sessionStorage.getItem(name); - return `http://localhost:${port}${kcHttpRelativePath}/realms/${realm}`; + if (storedValue !== null) { + return storedValue; + } - })(); + return defaultValue; + }; - const clientId = getParam({ name: "client", defaultValue: "myclient" }); + const realm = getParam({ name: "realm", defaultValue: "myrealm" }); - return createReactOidc({ - issuerUri, - clientId, - publicUrl, - isAuthGloballyRequired, - decodedIdTokenSchema: { - parse: decodedIdToken => decodedIdToken as { preferred_username: string; } - }, - doEnableDebugLogs: true + const issuerUri = (() => { + const port = getParam({ name: "port", defaultValue: "8080" }); + const kcHttpRelativePath = getParam({ + name: "kcHttpRelativePath", + defaultValue: "", }); + return `http://localhost:${port}${kcHttpRelativePath}/realms/${realm}`; + })(); + + const clientId = getParam({ name: "client", defaultValue: "myclient" }); + + return createReactOidc({ + issuerUri, + clientId, + publicUrl, + isAuthGloballyRequired, + decodedIdTokenSchema: { + parse: (decodedIdToken) => + decodedIdToken as { preferred_username: string }, + }, + doEnableDebugLogs: true, + }); })(); -/** +/** * Extract last portion of the path * Example "http://localhost:8080/realms/myrealm" => "myrealm" */ export function readRealm(params: { issuerUri: string }): string { + const { issuerUri } = params; - const { issuerUri } = params; - - const match = issuerUri.match(/realms\/([^/]+)\/?/); - - if( match === null ){ - throw new Error(`Invalid issuerUri: ${issuerUri}`); - } + const match = issuerUri.match(/realms\/([^/]+)\/?/); - return match[1]; + if (match === null) { + throw new Error(`Invalid issuerUri: ${issuerUri}`); + } + return match[1]; } - - - - -