fix: Prevent passkey registration if already setup

Author: bcbogdan

lib/ts/recipe/webauthn/components/features/mfa/index.tsx

@@ -63,6 +63,7 @@ export const useFeatureReducer = (): [WebAuthnMFAState, React.Dispatch<WebAuthnM
                         deviceSupported: action.deviceSupported,
                         email: action.email,
                         showBackButton: action.showBackButton,
+                        canRegisterPasskey: action.canRegisterPasskey,
                     };
                 default:
                     return oldState;
@@ -71,6 +72,7 @@ export const useFeatureReducer = (): [WebAuthnMFAState, React.Dispatch<WebAuthnM
         {
             error: undefined,
             deviceSupported: false,
+            canRegisterPasskey: false,
             loaded: false,
             showBackButton: true,
             email: undefined,
@@ -364,6 +366,7 @@ function useOnLoad(
             const mfaInfoEmails = mfaInfo.emails[FactorIds.WEBAUTHN];
             const email = mfaInfoEmails ? mfaInfoEmails[0] : undefined;
 
+            const canRegisterPasskey = !mfaInfo.factors.alreadySetup.includes(FactorIds.WEBAUTHN);
             const browserSupportsWebauthnResponse = await props.recipe.webJSRecipe.doesBrowserSupportWebAuthn({
                 userContext: userContext,
             });
@@ -373,6 +376,7 @@ function useOnLoad(
 
             dispatch({
                 type: "load",
+                canRegisterPasskey,
                 error,
                 showBackButton,
                 email,

lib/ts/recipe/webauthn/components/themes/mfa/index.tsx

@@ -43,17 +43,22 @@ export function MFATheme(props: WebAuthnMFAProps): JSX.Element {
     const t = useTranslation();
 
     const onRegisterPasskeyClick = React.useCallback(() => {
+        if (!props.featureState.canRegisterPasskey) return;
         if (props.featureState.email) {
             setActiveScreen(MFAScreens.SignUpConfirmation);
         } else {
             setActiveScreen(MFAScreens.SignUp);
         }
-    }, [props.featureState.email]);
+    }, [props.featureState.email, props.featureState.canRegisterPasskey]);
 
-    const onSignUpContinue = React.useCallback((email: string) => {
-        setActiveScreen(MFAScreens.SignUpConfirmation);
-        setSignUpEmail(email);
-    }, []);
+    const onSignUpContinue = React.useCallback(
+        (email: string) => {
+            if (!props.featureState.canRegisterPasskey) return;
+            setActiveScreen(MFAScreens.SignUpConfirmation);
+            setSignUpEmail(email);
+        },
+        [props.featureState.canRegisterPasskey]
+    );
 
     const clearError = React.useCallback(() => {
         props.dispatch({ type: "setError", error: undefined });
@@ -67,8 +72,9 @@ export function MFATheme(props: WebAuthnMFAProps): JSX.Element {
     );
 
     const onClickSignUpBackButton = React.useCallback(() => {
+        if (!props.featureState.canRegisterPasskey) return;
         setActiveScreen(MFAScreens.SignIn);
-    }, []);
+    }, [props.featureState.canRegisterPasskey]);
 
     const onClickSignUpConfirmationBackButton = React.useCallback(() => {
         if (props.featureState.email) {
@@ -101,6 +107,7 @@ export function MFATheme(props: WebAuthnMFAProps): JSX.Element {
                 {activeScreen === MFAScreens.SignIn ? (
                     <WebauthnMFASignIn
                         onBackButtonClicked={props.featureState.showBackButton ? onBackButtonClicked : undefined}
+                        canRegisterPasskey={props.featureState.canRegisterPasskey}
                         onSignIn={onSignIn}
                         error={props.featureState.error}
                         onRegisterPasskeyClick={onRegisterPasskeyClick}

lib/ts/recipe/webauthn/components/themes/mfa/signIn.tsx

@@ -12,6 +12,7 @@ export type MFASignInProps = {
     onBackButtonClicked?: () => void;
     onSignIn: () => Promise<void>;
     onRegisterPasskeyClick: () => void;
+    canRegisterPasskey: boolean;
     error: string | undefined;
     deviceSupported: boolean;
 };
@@ -41,6 +42,7 @@ export const WebauthnMFASignIn = withOverride(
                 ) : (
                     <div data-supertokens="headerTitle webauthn-mfa">{t("WEBAUTHN_MFA_SIGN_IN_HEADER_TITLE")}</div>
                 )}
+
                 <div data-supertokens="headerSubtitle secondaryText">{t("WEBAUTHN_MFA_SIGN_IN_HEADER_SUBTITLE")}</div>
                 <Button
                     disabled={!props.deviceSupported || isLoading}
@@ -52,17 +54,21 @@ export const WebauthnMFASignIn = withOverride(
                     icon={PasskeyIcon}
                 />
                 {props.error !== undefined && <GeneralError error={props.error} />}
-                <div data-supertokens="passkeyMfaSignInDivider">
-                    <div data-supertokens="divider" />
-                    <span>or</span>
-                    <div data-supertokens="divider" />
-                </div>
-                <div data-supertokens="headerSubtitle secondaryText">
-                    <span data-supertokens="link" onClick={props.onRegisterPasskeyClick}>
-                        {t("WEBAUTHN_MFA_REGISTER_PASSKEY_LINK")}
-                    </span>
-                    {t("WEBAUTHN_MFA_REGISTER_PASSKEY_SUBTITLE")}
-                </div>
+                {props.canRegisterPasskey && (
+                    <>
+                        <div data-supertokens="passkeyMfaSignInDivider">
+                            <div data-supertokens="divider" />
+                            <span>or</span>
+                            <div data-supertokens="divider" />
+                        </div>
+                        <div data-supertokens="headerSubtitle secondaryText">
+                            <span data-supertokens="link" onClick={props.onRegisterPasskeyClick}>
+                                {t("WEBAUTHN_MFA_REGISTER_PASSKEY_LINK")}
+                            </span>
+                            {t("WEBAUTHN_MFA_REGISTER_PASSKEY_SUBTITLE")}
+                        </div>
+                    </>
+                )}
                 {!props.deviceSupported && <PasskeyNotSupportedError />}
             </Fragment>
         );

lib/ts/recipe/webauthn/components/themes/translations.ts

@@ -55,7 +55,7 @@ export const defaultTranslationsWebauthn = {
         // WebAuthn MFA translations
         WEBAUTHN_MFA_SIGN_IN_HEADER_TITLE: "Use a Passkey",
         WEBAUTHN_MFA_SIGN_IN_HEADER_SUBTITLE:
-            "To finish signing in, click the button and follow the instructions from your browser.",
+            "To finish signing in, click the button and follow the browser instructions.",
         WEBAUTHN_MFA_DIVIDER: "or",
         WEBAUTHN_MFA_REGISTER_PASSKEY_SUBTITLE: "Set up a new authentication method to use for future logins.",
         WEBAUTHN_MFA_REGISTER_PASSKEY_LINK: "Register a passkey",

lib/ts/recipe/webauthn/types.ts

@@ -271,6 +271,7 @@ export type WebAuthnMFAAction =
           error: string | undefined;
           email: string | undefined;
           showBackButton: boolean;
+          canRegisterPasskey: boolean;
       };
 
 type WebAuthnMFAInitialState = {
@@ -279,6 +280,7 @@ type WebAuthnMFAInitialState = {
     accessDenied: boolean;
     deviceSupported: boolean;
     showBackButton: boolean;
+    canRegisterPasskey: false;
     email: undefined;
 };
 
@@ -288,6 +290,7 @@ type WebAuthnMFALoadedState = {
     accessDenied: boolean;
     deviceSupported: boolean;
     showBackButton: boolean;
+    canRegisterPasskey: boolean;
     email: string | undefined;
 };