feat: add the mfa recipe and basic support

CHANGELOG.md

@@ -5,6 +5,39 @@ 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.36.0] - 2023-11-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.
+-   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
+
 ## [0.35.9] - 2023-12-06
 
 -   Fixes ThirdPartyEmailPassword rendering sign in/up switcher even with disabled email password. Instead it'll now render `SignInAndUpHeader_Override` in this case (overrideable as `ThirdPartySignInAndUpHeader`). Overriding `ThirdPartyEmailPasswordHeader_Override` should still cover all cases.

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

@@ -178,6 +178,9 @@ const formFields = [
 const testContext = getTestContext();
 
 let recipeList = [
+    MultiFactorAuth.init({
+        firstFactors: testContext.firstFactors,
+    }),
     Multitenancy.init({
         override: {
             functions: (oI) => ({
@@ -491,6 +494,7 @@ 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>
         </div>
     );
 }

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

@@ -15,14 +15,15 @@ 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 { AccessDeniedScreen } from "supertokens-auth-react/recipe/session/prebuiltui";
 import { getEnabledRecipes } from "./testContext";
 
 function AppWithReactDomRouter(props) {
     const enabledRecipes = getEnabledRecipes();
     const emailVerificationMode = window.localStorage.getItem("mode") || "OFF";
 
-    let recipePreBuiltUIList = [];
+    let recipePreBuiltUIList = [MultiFactorAuthPreBuiltUI];
     if (enabledRecipes.includes("emailpassword")) {
         recipePreBuiltUIList.push(EmailPasswordPreBuiltUI);
     }

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

@@ -14,6 +14,7 @@ export function getTestContext() {
         staticProviderList: localStorage.getItem("staticProviderList"),
         mockTenantId: localStorage.getItem("mockTenantId"),
         clientType: localStorage.getItem("clientType") || undefined,
+        firstFactors: localStorage.getItem("firstFactors")?.split(", "),
     };
     return ret;
 }

examples/for-tests/src/App.js

@@ -14,6 +14,7 @@ import Multitenancy from "supertokens-auth-react/recipe/multitenancy";
 import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";
 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 axios from "axios";
 import { useSessionContext } from "supertokens-auth-react/recipe/session";
@@ -332,6 +333,9 @@ const customFields = [
 const testContext = getTestContext();
 
 let recipeList = [
+    MultiFactorAuth.init({
+        firstFactors: testContext.firstFactors,
+    }),
     Multitenancy.init({
         override: {
             functions: (oI) => ({
@@ -641,6 +645,7 @@ 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>
         </div>
     );
 }

examples/for-tests/src/AppWithReactDomRouter.js

@@ -15,6 +15,7 @@ import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordle
 import { EmailVerificationPreBuiltUI } from "supertokens-auth-react/recipe/emailverification/prebuiltui";
 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 { BaseComponent, Home, Contact, Dashboard, DashboardNoAuthRequired } from "./App";
 import { getEnabledRecipes } from "./testContext";
 
@@ -34,7 +35,7 @@ function AppWithReactDomRouter(props) {
     const emailVerificationMode = window.localStorage.getItem("mode") || "OFF";
     const websiteBasePath = window.localStorage.getItem("websiteBasePath") || undefined;
 
-    let recipePreBuiltUIList = [];
+    let recipePreBuiltUIList = [MultiFactorAuthPreBuiltUI];
     if (enabledRecipes.includes("emailpassword")) {
         recipePreBuiltUIList.push(EmailPasswordPreBuiltUI);
     }

examples/for-tests/src/testContext.js

@@ -14,6 +14,7 @@ export function getTestContext() {
         staticProviderList: localStorage.getItem("staticProviderList"),
         mockTenantId: localStorage.getItem("mockTenantId"),
         clientType: localStorage.getItem("clientType") || undefined,
+        firstFactors: localStorage.getItem("firstFactors")?.split(", "),
         formFieldType: {
             signIn: localStorage.getItem("SIGNIN_SETTING_TYPE"),
             signUp: localStorage.getItem("SIGNUP_SETTING_TYPE"),

frontendDriverInterfaceSupported.json

@@ -1,4 +1,4 @@
 {
     "_comment": "contains a list of frontend-backend interface versions that this package supports",
-    "versions": ["1.17", "1.18"]
+    "versions": ["1.17", "1.18", "1.19"]
 }