Add basic tests, mocks and helpers for webauthn signup

Author: deepjyoti30-st

examples/for-tests/src/App.js

@@ -8,6 +8,7 @@ import Footer from "./Footer";
 import SuperTokens from "supertokens-auth-react";
 import EmailVerification from "supertokens-auth-react/recipe/emailverification";
 import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
+import Webauthn from "supertokens-auth-react/recipe/webauthn";
 import Passwordless from "supertokens-auth-react/recipe/passwordless";
 import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
 import Multitenancy from "supertokens-auth-react/recipe/multitenancy";
@@ -427,6 +428,9 @@ if (enabledRecipes.includes("emailpassword") || enabledRecipes.includes("thirdpa
 if (enabledRecipes.includes("passwordless") || enabledRecipes.includes("thirdpartypasswordless")) {
     recipeList = [getPasswordlessConfigs(testContext), ...recipeList];
 }
+if (enabledRecipes.includes("webauthn")) {
+    recipeList = [getWebauthnConfigs(), ...recipeList];
+}
 
 if (emailVerificationMode !== "OFF") {
     recipeList.push(getEmailVerificationConfigs(testContext));
@@ -1147,6 +1151,65 @@ function setIsNewUserToStorage(recipeName, isNewRecipeUser) {
     localStorage.setItem("isNewUserCheck", `${recipeName}-${isNewRecipeUser}`);
 }
 
+function getWebauthnConfigs() {
+    return Webauthn.init({
+        style: `          
+            [data-supertokens~=container] {
+                font-family: cursive;
+            }
+        `,
+        override: {
+            functions: (implementation) => {
+                const log = logWithPrefix(`ST_LOGS WEBAUTHN OVERRIDE`);
+
+                return {
+                    ...implementation,
+                    getRegisterOptions(...args) {
+                        log(`GET REGISTER OPTIONS`);
+                        return implementation.getRegisterOptions(...args);
+                    },
+                    registerCredentialWithSignUp(...args) {
+                        log(`GET REGISTER OPTIONS WITH SIGN UP`);
+
+                        // We are mocking the popup since it's not possible to
+                        // test the webauthn popup.
+                        return {
+                            status: "OK",
+                            user: {},
+                            fetchResponse: {},
+                        };
+                    },
+                };
+            },
+        },
+        preAPIHook: async (context) => {
+            if (localStorage.getItem(`SHOW_GENERAL_ERROR`)?.includes(context.action)) {
+                let errorFromStorage = localStorage.getItem("TRANSLATED_GENERAL_ERROR");
+
+                if (context.action === "EMAIL_EXISTS") {
+                    context.url += "&generalError=true";
+                } else {
+                    let jsonBody = JSON.parse(context.requestInit.body);
+                    jsonBody = {
+                        ...jsonBody,
+                        generalError: true,
+                        generalErrorMessage: errorFromStorage === null ? undefined : errorFromStorage,
+                    };
+                    context.requestInit.body = JSON.stringify(jsonBody);
+                }
+            }
+            console.log(`ST_LOGS WEBAUTHN PRE_API_HOOKS ${context.action}`);
+            return context;
+        },
+        getRedirectionURL: async (context) => {
+            console.log(`ST_LOGS WEBAUTHN GET_REDIRECTION_URL ${context.action}`);
+        },
+        onHandleEvent: async (context) => {
+            console.log(`ST_LOGS WEBAUTHN ON_HANDLE_EVENT ${context.action}`);
+        },
+    });
+}
+
 window.SuperTokens = SuperTokens;
 window.Session = Session;
 window.UserRoleClaim = UserRoles.UserRoleClaim;

examples/for-tests/src/AppWithReactDomRouter.js

@@ -4,6 +4,7 @@ import { ResetPasswordUsingToken } from "supertokens-auth-react/recipe/emailpass
 import { SessionAuth } from "supertokens-auth-react/recipe/session";
 import { getSuperTokensRoutesForReactRouterDom, AuthPage } from "supertokens-auth-react/ui";
 import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
+import { WebauthnPreBuiltUI } from "supertokens-auth-react/recipe/webauthn/prebuiltui";
 import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui";
 import { EmailVerificationPreBuiltUI } from "supertokens-auth-react/recipe/emailverification/prebuiltui";
 import { ThirdPartyPreBuiltUI, SignInAndUpCallback } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
@@ -42,6 +43,9 @@ function AppWithReactDomRouter(props) {
     if (enabledRecipes.some((r) => r.endsWith("passwordless"))) {
         recipePreBuiltUIList.push(PasswordlessPreBuiltUI);
     }
+    if (enabledRecipes.some((r) => r.endsWith("webauthn"))) {
+        recipePreBuiltUIList.push(WebauthnPreBuiltUI);
+    }
     if (emailVerificationMode !== "OFF") {
         recipePreBuiltUIList.push(EmailVerificationPreBuiltUI);
     }

examples/for-tests/src/AppWithoutRouter.js

@@ -5,6 +5,7 @@ import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpass
 import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui";
 import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
 import { EmailVerificationPreBuiltUI } from "supertokens-auth-react/recipe/emailverification/prebuiltui";
+import { WebauthnPreBuiltUI } from "supertokens-auth-react/recipe/webauthn/prebuiltui";
 import { getEnabledRecipes } from "./testContext";
 
 function AppWithoutRouter() {
@@ -32,6 +33,9 @@ function Routing() {
     if (enabledRecipes.some((r) => r.endsWith("passwordless"))) {
         recipePreBuiltUIList.push(PasswordlessPreBuiltUI);
     }
+    if (enabledRecipes.some((r) => r.endsWith("webauthn"))) {
+        recipePreBuiltUIList.push(WebauthnPreBuiltUI);
+    }
 
     if (emailVerificationMode !== "OFF") {
         recipePreBuiltUIList.push(EmailVerificationPreBuiltUI);

examples/for-tests/src/testContext.js

@@ -41,6 +41,7 @@ export function getEnabledRecipes() {
             "thirdpartyemailpassword",
             "passwordless",
             "thirdpartypasswordless",
+            "webauthn",
         ];
     } else if (testContext.clientRecipeListForDynamicLogin) {
         enabledRecipes = JSON.parse(testContext.clientRecipeListForDynamicLogin);
@@ -51,6 +52,7 @@ export function getEnabledRecipes() {
             "thirdpartyemailpassword",
             "passwordless",
             "thirdpartypasswordless",
+            "webauthn",
         ];
     } else {
         if (testContext.authRecipe === "both") {