feat: self-review fixes

CHANGELOG.md

@@ -5,6 +5,37 @@ 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 MultiFactorAuthentication 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.
+
 ## [0.35.5] - 2023-10-06
 
 ### Changes

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

@@ -485,9 +485,6 @@ export function DashboardHelper({ redirectOnLogout, ...props } = {}) {
             <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 onClick={() => MultiFactorAuth.redirectToFactor("totp", true, props.history)}>TOTP</a>
-            <a onClick={() => MultiFactorAuth.redirectToFactor("otp-email", true, props.history)}>OTP-Email</a>
-            <a onClick={() => MultiFactorAuth.redirectToFactor("otp-phone", true, props.history)}>OTP-Phone</a>
         </div>
     );
 }

examples/for-tests/src/testContext.js

@@ -24,7 +24,7 @@ export function getEnabledRecipes() {
 
     let enabledRecipes = [];
 
-    if (true) {
+    if (testContext.usesDynamicLoginMethods) {
         if (testContext.clientRecipeListForDynamicLogin) {
             enabledRecipes = JSON.parse(testContext.clientRecipeListForDynamicLogin);
         } else {

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"]
 }

lib/ts/recipe/multitenancy/types.ts

@@ -41,7 +41,7 @@ export type GetLoginMethodsResponseNormalized = {
             name: string;
         }[];
     };
-    firstFactors: string[];
+    firstFactors?: string[];
 };
 
 export type ComponentOverrideMap = {

lib/ts/recipe/recipeRouter/index.tsx

@@ -144,7 +144,7 @@ export abstract class RecipeRouter {
             return chooseComponentBasedOnFirstFactors(dynamicLoginMethods.firstFactors, routeComponents);
         }
 
-        // TODO: do we even need the else branch? (maybe for backwards comp.)
+        // We may get here if the app is using an older BE that doesn't support MFA
         const enabledRecipeCount = Object.keys(dynamicLoginMethods).filter(
             (key) => (dynamicLoginMethods as any)[key].enabled
         ).length;

lib/ts/recipe/thirdpartyemailpassword/components/themes/signInAndUp/index.tsx

@@ -56,17 +56,18 @@ const SignInAndUpTheme: React.FC<ThirdPartyEmailPasswordSignInAndUpThemeProps> =
     let emailPasswordEnabled: boolean = props.emailPasswordRecipe !== undefined;
 
     if (usesDynamicLoginMethods) {
-        thirdPartyEnabled = thirdPartyEnabled && loginMethods!.firstFactors.includes("thirdparty") && hasProviders;
+        thirdPartyEnabled =
+            (loginMethods!.firstFactors === undefined
+                ? loginMethods!.thirdparty.enabled
+                : loginMethods!.firstFactors.includes("thirdparty")) && hasProviders;
         emailPasswordEnabled =
-            emailPasswordEnabled &&
-            loginMethods!.firstFactors.includes("emailpassword") &&
-            props.emailPasswordRecipe !== undefined;
+            (loginMethods!.firstFactors === undefined
+                ? loginMethods!.emailpassword.enabled
+                : loginMethods!.firstFactors.includes("emailpassword")) && props.emailPasswordRecipe !== undefined;
     } else if (mfa !== undefined) {
-        thirdPartyEnabled = thirdPartyEnabled && mfa.isFirstFactorEnabledOnClient("thirdparty") && hasProviders;
+        thirdPartyEnabled = mfa.isFirstFactorEnabledOnClient("thirdparty") && hasProviders;
         emailPasswordEnabled =
-            emailPasswordEnabled &&
-            mfa.isFirstFactorEnabledOnClient("emailpassword") &&
-            props.emailPasswordRecipe !== undefined;
+            mfa.isFirstFactorEnabledOnClient("emailpassword") && props.emailPasswordRecipe !== undefined;
     }
 
     if (thirdPartyEnabled === false && emailPasswordEnabled === false) {

lib/ts/recipe/thirdpartypasswordless/components/themes/signInUp/index.tsx

@@ -65,9 +65,14 @@ const SignInUpTheme: React.FC<ThirdPartyPasswordlessSignInAndUpThemePropsWithAct
     let passwordlessEnabled: boolean = props.passwordlessRecipe !== undefined;
 
     if (usesDynamicLoginMethods) {
-        thirdPartyEnabled = thirdPartyEnabled && loginMethods!.firstFactors.includes("thirdparty") && hasProviders;
+        thirdPartyEnabled =
+            (loginMethods!.firstFactors === undefined
+                ? loginMethods!.thirdparty.enabled
+                : loginMethods!.firstFactors.includes("thirdparty")) && hasProviders;
         passwordlessEnabled =
-            passwordlessEnabled && passwordlessFirstFactors.some((id) => loginMethods!.firstFactors.includes(id));
+            loginMethods!.firstFactors === undefined
+                ? loginMethods!.passwordless.enabled
+                : passwordlessFirstFactors.some((id) => loginMethods!.firstFactors!.includes(id));
     } else if (mfa !== undefined) {
         thirdPartyEnabled = thirdPartyEnabled && mfa.isFirstFactorEnabledOnClient("thirdparty");
         passwordlessEnabled =

lib/ts/version.ts

@@ -12,4 +12,4 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
-export const package_version = "0.35.5";
+export const package_version = "0.36.0";

package.json

@@ -1,6 +1,6 @@
 {
     "name": "supertokens-auth-react",
-    "version": "0.35.5",
+    "version": "0.36.0",
     "description": "ReactJS SDK that provides login functionality with SuperTokens.",
     "main": "./index.js",
     "engines": {

webJsInterfaceSupported.json

@@ -1,4 +1,4 @@
 {
     "_comment": "contains the web js interface version that this package supports",
-    "version": "0.7"
+    "version": "0.8"
 }