Merge remote-tracking branch 'origin/feat/mfa/base' into feat/mfa/tests

examples/for-tests/src/App.js

@@ -368,9 +368,7 @@ window.resetTOTP = () => {
     tryCount = 0;
 };
 let recipeList = [
-    TOTP.init({
-        override: {},
-    }),
+    TOTP.init(),
     MultiFactorAuth.init({
         firstFactors: testContext.firstFactors,
     }),

lib/ts/recipe/multifactorauth/recipe.tsx

@@ -115,7 +115,7 @@ export default class MultiFactorAuth extends RecipeModule<
 
     static getInstanceOrThrow(): MultiFactorAuth {
         if (MultiFactorAuth.instance === undefined) {
-            let error = "No instance of EmailVerification found. Make sure to call the EmailVerification.init method.";
+            let error = "No instance of MultiFactorAuth found. Make sure to call the MultiFactorAuth.init method.";
 
             // eslint-disable-next-line supertokens-auth-react/no-direct-window-object
             if (typeof window === "undefined") {

lib/ts/recipe/totp/components/features/mfa/index.tsx

@@ -220,7 +220,7 @@ export function useChildProps(
 
     return useMemo(() => {
         return {
-            onShowSecretClick: () => {
+            onShowSecretClicked: () => {
                 dispatch({ type: "showSecret" });
             },
             onBackButtonClicked: async () => {

lib/ts/recipe/totp/components/themes/mfa/index.tsx

@@ -89,7 +89,7 @@ const TOTPMFATheme: React.FC<TOTPMFAProps & { activeScreen: TOTPMFAScreens }> =
                                 {...commonProps}
                                 deviceInfo={featureState.deviceInfo!}
                                 showSecret={featureState.showSecret}
-                                onShowSecretClick={props.onShowSecretClick}
+                                onShowSecretClicked={props.onShowSecretClicked}
                             />
                         )}
                         {featureState.error !== undefined && (

lib/ts/recipe/totp/components/themes/mfa/retryButton.tsx

@@ -19,66 +19,59 @@
 
 import React, { useCallback, useEffect, useState } from "react";
 
-import { withOverride } from "../../../../../components/componentOverride/withOverride";
 import { useTranslation } from "../../../../../translation/translationContext";
 
-export const RetryButton = withOverride(
-    "TOTPRetryButton",
-    function TOTPRetryButton({
-        nextRetryAt,
-        onClick,
-    }: {
-        nextRetryAt: number;
-        onClick: () => void;
-    }): JSX.Element | null {
-        const t = useTranslation();
+export const RetryButton: React.FC<{
+    nextRetryAt: number;
+    onClick: () => void;
+}> = ({ nextRetryAt, onClick }) => {
+    const t = useTranslation();
 
-        const getTimeLeft = useCallback(() => {
-            const timeLeft = nextRetryAt - Date.now();
-            return timeLeft < 0 ? undefined : Math.ceil(timeLeft / 1000);
-        }, [nextRetryAt]);
+    const getTimeLeft = useCallback(() => {
+        const timeLeft = nextRetryAt - Date.now();
+        return timeLeft < 0 ? undefined : Math.ceil(timeLeft / 1000);
+    }, [nextRetryAt]);
 
-        const [secsUntilRetry, setSecsUntilRetry] = useState<number | undefined>(getTimeLeft());
+    const [secsUntilRetry, setSecsUntilRetry] = useState<number | undefined>(getTimeLeft());
 
-        useEffect(() => {
-            // This runs every time the loginAttemptInfo updates, so after every resend
-            const interval = setInterval(() => {
-                const timeLeft = getTimeLeft();
+    useEffect(() => {
+        // This runs every time the loginAttemptInfo updates, so after every resend
+        const interval = setInterval(() => {
+            const timeLeft = getTimeLeft();
 
-                if (timeLeft === undefined) {
-                    clearInterval(interval);
-                }
+            if (timeLeft === undefined) {
+                clearInterval(interval);
+            }
 
-                setSecsUntilRetry(timeLeft);
-            }, 500);
+            setSecsUntilRetry(timeLeft);
+        }, 500);
 
-            return () => {
-                // This can safely run twice
-                clearInterval(interval);
-            };
-        }, [getTimeLeft, setSecsUntilRetry]);
+        return () => {
+            // This can safely run twice
+            clearInterval(interval);
+        };
+    }, [getTimeLeft, setSecsUntilRetry]);
 
-        return (
-            <button
-                type="button"
-                disabled={secsUntilRetry !== undefined}
-                onClick={onClick}
-                data-supertokens="button retryCodeBtn">
-                {secsUntilRetry !== undefined ? (
-                    <React.Fragment>
-                        {t("TOTP_MFA_BLOCKED_TIMER_START")}
-                        <strong>
-                            {Math.floor(secsUntilRetry / 60)
-                                .toString()
-                                .padStart(2, "0")}
-                            :{(secsUntilRetry % 60).toString().padStart(2, "0")}
-                        </strong>
-                        {t("TOTP_MFA_BLOCKED_TIMER_END")}
-                    </React.Fragment>
-                ) : (
-                    t("TOTP_MFA_BLOCKED_RETRY")
-                )}
-            </button>
-        );
-    }
-);
+    return (
+        <button
+            type="button"
+            disabled={secsUntilRetry !== undefined}
+            onClick={onClick}
+            data-supertokens="button retryCodeBtn">
+            {secsUntilRetry !== undefined ? (
+                <React.Fragment>
+                    {t("TOTP_MFA_BLOCKED_TIMER_START")}
+                    <strong>
+                        {Math.floor(secsUntilRetry / 60)
+                            .toString()
+                            .padStart(2, "0")}
+                        :{(secsUntilRetry % 60).toString().padStart(2, "0")}
+                    </strong>
+                    {t("TOTP_MFA_BLOCKED_TIMER_END")}
+                </React.Fragment>
+            ) : (
+                t("TOTP_MFA_BLOCKED_RETRY")
+            )}
+        </button>
+    );
+};

lib/ts/recipe/totp/components/themes/mfa/totpDeviceInfoSection.tsx

@@ -27,7 +27,7 @@ export const DeviceInfoSection = withOverride(
         props: TOTPMFACommonProps & {
             deviceInfo: DeviceInfo;
             showSecret: boolean;
-            onShowSecretClick: () => void;
+            onShowSecretClicked: () => void;
         }
     ): JSX.Element {
         const t = useTranslation();
@@ -40,7 +40,7 @@ export const DeviceInfoSection = withOverride(
                         {t("TOTP_SHOW_SECRET_START")}
                         <button
                             type="button"
-                            onClick={props.onShowSecretClick}
+                            onClick={props.onShowSecretClicked}
                             data-supertokens="link linkButton showTOTPSecretBtn">
                             {t("TOTP_SHOW_SECRET_LINK")}
                         </button>

lib/ts/recipe/totp/recipe.tsx

@@ -120,7 +120,7 @@ export default class TOTP extends RecipeModule<
 
     static getInstanceOrThrow(): TOTP {
         if (TOTP.instance === undefined) {
-            let error = "No instance of EmailVerification found. Make sure to call the EmailVerification.init method.";
+            let error = "No instance of TOTP found. Make sure to call the TOTP.init method.";
 
             // eslint-disable-next-line supertokens-auth-react/no-direct-window-object
             if (typeof window === "undefined") {

lib/ts/recipe/totp/types.ts

@@ -109,7 +109,7 @@ export type TOTPMFAProps = {
     recipeImplementation: RecipeInterface;
     config: NormalisedConfig;
     onSuccess: () => void;
-    onShowSecretClick: () => void;
+    onShowSecretClicked: () => void;
     onBackButtonClicked: () => void;
     onRetryClicked: () => void;
     onFactorChooserButtonClicked: () => void;