Skip to content

Commit

Permalink
fmt
Browse files Browse the repository at this point in the history
  • Loading branch information
@garronej
garronej committed Dec 9, 2024
1 parent 3e1791a commit bb9fbea
Show file tree
Hide file tree
Showing 2 changed files with 172 additions and 176 deletions.
168 changes: 90 additions & 78 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<OidcProvider
ErrorFallback={({ initializationError }) => (
<div className={css({
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100vh",
})}>
<Alert severity="error" title={initializationError.type}>
{(() => {
switch (initializationError.type) {
case "server down":
return (
<>
Your local Keycloak doesn't seem to be running.<br />
If you are using uBlock Origin, or some other ad blocker, it might be blocking the redirection.<br />
Please refer to the <Link target="_blank" href="https://docs.keycloakify.dev/testing-your-theme/in-a-keycloak-docker-container">documentation</Link>.
</>
);
case "bad configuration":
return (
<>
You've modified the configuration of the Keycloak server in a way that is incompatible with
<Link target="_blank" href="https://github.com/keycloakify/my-theme.keycloakify.dev">
this test application
</Link>.<br />
You can open the console to see the error message.
</>
);
case "unknown":
return initializationError.message;
}
})()}
</Alert>
</div>
)}
fallback={
<div className={css({
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100vh",
})}>
<Typography variant="h4">
<CircularProgress
className={css({
position: "relative",
top: "0.20em"
})}
/>
&nbsp;
Redirecting to your local Keycloak server...
</Typography>
</div>
}
return (
<OidcProvider
ErrorFallback={({ initializationError }) => (
<div
className={css({
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100vh",
})}
>
<ContextualizedApp />
</OidcProvider>
);

<Alert severity="error" title={initializationError.type}>
{(() => {
switch (initializationError.type) {
case "server down":
return (
<>
Your local Keycloak doesn't seem to be running.
<br />
If you are using uBlock Origin, or some other ad blocker,
it might be blocking the redirection.
<br />
Please refer to the{" "}
<Link
target="_blank"
href="https://docs.keycloakify.dev/testing-your-theme/in-a-keycloak-docker-container"
>
documentation
</Link>
.
</>
);
case "bad configuration":
return (
<>
You've modified the configuration of the Keycloak server
in a way that is incompatible with
<Link
target="_blank"
href="https://github.com/keycloakify/my-theme.keycloakify.dev"
>
this test application
</Link>
.<br />
You can open the console to see the error message.
</>
);
case "unknown":
return initializationError.message;
}
})()}
</Alert>
</div>
)}
fallback={
<div
className={css({
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100vh",
})}
>
<Typography variant="h4">
<CircularProgress
className={css({
position: "relative",
top: "0.20em",
})}
/>
&nbsp; Redirecting to your local Keycloak server...
</Typography>
</div>
}
>
<ContextualizedApp />
</OidcProvider>
);
}

export function ContextualizedApp() {
Expand Down Expand Up @@ -123,8 +139,8 @@ export function ContextualizedApp() {
Learn more
</Link>
. <br />
They will redirect to the <strong>login UI</strong>.
(and not to the account UI)
They will redirect to the <strong>login UI</strong>. (and not to the
account UI)
</Typography>

<div className={classes.appInitiatedActionsButtonsWrapper}>
Expand Down Expand Up @@ -241,23 +257,19 @@ export function ContextualizedApp() {
</Typography>
<Typography variant="body1" sx={{ mb: 1 }}>
Link to the Keycloak Admin UI for the <code>{realm}</code> realm.
Note that user <code>{oidcTokens.decodedIdToken.preferred_username}</code> has to have the <code>realm-admin</code> role to access this page:
Note that user{" "}
<code>{oidcTokens.decodedIdToken.preferred_username}</code> has to
have the <code>realm-admin</code> role to access this page:
</Typography>
<Typography variant="body1">
{(()=>{

const url = `${new URL(issuerUri).origin}/admin/${realm}/console`;

return (
<Link
href={url}
target="_blank"
rel="noopener noreferrer"
>
{url}
</Link>
);
{(() => {
const url = `${new URL(issuerUri).origin}/admin/${realm}/console`;

return (
<Link href={url} target="_blank" rel="noopener noreferrer">
{url}
</Link>
);
})()}
</Typography>

Expand Down
180 changes: 82 additions & 98 deletions src/oidc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];
}





0 comments on commit bb9fbea

Please sign in to comment.