feat: Webauthn support

examples/for-tests-react-16/src/App.js

@@ -15,6 +15,8 @@ import UserRoles from "supertokens-auth-react/recipe/userroles";
 import Multitenancy from "supertokens-auth-react/recipe/multitenancy";
 import MultiFactorAuth from "supertokens-auth-react/recipe/multifactorauth";
 import TOTP from "supertokens-auth-react/recipe/totp";
+import STGeneralError from "supertokens-web-js/lib/build/error";
+import Webauthn from "supertokens-auth-react/recipe/webauthn";
 
 import axios from "axios";
 import { useSessionContext } from "supertokens-auth-react/recipe/session";
@@ -260,6 +262,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(testContext), ...recipeList];
+}
 if (emailVerificationMode !== "OFF") {
     recipeList.push(getEmailVerificationConfigs(testContext));
 }
@@ -885,6 +890,146 @@ function getThirdPartyConfigs({ staticProviderList, disableDefaultUI, thirdParty
     });
 }
 
+function getWebauthnConfigs({ throwWebauthnError, webauthnErrorStatus }) {
+    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);
+                    },
+                    async getSignInOptions(...args) {
+                        log(`GET SIGN IN OPTIONS`);
+                        return implementation.getSignInOptions(...args);
+                    },
+                    async authenticateCredential(...args) {
+                        log("AUTHENTICATE CREDENTIAL");
+
+                        // We will make a network call to get the registration options
+                        // for sign up.
+                        // Then we will use the registrationOptions and the passed args
+                        // to create and assert a credential.
+
+                        const email = `${Math.random().toString().slice(2)}@supertokens.com`;
+                        const registrationOptions = await implementation.getRegisterOptions({
+                            userContext: {},
+                            email,
+                        });
+                        const signInOptions = args[0].authenticationOptions;
+
+                        const response = await fetch(`${getApiDomain()}/test/webauthn/create-and-assert-credential`, {
+                            method: "POST",
+                            body: JSON.stringify({
+                                registerOptionsResponse: registrationOptions,
+                                signInOptionsResponse: signInOptions,
+                                rpId: "localhost",
+                                rpName: "localhost",
+                                origin: "http://localhost:3031",
+                            }),
+                            headers: {
+                                "Content-Type": "application/json",
+                            },
+                        });
+
+                        if (!response.ok) {
+                            throw new STGeneralError("TEST ERROR: CREATING CREDENTIAL FAILED");
+                        }
+
+                        const { attestation, assertion } = (await response.json()).credential;
+
+                        // Sign up the user using the attestation;
+                        await implementation.signUp({
+                            webauthnGeneratedOptionsId: registrationOptions.webauthnGeneratedOptionsId,
+                            credential: attestation,
+                            userContext: {},
+                        });
+
+                        return { authenticationResponse: assertion, status: "OK" };
+                    },
+                    async signIn(...args) {
+                        log(`SIGN IN`);
+                        return implementation.signIn(...args);
+                    },
+                    registerCredentialWithSignUp(...args) {
+                        log(`GET REGISTER OPTIONS WITH SIGN UP`);
+
+                        // We will throw an error if it is asked for.
+                        if (throwWebauthnError) {
+                            throw new STGeneralError("TEST ERROR");
+                        }
+
+                        // Return error status if the user passed that.
+                        if (webauthnErrorStatus) {
+                            return {
+                                status: webauthnErrorStatus,
+                            };
+                        }
+
+                        // We are mocking the popup since it's not possible to
+                        // test the webauthn popup.
+                        return {
+                            status: "OK",
+                            user: {},
+                            fetchResponse: {},
+                        };
+                    },
+                    authenticateCredentialWithSignIn(...args) {
+                        log(`AUTHENTICATE CREDENTIAL WITH SIGN IN`);
+
+                        // We will throw an error if it is asked for.
+                        if (throwWebauthnError) {
+                            throw new STGeneralError("TEST ERROR");
+                        }
+
+                        // Return error status if the user passed that.
+                        if (webauthnErrorStatus) {
+                            return {
+                                status: webauthnErrorStatus,
+                            };
+                        }
+
+                        return implementation.authenticateCredentialWithSignIn(...args);
+                    },
+                };
+            },
+        },
+        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}`);
+        },
+    });
+}
+
 function setIsNewUserToStorage(recipeName, isNewRecipeUser) {
     localStorage.setItem("isNewUserCheck", `${recipeName}-${isNewRecipeUser}`);
 }

examples/for-tests-react-16/src/AppWithReactDomRouter.js

@@ -12,6 +12,7 @@ import { MultiFactorAuthPreBuiltUI } from "supertokens-auth-react/recipe/multifa
 import { TOTPPreBuiltUI } from "supertokens-auth-react/recipe/totp/prebuiltui";
 import { AccessDeniedScreen } from "supertokens-auth-react/recipe/session/prebuiltui";
 import { getEnabledRecipes, getTestContext } from "./testContext";
+import { WebauthnPreBuiltUI } from "supertokens-auth-react/recipe/webauthn/prebuiltui";
 
 function AppWithReactDomRouter(props) {
     const context = getTestContext();
@@ -28,6 +29,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-react-16/src/AppWithReactDomRouterV5.js

@@ -11,6 +11,7 @@ import { AccessDeniedScreen } from "supertokens-auth-react/recipe/session/prebui
 import { MultiFactorAuthPreBuiltUI } from "supertokens-auth-react/recipe/multifactorauth/prebuiltui";
 import { TOTPPreBuiltUI } from "supertokens-auth-react/recipe/totp/prebuiltui";
 import { getEnabledRecipes, getTestContext } from "./testContext";
+import { WebauthnPreBuiltUI } from "supertokens-auth-react/recipe/webauthn/prebuiltui";
 
 function AppWithReactDomRouter(props) {
     const context = getTestContext();
@@ -27,6 +28,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-react-16/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-react-16/src/testContext.js

@@ -24,6 +24,8 @@ export function getTestContext() {
         signoutOnSessionNotExists: localStorage.getItem("signoutOnSessionNotExists") === "true",
         disableRedirectionAfterSuccessfulSignInUp:
             localStorage.getItem("disableRedirectionAfterSuccessfulSignInUp") === "true",
+        throwWebauthnError: localStorage.getItem("throwWebauthnError") === "true",
+        webauthnErrorStatus: localStorage.getItem("webauthnErrorStatus") || undefined,
     };
     return ret;
 }