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

WebauthnAuthenticate: refactor authentication flow

Browse Source 
Lots of weird syntax here, and we were using `useCallback` rather than
`useConstCallback`.
This commit is contained in:
Mary Strodl
2022-10-06 14:25:04 -04:00
parent 4b3ae58ea7
commit 9e63183f4b
1 changed files with 53 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/lib/components/WebauthnAuthenticate.tsx
View File

@ -1,10 +1,11 @@
import React, { useCallback, useRef, useState, memo } from "react";
import React, { useRef, useState, memo } from "react";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useCssAndCx } from "../tools/useCssAndCx";
import type { I18n, MessageKeyBase } from "../i18n";
import { base64url } from "rfc4648";
import { useConstCallback } from "powerhooks/useConstCallback";
const WebauthnAuthenticate = memo(
({
@ -23,13 +24,10 @@ const WebauthnAuthenticate = memo(
const { cx } = useCssAndCx();
const webAuthnAuthenticate = useCallback(() => {
const webAuthnAuthenticate = useConstCallback(async () => {
if (!isUserIdentified) {
return;
}
checkAllowCredentials();
function checkAllowCredentials() {
const allowCredentials = authenticators.authenticators.map(
authenticator =>
({
@ -37,9 +35,6 @@ const WebauthnAuthenticate = memo(
type: "public-key"
} as PublicKeyCredentialDescriptor)
);
doAuthenticate(allowCredentials);
}
function doAuthenticate(allowCredentials: PublicKeyCredentialDescriptor[]) {
// Check if WebAuthn is supported by this browser
if (!window.PublicKeyCredential) {
setError(msgStr("webauthn-unsupported-browser-text"));
@ -64,16 +59,15 @@ const WebauthnAuthenticate = memo(
publicKey.userVerification = userVerification;
}
navigator.credentials
.get({ publicKey })
.then(resultRaw => {
try {
const resultRaw = await navigator.credentials.get({ publicKey });
if (!resultRaw || resultRaw.type != "public-key") return;
const result = resultRaw as PublicKeyCredential;
if (!("authenticatorData" in result.response)) return;
const response = result.response as AuthenticatorAssertionResponse;
let clientDataJSON = response.clientDataJSON;
let authenticatorData = response.authenticatorData;
let signature = response.signature;
const clientDataJSON = response.clientDataJSON;
const authenticatorData = response.authenticatorData;
const signature = response.signature;
setClientDataJSON(base64url.stringify(new Uint8Array(clientDataJSON), { pad: false }));
setAuthenticatorData(base64url.stringify(new Uint8Array(authenticatorData), { pad: false }));
@ -81,18 +75,16 @@ const WebauthnAuthenticate = memo(
setCredentialId(result.id);
setUserHandle(base64url.stringify(new Uint8Array(response.userHandle!), { pad: false }));
submitForm();
})
.catch(err => {
setError(err);
} catch (err) {
setError(String(err));
submitForm();
});
}
}, [kcContext]);
});
const webAuthForm = useRef<HTMLFormElement>(null);
const submitForm = useCallback(() => {
const submitForm = useConstCallback(() => {
webAuthForm.current!.submit();
}, [webAuthForm.current]);
});
const [clientDataJSON, setClientDataJSON] = useState("");
const [authenticatorData, setAuthenticatorData] = useState("");