Use webauthnId instead of identifierValue (#541)

Author: incorbador

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);

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 {

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);

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<Props> = ({ showFallback = false }) => {
   const { config, navigateToScreen, setCurrentIdentifier, setFlags, flags, loadedMs, fallback } = useLoginProcess();
   const { sharedConfig, getConnectService } = useShared();
@@ -181,7 +188,7 @@ const LoginInitScreen: FC<Props> = ({ 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<Props> = ({ showFallback = false }) => {
       await config.onComplete(
         connectLoginFinishToComplete(res.val),
         getConnectService().encodeClientState(),
-        res.val.passkeyOperation.identifierValue,
+        connectLoginFinishToWebauthnId(res.val),
       );
     } catch {
       void getConnectService().recordEventLoginErrorUntyped();

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);