feat(mfa)!: add mfa and totp recipes

.babelrc

@@ -1,11 +1,13 @@
 {
-    "presets": [["@babel/preset-env", {}, "@babel/preset-react"]],
-    "plugins": [
+    "presets": [
+        "@babel/preset-env",
         [
-            "@babel/plugin-transform-react-jsx",
+            "@babel/preset-typescript",
             {
-                "pragmaFrag": "React.Fragment"
+                "allExtensions": true,
+                "isTSX": true
             }
-        ]
+        ],
+        ["@babel/preset-react", { "runtime": "automatic" }]
     ]
 }

.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+// import '@storybook/addon-console';
+
+const config: StorybookConfig = {
+    stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [
+        "@storybook/addon-essentials",
+        "@storybook/addon-actions",
+        "@storybook/addon-links",
+        "@storybook/addon-interactions",
+        "@storybook/addon-designs",
+        // "@storybook/addon-actions/register",
+    ],
+    framework: {
+        name: "@storybook/react-webpack5",
+        options: {},
+    },
+    docs: {
+        autodocs: false,
+    },
+    env: {
+        REACT_APP_TEST_MODE: "testing",
+        TEST_MODE: "testing",
+    },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+    parameters: {
+        actions: { argTypesRegex: "^(w+.)*on[A-Z].*" },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+                boolean: /(is|show|loaded)/i,
+            },
+        },
+    },
+};
+
+export default preview;

CHANGELOG.md

@@ -5,6 +5,60 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 
+## [0.37.0] - 2023-12-XX
+
+### Overview
+
+#### Introducing MFA
+
+With this release, we are introducing MultiFactorAuth and TOTP, this will let you:
+
+-   require (2FA or MFA) during sign in
+-   make use of our TOTP
+
+Check our [guide](https://supertokens.com/docs/thirdpartyemailpassword/common-customizations/multi-factor-auth/overview) for more information.
+
+To use this you'll need compatible versions:
+
+-   Core>=8.0.0
+-   supertokens-node>=17.0.0 (support is pending in other backend SDKs)
+-   supertokens-website>=17.0.3
+-   supertokens-web-js>=0.9.0
+-   supertokens-auth-react>=0.36.0
+
+### Changes
+
+-   Added support for FDI 1.19 (Node SDK>= 17.0.0), but keeping support FDI version 1.17 and 1.18 (node >= 15.0.0, golang>=0.13, python>=0.15.0)
+-   Added `firstFactors` into the return type of `getLoginMethods`
+-   Added the `MultiFactorAuth` recipe
+-   Updated how we select which login UI to show to take the `firstFactors` config value into account (defined in the `MultiFactorAuth` recipe or in the tenant information)
+-   Refactored/renamed some styling options (`resetPasswordHeaderTitle` -> `headerTitle withBackButton`)
+-   Added a `useShadowDom` prop to the `AccessDeniedScreen`
+-   Added an `error` prop to the `AccessDeniedScreen` that can be used to describe the reason access is denied.
+-   Added new MFA related components to Passwordless
+    -   Added new prop `mfaFeature` to recipe config
+        -   `disableDefaultUI`: can be used to disable paths: `${websiteBasePath}/mfa/otp-phone`, `${websiteBasePath}/mfa/otp-email`
+        -   `style`: is applied on top of normal sign in/up styles on the MFA paths
+    -   New embeddable components:
+        -   `MfaOtpPhone` (by default handling path `${websiteBasePath}/mfa/otp-phone`)
+        -   `MfaOtpEmail` (by default handling path `${websiteBasePath}/mfa/otp-email`)
+    -   New overrideable components:
+        -   `PasswordlessMFAHeader_Override`
+        -   `PasswordlessMFAFooter_Override`
+        -   `PasswordlessMFAOTPHeader_Override`
+        -   `PasswordlessMFAOTPFooter_Override`
+    -   Please note, that during MFA we re-use the existing overrideable comps for the form section:
+        -   `PasswordlessEmailForm_Override`
+        -   `PasswordlessPhoneForm_Override`
+        -   `PasswordlessEmailOrPhoneForm_Override`
+-   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
+-   Changed how `headerSubtitle` is styled in components: `EmailPasswordResetPasswordEmail`, `EmailPasswordSubmitNewPassword`, `EmailPasswordSignInHeader`, `EmailPasswordSignUpHeader`
+
 ## [0.36.1] - 2023-12-20
 
 ### Fixes

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

@@ -15,6 +15,8 @@ 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 Multitenancy from "supertokens-auth-react/recipe/multitenancy";
+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";
@@ -178,6 +180,7 @@ const formFields = [
 const testContext = getTestContext();
 
 let recipeList = [
+    TOTP.init(),
     Multitenancy.init({
         override: {
             functions: (oI) => ({
@@ -221,7 +224,7 @@ let recipeList = [
                         return implementation.doesSessionExist(...args);
                     },
                     getAccessTokenPayloadSecurely(...args) {
-                        log(`GET_JWT_PAYLOAD_SECURELY`);
+                        // log(`GET_JWT_PAYLOAD_SECURELY`);
                         return implementation.getAccessTokenPayloadSecurely(...args);
                     },
                     getUserId(...args) {
@@ -270,6 +273,15 @@ if (enabledRecipes.includes("thirdpartypasswordless")) {
 if (emailVerificationMode !== "OFF") {
     recipeList.push(getEmailVerificationConfigs(testContext));
 }
+
+if (testContext.enableMFA) {
+    recipeList.push(
+        MultiFactorAuth.init({
+            firstFactors: testContext.firstFactors,
+        })
+    );
+}
+
 SuperTokens.init({
     usesDynamicLoginMethods: testContext.usesDynamicLoginMethods,
     clientType: testContext.clientType,
@@ -491,6 +503,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
+                className="goToFactorChooser"
+                onClick={() => {
+                    return MultiFactorAuth.redirectToFactorChooser(true, undefined, props.history);
+                }}>
+                MFA chooser
+            </a>
         </div>
     );
 }
@@ -509,6 +528,7 @@ function SessionInfoTable({ sessionInfo }) {
 
 function getEmailVerificationConfigs({ disableDefaultUI }) {
     return EmailVerification.init({
+        useShadowDom,
         disableDefaultUI,
         sendVerifyEmailScreen: {
             style: theme,
@@ -769,6 +789,10 @@ function getThirdPartyPasswordlessConfigs({ staticProviderList, disableDefaultUI
             disableDefaultUI,
             style: theme.style,
         },
+        mfaFeature: {
+            disableDefaultUI,
+            style: theme,
+        },
     });
 }
 
@@ -850,6 +874,10 @@ function getPasswordlessConfigs({ disableDefaultUI }) {
             disableDefaultUI,
             style: theme.style,
         },
+        mfaFeature: {
+            disableDefaultUI,
+            style: theme,
+        },
     });
 }
 

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

@@ -15,14 +15,17 @@ import { EmailVerificationPreBuiltUI } from "supertokens-auth-react/recipe/email
 import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
 import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui";
 import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
+import { MultiFactorAuthPreBuiltUI } from "supertokens-auth-react/recipe/multifactorauth/prebuiltui";
+import { TOTPPreBuiltUI } from "supertokens-auth-react/recipe/totp/prebuiltui";
 import { AccessDeniedScreen } from "supertokens-auth-react/recipe/session/prebuiltui";
-import { getEnabledRecipes } from "./testContext";
+import { getEnabledRecipes, getTestContext } from "./testContext";
 
 function AppWithReactDomRouter(props) {
+    const context = getTestContext();
     const enabledRecipes = getEnabledRecipes();
     const emailVerificationMode = window.localStorage.getItem("mode") || "OFF";
 
-    let recipePreBuiltUIList = [];
+    let recipePreBuiltUIList = [TOTPPreBuiltUI];
     if (enabledRecipes.includes("emailpassword")) {
         recipePreBuiltUIList.push(EmailPasswordPreBuiltUI);
     }
@@ -42,6 +45,11 @@ function AppWithReactDomRouter(props) {
     if (emailVerificationMode !== "OFF") {
         recipePreBuiltUIList.push(EmailVerificationPreBuiltUI);
     }
+
+    if (context.enableMFA) {
+        recipePreBuiltUIList.push(MultiFactorAuthPreBuiltUI);
+    }
+
     /**
      * For user context tests we add this query param so the additional routes
      * dont interfere with other tests

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

@@ -11,13 +11,16 @@ 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 { AccessDeniedScreen } from "supertokens-auth-react/recipe/session/prebuiltui";
-import { getEnabledRecipes } from "./testContext";
+import { MultiFactorAuthPreBuiltUI } from "supertokens-auth-react/recipe/multifactorauth/prebuiltui";
+import { TOTPPreBuiltUI } from "supertokens-auth-react/recipe/totp/prebuiltui";
+import { getEnabledRecipes, getTestContext } from "./testContext";
 
 function AppWithReactDomRouter(props) {
+    const context = getTestContext();
     const enabledRecipes = getEnabledRecipes();
     const emailVerificationMode = window.localStorage.getItem("mode") || "OFF";
 
-    let recipePreBuiltUIList = [];
+    let recipePreBuiltUIList = [TOTPPreBuiltUI];
     if (enabledRecipes.includes("emailpassword")) {
         recipePreBuiltUIList.push(EmailPasswordPreBuiltUI);
     }
@@ -38,6 +41,10 @@ function AppWithReactDomRouter(props) {
         recipePreBuiltUIList.push(EmailVerificationPreBuiltUI);
     }
 
+    if (context.enableMFA) {
+        recipePreBuiltUIList.push(MultiFactorAuthPreBuiltUI);
+    }
+
     const websiteBasePath = window.localStorage.getItem("websiteBasePath") || undefined;
 
     const [claimValidators, setClaimValidators] = useState(undefined);

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

@@ -9,11 +9,17 @@ 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"),
         mockTenantId: localStorage.getItem("mockTenantId"),
         clientType: localStorage.getItem("clientType") || undefined,
+        firstFactors:
+            localStorage.getItem("firstFactors") !== null
+                ? localStorage.getItem("firstFactors").split(", ")
+                : undefined,
+        enableMFA: localStorage.getItem("enableMFA") === "true",
         disableRedirectionAfterSuccessfulSignInUp:
             localStorage.getItem("disableRedirectionAfterSuccessfulSignInUp") === "true",
     };
@@ -25,18 +31,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");