feat: totp recipe for MFA

CHANGELOG.md

@@ -54,6 +54,7 @@ To use this you'll need compatible versions:
 -   Removed an `ErrorBoundary` wrapping all our feature components to make sure all errors are properly catchable by the app
 -   Added a `footer` prop to `EmailOrPhoneForm`, `EmailForm` and `PhoneForm` which is used to override the default sign in/up footers in case the component is for MFA
 -   The passwordless and thirdpartypasswordless sign in/up screens now respect the first configuration (defined in the `MultiFactorAuth` recipe or in the tenant information) when selecting the available contact methods.
+-   Added TOTP recipe. For more details please check our guide [here](TODO)
 -   Fixed a font loading issue, that caused apps using the default (Rubik) font to appear with the incorrect font weights
 -   Some default styling has changed related to how fonts/font-weights are applied
 

examples/for-tests/src/App.js

@@ -15,6 +15,7 @@ import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyema
 import ThirdPartyPasswordless from "supertokens-auth-react/recipe/thirdpartypasswordless";
 import UserRoles from "supertokens-auth-react/recipe/userroles";
 import MultiFactorAuth from "supertokens-auth-react/recipe/multifactorauth";
+import TOTP from "supertokens-auth-react/recipe/totp";
 
 import axios from "axios";
 import { useSessionContext } from "supertokens-auth-react/recipe/session";
@@ -332,7 +333,100 @@ const customFields = [
 
 const testContext = getTestContext();
 
+let storedTOTPDevices = window.localStorage.getItem("totpDevices");
+let totpDevices = storedTOTPDevices ? JSON.parse(storedTOTPDevices) : [];
+
+function removeTOTPDevice(deviceName) {
+    const origLength = totpDevices.length;
+    totpDevices = totpDevices.filter((d) => d.deviceName !== deviceName);
+    window.localStorage.setItem("totpDevices", JSON.stringify(totpDevices));
+    return totpDevices.length !== origLength;
+}
+
+function addTOTPDevice(deviceName) {
+    totpDevices.push({
+        deviceName,
+        verified: false,
+    });
+    window.localStorage.setItem("totpDevices", JSON.stringify(totpDevices));
+}
+
+function verifyTOTPDevice(deviceName) {
+    totpDevices = totpDevices.filter((d) => d.deviceName !== deviceName);
+    totpDevices.push({
+        deviceName,
+        verified: true,
+    });
+    window.localStorage.setItem("totpDevices", JSON.stringify(totpDevices));
+}
+let tryCount = 0;
+
+setInterval(() => (tryCount = tryCount > 0 ? tryCount - 1 : 0), 30000);
+window.resetTOTP = () => {
+    totpDevices = [];
+    window.localStorage.setItem("totpDevices", JSON.stringify(totpDevices));
+    tryCount = 0;
+};
 let recipeList = [
+    TOTP.init({
+        override: {
+            functions: (oI) => ({
+                ...oI,
+                listDevices: async () => ({ devices: totpDevices, status: "OK" }),
+                removeDevice: async ({ deviceName }) => {
+                    return { status: "OK", didDeviceExist: removeTOTPDevice(deviceName) };
+                },
+                createDevice: async ({ deviceName }) => {
+                    deviceName = deviceName ?? `totp-${Date.now()}`;
+                    addTOTPDevice(deviceName);
+                    return {
+                        status: "OK",
+                        deviceName: deviceName,
+                        issuerName: "st",
+                        qrCodeString: deviceName,
+                        secret: `secret-${deviceName}`,
+                    };
+                },
+                verifyCode: async ({ totp }) => {
+                    const dev = totpDevices.find((d) => d.deviceName.endsWith(totp) && d.verified);
+                    if (dev) {
+                        await fetch("http://localhost:8082/completeFactor", {
+                            method: "POST",
+                            body: JSON.stringify({ id: "totp" }),
+                            headers: new Headers([["Content-Type", "application/json"]]),
+                        });
+                        return { status: "OK" };
+                    }
+
+                    if (++tryCount > 3) {
+                        return { status: "LIMIT_REACHED_ERROR", retryAfterMs: 30000 };
+                    }
+                    return { status: "INVALID_TOTP_ERROR" };
+                },
+                verifyDevice: async ({ deviceName, totp }) => {
+                    const dev = totpDevices.find((d) => d.deviceName === deviceName);
+                    if (!dev) {
+                        return { status: "UNKNOWN_DEVICE_ERROR" };
+                    }
+                    if (deviceName.endsWith(totp)) {
+                        const wasAlreadyVerified = dev.verified;
+                        verifyTOTPDevice(deviceName);
+                        await fetch("http://localhost:8082/completeFactor", {
+                            method: "POST",
+                            body: JSON.stringify({ id: "totp" }),
+                            headers: new Headers([["Content-Type", "application/json"]]),
+                        });
+                        return { status: "OK", wasAlreadyVerified };
+                    }
+
+                    if (++tryCount > 3) {
+                        return { status: "LIMIT_REACHED_ERROR", retryAfterMs: 30000 };
+                    }
+                    return { status: "INVALID_TOTP_ERROR" };
+                },
+            }),
+        },
+    }),
     MultiFactorAuth.init({
         firstFactors: testContext.firstFactors,
     }),
@@ -645,7 +739,13 @@ export function DashboardHelper({ redirectOnLogout, ...props } = {}) {
             </div>
             <div className="session-context-userId">session context userID: {sessionContext.userId}</div>
             <pre className="invalidClaims">{JSON.stringify(sessionContext.invalidClaims, undefined, 2)}</pre>
-            <a onClick={() => MultiFactorAuth.redirectToFactorChooser(true, props.history)}>MFA chooser</a>
+            <a
+                className="goToFactorChooser"
+                onClick={() => {
+                    return MultiFactorAuth.redirectToFactorChooser(true, props.history);
+                }}>
+                MFA chooser
+            </a>
         </div>
     );
 }

examples/for-tests/src/AppWithReactDomRouter.js

@@ -16,6 +16,7 @@ import { EmailVerificationPreBuiltUI } from "supertokens-auth-react/recipe/email
 import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
 import { AccessDeniedScreen } from "supertokens-auth-react/recipe/session/prebuiltui";
 import { MultiFactorAuthPreBuiltUI } from "supertokens-auth-react/recipe/multifactorauth/prebuiltui";
+import { TOTPPreBuiltUI } from "supertokens-auth-react/recipe/totp/prebuiltui";
 import { BaseComponent, Home, Contact, Dashboard, DashboardNoAuthRequired } from "./App";
 import { getEnabledRecipes } from "./testContext";
 
@@ -35,7 +36,7 @@ function AppWithReactDomRouter(props) {
     const emailVerificationMode = window.localStorage.getItem("mode") || "OFF";
     const websiteBasePath = window.localStorage.getItem("websiteBasePath") || undefined;
 
-    let recipePreBuiltUIList = [MultiFactorAuthPreBuiltUI];
+    let recipePreBuiltUIList = [MultiFactorAuthPreBuiltUI, TOTPPreBuiltUI];
     if (enabledRecipes.includes("emailpassword")) {
         recipePreBuiltUIList.push(EmailPasswordPreBuiltUI);
     }

examples/for-tests/src/testContext.js

@@ -9,6 +9,7 @@ export function getTestContext() {
         thirdPartyRedirectURL: localStorage.getItem("thirdPartyRedirectURL"),
         authRecipe: window.localStorage.getItem("authRecipe") || "emailpassword",
         usesDynamicLoginMethods: localStorage.getItem("usesDynamicLoginMethods") === "true",
+        enableAllRecipes: localStorage.getItem("enableAllRecipes") === "true",
         clientRecipeListForDynamicLogin: localStorage.getItem("clientRecipeListForDynamicLogin"),
         mockLoginMethodsForDynamicLogin: localStorage.getItem("mockLoginMethodsForDynamicLogin"),
         staticProviderList: localStorage.getItem("staticProviderList"),
@@ -28,18 +29,24 @@ export function getEnabledRecipes() {
 
     let enabledRecipes = [];
 
-    if (testContext.usesDynamicLoginMethods) {
-        if (testContext.clientRecipeListForDynamicLogin) {
-            enabledRecipes = JSON.parse(testContext.clientRecipeListForDynamicLogin);
-        } else {
-            enabledRecipes = [
-                "emailpassword",
-                "thirdparty",
-                "thirdpartyemailpassword",
-                "passwordless",
-                "thirdpartypasswordless",
-            ];
-        }
+    if (testContext.enableAllRecipes) {
+        enabledRecipes = [
+            "emailpassword",
+            "thirdparty",
+            "thirdpartyemailpassword",
+            "passwordless",
+            "thirdpartypasswordless",
+        ];
+    } else if (testContext.clientRecipeListForDynamicLogin) {
+        enabledRecipes = JSON.parse(testContext.clientRecipeListForDynamicLogin);
+    } else if (testContext.usesDynamicLoginMethods) {
+        enabledRecipes = [
+            "emailpassword",
+            "thirdparty",
+            "thirdpartyemailpassword",
+            "passwordless",
+            "thirdpartypasswordless",
+        ];
     } else {
         if (testContext.authRecipe === "both") {
             enabledRecipes.push("emailpassword", "thirdparty");