test: Add e2e tests

Author: bcbogdan

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+-   Add `webauthn` as a secondary factor in MFA
+
 ## [0.49.1] - 2025-03-27
 
 -   Fixed a type issue making the WebauthnPreBuitlUI not produce a type error when added to the prebuiltUIList

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

@@ -343,9 +343,16 @@ function useOnLoad(
                         accessDenied: true,
                         error: "SOMETHING_WENT_WRONG_ERROR_RELOAD",
                     });
+                    return;
                 }
             }
 
+            const alreadySetup = mfaInfo.factors.alreadySetup.includes(FactorIds.WEBAUTHN);
+            if (alreadySetup) {
+                dispatch({ type: "setError", accessDenied: true, error: "SOMETHING_WENT_WRONG_ERROR_RELOAD" });
+                return;
+            }
+
             // If the next array only has a single option, it means the we were redirected here
             // automatically during the sign in process. In that case, anywhere the back button
             // could go would redirect back here, making it useless.
@@ -357,16 +364,19 @@ function useOnLoad(
             const mfaInfoEmails = mfaInfo.emails[FactorIds.WEBAUTHN];
             const email = mfaInfoEmails ? mfaInfoEmails[0] : undefined;
 
-            const browserSupportsWebauthn = await props.recipe.webJSRecipe.doesBrowserSupportWebAuthn({
+            const browserSupportsWebauthnResponse = await props.recipe.webJSRecipe.doesBrowserSupportWebAuthn({
                 userContext: userContext,
             });
+            const browserSupportsWebauthn =
+                browserSupportsWebauthnResponse.status === "OK" &&
+                browserSupportsWebauthnResponse?.browserSupportsWebauthn;
 
             dispatch({
                 type: "load",
                 error,
                 showBackButton,
                 email,
-                deviceSupported: browserSupportsWebauthn.status === "OK",
+                deviceSupported: browserSupportsWebauthn,
             });
         },
         [dispatch, recipeImplementation, props.recipe, userContext]

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

@@ -12,4 +12,3 @@ export const WebauthnMFALoadingScreen = withOverride("WebauthnMFALoadingScreen",
         </div>
     );
 });
-

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

@@ -39,7 +39,7 @@ export const WebauthnMFASignIn = withOverride(
                         </span>
                     </div>
                 ) : (
-                    <div data-supertokens="headerTitle ebauthn-mfa">{t("WEBAUTHN_MFA_SIGN_IN_HEADER_TITLE")}</div>
+                    <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
@@ -67,4 +67,4 @@ export const WebauthnMFASignIn = withOverride(
             </Fragment>
         );
     }
-);
+);

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

@@ -99,4 +99,4 @@ export const WebauthnMFASignUp = withOverride(
             </Fragment>
         );
     }
-);
+);

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

@@ -57,4 +57,4 @@ export const WebauthnMFASignUpConfirmation = withOverride(
             </Fragment>
         );
     }
-);
+);

package.json

@@ -101,7 +101,7 @@
     "peerDependencies": {
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0",
-        "supertokens-web-js": "github:supertokens/supertokens-web-js#feat/webauthn-mfa"
+        "supertokens-web-js": "^0.15"
     },
     "scripts": {
         "init": "bash ./init.sh",

test/end-to-end/mfa.chooserscreen.test.js

@@ -24,6 +24,7 @@ import {
     screenshotOnFailure,
     getFactorChooserOptions,
     isMFASupported,
+    isWebauthnSupported,
     expectErrorThrown,
     setupBrowser,
     backendHook,