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
Download Patch File Download Diff File Expand all files Collapse all files

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();
}, []);
}