From 1c2d2c99e54eeae53a28bb9ce20daca30d178d77 Mon Sep 17 00:00:00 2001 From: Martin Kellner Date: Fri, 5 Sep 2025 15:23:53 +0200 Subject: [PATCH] Use webauthnId instead of identifierValue --- .../src/components/login/LoginErrorScreenHard.tsx | 8 ++++++-- .../src/components/login/LoginErrorScreenSoft.tsx | 4 ++-- .../src/components/login/LoginHybridScreen.tsx | 4 ++-- .../src/components/login/LoginInitScreen.tsx | 13 ++++++++++--- .../components/login/LoginPasskeyReLoginScreen.tsx | 8 ++++++-- 5 files changed, 26 insertions(+), 11 deletions(-) diff --git a/packages/connect-react/src/components/login/LoginErrorScreenHard.tsx b/packages/connect-react/src/components/login/LoginErrorScreenHard.tsx index 30227ed1..8d871531 100644 --- a/packages/connect-react/src/components/login/LoginErrorScreenHard.tsx +++ b/packages/connect-react/src/components/login/LoginErrorScreenHard.tsx @@ -8,7 +8,11 @@ import useShared from '../../hooks/useShared'; import { LoginScreenType } from '../../types/screenTypes'; import { getLoginErrorMessage, LoginSituationCode } from '../../types/situations'; import LoginErrorHard from './base/LoginErrorHard'; -import { type CboApiFallbackOperationError, connectLoginFinishToComplete } from './LoginInitScreen'; +import { + type CboApiFallbackOperationError, + connectLoginFinishToComplete, + connectLoginFinishToWebauthnId, +} from './LoginInitScreen'; type Props = { previousAssertionOptions: string; @@ -64,7 +68,7 @@ const LoginErrorScreenHard = ({ previousAssertionOptions }: Props) => { await config.onComplete( connectLoginFinishToComplete(resFinish.val), getConnectService().encodeClientState(), - resFinish.val.passkeyOperation.identifierValue, + connectLoginFinishToWebauthnId(resFinish.val), ); } catch { return handleSituation(LoginSituationCode.CtApiNotAvailablePostAuthenticator); diff --git a/packages/connect-react/src/components/login/LoginErrorScreenSoft.tsx b/packages/connect-react/src/components/login/LoginErrorScreenSoft.tsx index f0d67d66..310267a5 100644 --- a/packages/connect-react/src/components/login/LoginErrorScreenSoft.tsx +++ b/packages/connect-react/src/components/login/LoginErrorScreenSoft.tsx @@ -9,7 +9,7 @@ import { LoginScreenType } from '../../types/screenTypes'; import { getLoginErrorMessage, LoginSituationCode } from '../../types/situations'; import LoginErrorSoft from './base/LoginErrorSoft'; import type { CboApiFallbackOperationError } from './LoginInitScreen'; -import { connectLoginFinishToComplete } from './LoginInitScreen'; +import { connectLoginFinishToComplete, connectLoginFinishToWebauthnId } from './LoginInitScreen'; type Props = { previousAssertionOptions: string; @@ -59,7 +59,7 @@ const LoginErrorScreenSoft = ({ previousAssertionOptions }: Props) => { await config.onComplete( connectLoginFinishToComplete(resFinish.val), getConnectService().encodeClientState(), - resFinish.val.passkeyOperation.identifierValue, + connectLoginFinishToWebauthnId(resFinish.val), ); setLoading(false); } catch { diff --git a/packages/connect-react/src/components/login/LoginHybridScreen.tsx b/packages/connect-react/src/components/login/LoginHybridScreen.tsx index 2f59dcbd..445e90b6 100644 --- a/packages/connect-react/src/components/login/LoginHybridScreen.tsx +++ b/packages/connect-react/src/components/login/LoginHybridScreen.tsx @@ -9,7 +9,7 @@ import useShared from '../../hooks/useShared'; import { LoginScreenType } from '../../types/screenTypes'; import { getLoginErrorMessage, LoginSituationCode } from '../../types/situations'; import LoginHybrid from './base/LoginHybrid'; -import { connectLoginFinishToComplete } from './LoginInitScreen'; +import { connectLoginFinishToComplete, connectLoginFinishToWebauthnId } from './LoginInitScreen'; const LoginHybridScreen = (resStart: ConnectLoginStartRsp) => { const { config, navigateToScreen, currentIdentifier, fallback } = useLoginProcess(); @@ -35,7 +35,7 @@ const LoginHybridScreen = (resStart: ConnectLoginStartRsp) => { await config.onComplete( connectLoginFinishToComplete(res.val), getConnectService().encodeClientState(), - res.val.passkeyOperation.identifierValue, + connectLoginFinishToWebauthnId(res.val), ); } catch { return handleSituation(LoginSituationCode.CtApiNotAvailablePostAuthenticator); diff --git a/packages/connect-react/src/components/login/LoginInitScreen.tsx b/packages/connect-react/src/components/login/LoginInitScreen.tsx index 9a98bc15..b757e4fc 100644 --- a/packages/connect-react/src/components/login/LoginInitScreen.tsx +++ b/packages/connect-react/src/components/login/LoginInitScreen.tsx @@ -1,5 +1,5 @@ import type { ConnectError } from '@corbado/web-core'; -import { ConnectErrorType, PasskeyLoginSource } from '@corbado/web-core'; +import { base64decode, ConnectErrorType, PasskeyLoginSource } from '@corbado/web-core'; import type { ConnectLoginFinishRsp } from '@corbado/web-core/dist/api/v2'; import log from 'loglevel'; import type { FC } from 'react'; @@ -39,6 +39,13 @@ export const connectLoginFinishToComplete = (v: ConnectLoginFinishRsp): string = return v.signedPasskeyData; }; +export const connectLoginFinishToWebauthnId = (v: ConnectLoginFinishRsp): string => { + const parts = v.signedPasskeyData.split('.'); + const base64decoded = JSON.parse(base64decode(parts[1])); + + return base64decoded['webauthnId']; +}; + const LoginInitScreen: FC = ({ showFallback = false }) => { const { config, navigateToScreen, setCurrentIdentifier, setFlags, flags, loadedMs, fallback } = useLoginProcess(); const { sharedConfig, getConnectService } = useShared(); @@ -181,7 +188,7 @@ const LoginInitScreen: FC = ({ showFallback = false }) => { await config.onComplete( connectLoginFinishToComplete(res.val), getConnectService().encodeClientState(), - res.val.passkeyOperation.identifierValue, + connectLoginFinishToWebauthnId(res.val), ); } catch { return handleSituation(LoginSituationCode.CtApiNotAvailablePostAuthenticator); @@ -235,7 +242,7 @@ const LoginInitScreen: FC = ({ showFallback = false }) => { await config.onComplete( connectLoginFinishToComplete(res.val), getConnectService().encodeClientState(), - res.val.passkeyOperation.identifierValue, + connectLoginFinishToWebauthnId(res.val), ); } catch { void getConnectService().recordEventLoginErrorUntyped(); diff --git a/packages/connect-react/src/components/login/LoginPasskeyReLoginScreen.tsx b/packages/connect-react/src/components/login/LoginPasskeyReLoginScreen.tsx index ec628896..74db94aa 100644 --- a/packages/connect-react/src/components/login/LoginPasskeyReLoginScreen.tsx +++ b/packages/connect-react/src/components/login/LoginPasskeyReLoginScreen.tsx @@ -8,7 +8,11 @@ import useShared from '../../hooks/useShared'; import { LoginScreenType } from '../../types/screenTypes'; import { getLoginErrorMessage, LoginSituationCode } from '../../types/situations'; import LoginOneTap from './base/LoginOneTap'; -import { type CboApiFallbackOperationError, connectLoginFinishToComplete } from './LoginInitScreen'; +import { + type CboApiFallbackOperationError, + connectLoginFinishToComplete, + connectLoginFinishToWebauthnId, +} from './LoginInitScreen'; export const LoginPasskeyReLoginScreen = () => { const { config, navigateToScreen, setCurrentIdentifier, currentIdentifier, loadedMs, fallback } = useLoginProcess(); @@ -56,7 +60,7 @@ export const LoginPasskeyReLoginScreen = () => { await config.onComplete( connectLoginFinishToComplete(resFinish.val), getConnectService().encodeClientState(), - resFinish.val.passkeyOperation.identifierValue, + connectLoginFinishToWebauthnId(resFinish.val), ); } catch { return handleSituation(LoginSituationCode.CtApiNotAvailablePostAuthenticator);