agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix LoginPasskesConditionalAuthenticate

Browse Source
This commit is contained in:
Joseph Garrone 2024-09-09 06:59:11 +02:00
parent 1d57f4b4dc
commit 7e5abe8589
9 changed files with 102 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
scripts/build/createPublicDotKeycloakifyDir.ts
View File

@ -68,27 +68,6 @@ export async function createPublicDotKeycloakifyDir() {
WELL_KNOWN_DIRECTORY_BASE_NAME.RESOURCES_COMMON
)
});
copy_v24_js: {
if (themeType !== "login") {
break copy_v24_js;
}
const { extractedDirPath } = await downloadKeycloakDefaultTheme({
keycloakVersionId: "LAST_24"
});
transformCodebase({
srcDirPath: pathJoin(
extractedDirPath,
"base",
"login",
"resources",
"js"
),
destDirPath: pathJoin(destDirPath, "js", "v24")
});
}
})
);
}

12
scripts/shared/downloadKeycloakDefaultTheme.ts
View File

@ -7,8 +7,7 @@ import { assert, type Equals } from "tsafe/assert";
const KEYCLOAK_VERSION = {
FOR_LOGIN_THEME: "25.0.4",
FOR_ACCOUNT_MULTI_PAGE: "21.1.2",
LAST_24: "24.0.4"
FOR_ACCOUNT_MULTI_PAGE: "21.1.2"
} as const;
export async function downloadKeycloakDefaultTheme(params: {
@ -73,15 +72,6 @@ export async function downloadKeycloakDefaultTheme(params: {
return;
}
break;
case KEYCLOAK_VERSION.LAST_24:
if (
!fileRelativePath.startsWith(
pathJoin("base", "login", "resources", "js")
)
) {
return;
}
break;
default:
assert<Equals<typeof keycloakVersion, never>>(false);

6
src/login/KcContext/KcContext.ts
View File

@ -149,10 +149,6 @@ export declare namespace KcContext {
getFirstError: (...fieldNames: string[]) => string;
};
authenticationSession?: {
authSessionId: string;
tabId: string;
};
properties: {};
"x-keycloakify": {
messages: Record<string, string>;
@ -593,7 +589,7 @@ export declare namespace KcContext {
challenge: string;
userVerification: string;
rpId: string;
createTimeout: number | string;
createTimeout: number;
authenticators?: {
authenticators: WebauthnAuthenticate.WebauthnAuthenticator[];

4
src/login/Template.tsx
View File

@ -4,9 +4,9 @@ import { clsx } from "keycloakify/tools/clsx";
import type { TemplateProps } from "keycloakify/login/TemplateProps";
import { getKcClsx } from "keycloakify/login/lib/kcClsx";
import { useSetClassName } from "keycloakify/tools/useSetClassName";
import { useStylesAndScripts } from "keycloakify/login/Template.useStylesAndScripts";
import type { I18n } from "./i18n";
import type { KcContext } from "./KcContext";
import { useInitTemplate } from "keycloakify/login/useInitTemplate";
export default function Template(props: TemplateProps<KcContext, I18n>) {
const {
@ -45,7 +45,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
className: bodyClassName ?? kcClsx("kcBodyClass")
});
const { isReadyToRender } = useInitTemplate({ kcContext, doUseDefaultCss });
const { isReadyToRender } = useStylesAndScripts({ kcContext, doUseDefaultCss });
if (!isReadyToRender) {
return null;

53
src/login/useInitTemplate.ts → src/login/Template.useStylesAndScripts.ts
View File

@ -14,22 +14,18 @@ export type KcContextLike = {
currentLanguageTag: string;
};
scripts: string[];
authenticationSession?: {
authSessionId: string;
tabId: string;
};
};
assert<keyof KcContextLike extends keyof KcContext ? true : false>();
assert<KcContext extends KcContextLike ? true : false>();
export function useInitTemplate(params: {
export function useStylesAndScripts(params: {
kcContext: KcContextLike;
doUseDefaultCss: boolean;
}) {
const { kcContext, doUseDefaultCss } = params;
const { url, locale, scripts, authenticationSession } = kcContext;
const { url, locale, scripts } = kcContext;
useEffect(() => {
const { currentLanguageTag } = locale ?? {};
@ -59,33 +55,32 @@ export function useInitTemplate(params: {
const { insertScriptTags } = useInsertScriptTags({
componentOrHookName: "Template",
scriptTags: [
{
type: "importmap",
textContent: JSON.stringify({
imports: {
rfc4648: `${url.resourcesCommonPath}/node_modules/rfc4648/lib/rfc4648.js`
}
})
},
{
type: "module",
src: `${url.resourcesPath}/js/menu-button-links.js`
},
...(authenticationSession === undefined
? []
: [
{
type: "module",
textContent: [
`import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";`,
``,
`checkCookiesAndSetTimer(`,
` "${authenticationSession.authSessionId}",`,
` "${authenticationSession.tabId}",`,
` "${url.ssoLoginInOtherTabsUrl}"`,
`);`
].join("\n")
} as const
]),
...scripts.map(
script =>
({
type: "text/javascript",
src: script
}) as const
)
...scripts.map(src => ({
type: "text/javascript" as const,
src
})),
{
type: "module",
textContent: `
import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";
checkCookiesAndSetTimer(
"${url.ssoLoginInOtherTabsUrl}"
);
`
}
]
});

1
src/login/pages/LoginIdpLinkConfirmOverride.tsx
View File

@ -3,7 +3,6 @@ import type { PageProps } from "keycloakify/login/pages/PageProps";
import type { KcContext } from "../KcContext";
import type { I18n } from "../i18n";
// NOTE: Added with Keycloak 25
export default function LoginIdpLinkConfirmOverride(props: PageProps<Extract<KcContext, { pageId: "login-idp-link-confirm-override.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

87
src/login/pages/LoginPasskeysConditionalAuthenticate.tsx
View File

@ -1,33 +1,17 @@
import { useEffect, Fragment } from "react";
import { Fragment } from "react";
import { clsx } from "keycloakify/tools/clsx";
import type { PageProps } from "keycloakify/login/pages/PageProps";
import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
import { getKcClsx } from "keycloakify/login/lib/kcClsx";
import { assert } from "keycloakify/tools/assert";
import { useScript } from "keycloakify/login/pages/LoginPasskeysConditionalAuthenticate.useScript";
import type { KcContext } from "../KcContext";
import type { I18n } from "../i18n";
// NOTE: From Keycloak 25.0.4
export default function LoginPasskeysConditionalAuthenticate(
props: PageProps<Extract<KcContext, { pageId: "login-passkeys-conditional-authenticate.ftl" }>, I18n>
) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
const {
messagesPerField,
login,
url,
usernameHidden,
shouldDisplayAuthenticators,
authenticators,
registrationDisabled,
realm,
isUserIdentified,
challenge,
userVerification,
rpId,
createTimeout
} = kcContext;
const { messagesPerField, login, url, usernameHidden, shouldDisplayAuthenticators, authenticators, registrationDisabled, realm } = kcContext;
const { msg, msgStr, advancedMsg } = i18n;
@ -36,46 +20,9 @@ export default function LoginPasskeysConditionalAuthenticate(
classes
});
const { insertScriptTags } = useInsertScriptTags({
componentOrHookName: "LoginRecoveryAuthnCodeConfig",
scriptTags: [
{
type: "module",
textContent: `
import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
import { initAuthenticate } from "${url.resourcesPath}/js/passkeysConditionalAuth.js";
const authButtonId = "authenticateWebAuthnButton";
const authButton = document.getElementById('authenticateWebAuthnButton');
const input = {
isUserIdentified : ${isUserIdentified},
challenge : '${challenge}',
userVerification : '${userVerification}',
rpId : '${rpId}',
createTimeout : ${createTimeout},
errmsg : "${msgStr("webauthn-unsupported-browser-text")}"
};
authButton.addEventListener("click", () => {
authenticateByWebAuthn(input);
});
const args = {
isUserIdentified : ${isUserIdentified},
challenge : '${challenge}',
userVerification : '${userVerification}',
rpId : '${rpId}',
createTimeout : ${createTimeout},
errmsg : "${msgStr("passkey-unsupported-browser-text")}"
};
document.addEventListener("DOMContentLoaded", (event) => initAuthenticate(args));
`
}
]
});
useEffect(() => {
insertScriptTags();
}, []);
useScript({ authButtonId, kcContext, i18n });
return (
<Template
@ -213,29 +160,7 @@ export default function LoginPasskeysConditionalAuthenticate(
)}
<div id="kc-form-passkey-button" className={kcClsx("kcFormButtonsClass")} style={{ display: "none" }}>
<input
id="authenticateWebAuthnButton"
type="button"
onClick={() => {
assert("doAuthenticate" in window);
assert(typeof window.doAuthenticate === "function");
window.doAuthenticate(
[],
rpId,
challenge,
typeof isUserIdentified === "boolean" ? isUserIdentified : isUserIdentified === "true",
createTimeout,
userVerification,
msgStr("passkey-unsupported-browser-text")
);
}}
autoFocus
value={msgStr("passkey-doAuthenticate")}
className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
/>
</div>
<div id="kc-form-passkey-button" className={kcClsx("kcFormButtonsClass")} style={{ display: "none" }}>
<input
id="authenticateWebAuthnButton"
id={authButtonId}
type="button"
autoFocus
value={msgStr("passkey-doAuthenticate")}

67
src/login/pages/LoginPasskeysConditionalAuthenticate.useScript.tsx Normal file
View File

@ -0,0 +1,67 @@
import { useEffect } from "react";
import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
import { assert } from "keycloakify/tools/assert";
import { KcContext } from "keycloakify/login/KcContext/KcContext";
type KcContextLike = {
url: {
resourcesPath: string;
};
isUserIdentified: boolean | "true" | "false";
challenge: string;
userVerification: string;
rpId: string;
createTimeout: number;
};
assert<keyof KcContextLike extends keyof KcContext.LoginPasskeysConditionalAuthenticate ? true : false>();
assert<KcContext.LoginPasskeysConditionalAuthenticate extends KcContextLike ? true : false>();
type I18nLike = {
msgStr: (key: "webauthn-unsupported-browser-text" | "passkey-unsupported-browser-text") => string;
};
export function useScript(params: { authButtonId: string; kcContext: KcContextLike; i18n: I18nLike }) {
const { authButtonId, kcContext, i18n } = params;
const { url, isUserIdentified, challenge, userVerification, rpId, createTimeout } = kcContext;
const { msgStr } = i18n;
const { insertScriptTags } = useInsertScriptTags({
componentOrHookName: "LoginRecoveryAuthnCodeConfig",
scriptTags: [
{
type: "module",
textContent: `
import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
import { initAuthenticate } from "${url.resourcesPath}/js/passkeysConditionalAuth.js";
const authButton = document.getElementById(${JSON.stringify(authButtonId)});
const input = {
isUserIdentified : ${isUserIdentified},
challenge : '${challenge}',
userVerification : '${userVerification}',
rpId : '${rpId}',
createTimeout : ${createTimeout}
};
authButton.addEventListener("click", () => {
authenticateByWebAuthn({
...input,
errmsg : ${JSON.stringify(msgStr("webauthn-unsupported-browser-text"))}
});
});
initAuthenticate({
...input,
errmsg : ${JSON.stringify(msgStr("passkey-unsupported-browser-text"))}
});
`
}
]
});
useEffect(() => {
insertScriptTags();
}, []);
}

2
src/tools/useInsertScriptTags.ts
View File

@ -6,7 +6,7 @@ export type ScriptTag = ScriptTag.TextContent | ScriptTag.Src;
export namespace ScriptTag {
type Common = {
type: "text/javascript" | "module";
type: "text/javascript" | "module" | "importmap";
};
export type TextContent = Common & {