sr2/keycloak-theme-cloud
4
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Migrate from keycloak-js to oidc-spa

Browse source
This commit is contained in:
Joseph Garrone 2023-10-22 12:39:00 +02:00
parent be386fd8ac
commit ab4b205980
8 changed files with 170 additions and 422 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/keycloak-theme/login/KcApp.tsx
View file

@ -7,10 +7,6 @@ import { useI18n } from "./i18n";
const Template = lazy(() => import("./Template"));
const DefaultTemplate = lazy(() => import("keycloakify/login/Template"));
// You can uncomment this to see the values passed by the main app before redirecting.
//import { foo, bar } from "./valuesTransferredOverUrl";
//console.log(`Values passed by the main app in the URL parameter:`, { foo, bar });
const Login = lazy(() => import("./pages/Login"));
// If you can, favor register-user-profile.ftl over register.ftl, see: https://docs.keycloakify.dev/realtime-input-validation
const Register = lazy(() => import("./pages/Register"));

25
src/keycloak-theme/login/pages/Login.tsx
View file

@ -5,6 +5,17 @@ import type { PageProps } from "keycloakify/login/pages/PageProps";
import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18n } from "../i18n";
import { retrieveQueryParamFromUrl } from "oidc-spa/tools/urlQueryParams";
const result = retrieveQueryParamFromUrl({
"url": window.location.href,
"name": "my_custom_param",
});
if (result.wasPresent) {
console.log("my_custom_param", result.value);
}
export default function Login(props: PageProps<Extract<KcContext, { pageId: "login.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@ -60,7 +71,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
id="kc-form-wrapper"
className={clsx(
realm.password &&
social.providers && [getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass")]
social.providers && [getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass")]
)}
>
{realm.password && (
@ -71,8 +82,8 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
const label = !realm.loginWithEmailAllowed
? "username"
: realm.registrationEmailAsUsername
? "email"
: "usernameOrEmail";
? "email"
: "usernameOrEmail";
const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
@ -123,8 +134,8 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
type="checkbox"
{...(login.rememberMe === "on"
? {
"checked": true
}
"checked": true
}
: {})}
/>
{msg("rememberMe")}
@ -149,8 +160,8 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
name="credentialId"
{...(auth?.selectedCredential !== undefined
? {
"value": auth.selectedCredential
}
"value": auth.selectedCredential
}
: {})}
/>
<input

123
src/keycloak-theme/login/valuesTransferredOverUrl.ts
View file

@ -1,123 +0,0 @@
import { kcContext } from "./kcContext";
import {
retrieveParamFromUrl,
addParamToUrl,
updateSearchBarUrl
} from "powerhooks/tools/urlSearchParams";
import { capitalize } from "tsafe/capitalize";
export const { foo, addFooToQueryParams } = (() => {
const queryParamName = "foo";
type Type = { foo: number; };
const value = (()=> {
const unparsedValue = read({ queryParamName });
if( unparsedValue === undefined ){
return undefined;
}
return JSON.parse(unparsedValue) as Type;
})();
function addToUrlQueryParams(params: {
url: string;
value: Type;
}): string {
const { url, value } = params;
return addParamToUrl({
url,
"name": queryParamName,
"value": JSON.stringify(value)
}).newUrl;
}
const out = {
[queryParamName]: value,
[`add${capitalize(queryParamName)}ToQueryParams` as const]: addToUrlQueryParams
} as const;
return out;
})();
export const { bar, addBarToQueryParams } = (() => {
const queryParamName = "bar";
type Type = string;
const value = (()=> {
const unparsedValue = read({ queryParamName });
if( unparsedValue === undefined ){
return undefined;
}
return JSON.parse(unparsedValue) as Type;
})();
function addToUrlQueryParams(params: {
url: string;
value: Type;
}): string {
const { url, value } = params;
return addParamToUrl({
url,
"name": queryParamName,
"value": JSON.stringify(value)
}).newUrl;
}
const out = {
[queryParamName]: value,
[`add${capitalize(queryParamName)}ToQueryParams` as const]: addToUrlQueryParams
} as const;
return out;
})();
function read(params: { queryParamName: string }): string | undefined {
if (kcContext === undefined || process.env.NODE_ENV !== "production") {
//NOTE: We do something only if we are really in Keycloak
return undefined;
}
const { queryParamName } = params;
read_from_url: {
const result = retrieveParamFromUrl({
"url": window.location.href,
"name": queryParamName
});
if (!result.wasPresent) {
break read_from_url;
}
const { newUrl, value: serializedValue } = result;
updateSearchBarUrl(newUrl);
localStorage.setItem(queryParamName, serializedValue);
return serializedValue;
}
//Reading from local storage
const serializedValue = localStorage.getItem(queryParamName);
if (serializedValue === null) {
throw new Error(
`Missing ${queryParamName} in URL when redirecting to login page`
);
}
return serializedValue;
}