feat!: make the mfa screens do success redirection if the next array is empty (#851)

* feat!: make the mfa screens do success redirection if the next array is empty

* feat: self-review fixes

* docs: update example apps

* chore: bump version and size limit

Author: porcellus

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+### Breaking changes
+
+-   Changed `redirectToFactor` to accept an object instead of multiple arguments.
+-   Changed `redirectToFactorChooser` to accept an object instead of multiple arguments.
+-   Made MFA related screens do a success redirection if MFA is already completed and the `stepUp` query param is not set to `true`.
+    -   `redirectToFactorChooser` now accepts a `stepUp` option to set the `stepUp` query param.
+    -   `redirectToFactor` now accepts a `stepUp` option to set the `stepUp` query param.
+
 ## [0.45.1] - 2024-08-09
 
 ### Changes

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

@@ -514,9 +514,13 @@ export function DashboardHelper({ redirectOnLogout, ...props } = {}) {
             <a
                 className="goToFactorChooser"
                 onClick={() => {
-                    return MultiFactorAuth.redirectToFactorChooser(true, undefined, props.history);
+                    return MultiFactorAuth.redirectToFactorChooser({
+                        redirectBack: true,
+                        stepUp: true,
+                        navigate: props.history,
+                    });
                 }}>
-                MFA chooser
+                MFA chooser (step up)
             </a>
         </div>
     );

examples/for-tests/src/App.js

@@ -686,9 +686,13 @@ export function DashboardHelper({ redirectOnLogout, ...props } = {}) {
             <a
                 className="goToFactorChooser"
                 onClick={() => {
-                    return MultiFactorAuth.redirectToFactorChooser(true, undefined, props.history);
+                    return MultiFactorAuth.redirectToFactorChooser({
+                        redirectBack: true,
+                        stepUp: true,
+                        navigate: props.history,
+                    });
                 }}>
-                MFA chooser
+                MFA chooser (step up)
             </a>
         </div>
     );

examples/with-multifactorauth-phone-chooser/frontend/package.json

@@ -15,7 +15,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.2.1",
         "react-scripts": "5.0.1",
-        "supertokens-auth-react": "latest",
+        "supertokens-auth-react": "github:supertokens/supertokens-auth-react#feat/mfa_redirect",
         "supertokens-web-js": "latest",
         "typescript": "^4.8.2",
         "web-vitals": "^2.1.4"

examples/with-multifactorauth-phone-chooser/frontend/src/Home/CallAPIView.tsx

@@ -13,7 +13,12 @@ export default function CallAPIView() {
     }
 
     async function goToPhoneSetup() {
-        await MultiFactorAuth.redirectToFactor(MultiFactorAuth.FactorIds.OTP_PHONE, true, true, navigate);
+        await MultiFactorAuth.redirectToFactor({
+            factorId: MultiFactorAuth.FactorIds.OTP_PHONE,
+            forceSetup: true,
+            redirectBack: true,
+            navigate,
+        });
     }
 
     return (

examples/with-multifactorauth-phone-chooser/frontend/src/SelectPhone/index.tsx

@@ -16,10 +16,19 @@ export default function SelectPhone() {
             if (res.status === 200) {
                 const loadedInfo = await res.clone().json();
                 if (loadedInfo.user.phoneNumbers.length === 0) {
-                    await MultiFactorAuth.redirectToFactor(MultiFactorAuth.FactorIds.OTP_PHONE, true, false, nav);
+                    await MultiFactorAuth.redirectToFactor({
+                        factorId: MultiFactorAuth.FactorIds.OTP_PHONE,
+                        forceSetup: true,
+                        redirectBack: false,
+                        navigate: nav,
+                    });
                 } else if (loadedInfo.user.phoneNumbers.length === 1) {
                     await Passwordless.createCode({ phoneNumber: loadedInfo.user.phoneNumbers[0] });
-                    await MultiFactorAuth.redirectToFactor(MultiFactorAuth.FactorIds.OTP_PHONE, false, false, nav);
+                    await MultiFactorAuth.redirectToFactor({
+                        factorId: MultiFactorAuth.FactorIds.OTP_PHONE,
+                        redirectBack: false,
+                        navigate: nav,
+                    });
                 } else {
                     setUserInfo(loadedInfo);
                 }
@@ -65,12 +74,11 @@ export default function SelectPhone() {
                                                 hasOtherPhoneNumbers: true,
                                             },
                                         });
-                                        return MultiFactorAuth.redirectToFactor(
-                                            MultiFactorAuth.FactorIds.OTP_PHONE,
-                                            false,
-                                            false,
-                                            nav
-                                        );
+                                        return MultiFactorAuth.redirectToFactor({
+                                            factorId: MultiFactorAuth.FactorIds.OTP_PHONE,
+                                            redirectBack: false,
+                                            navigate: nav,
+                                        });
                                     }
                                 })
                                 .catch(setError);

examples/with-multifactorauth-recovery-codes/frontend/src/RecoveryCode/index.tsx

@@ -17,7 +17,12 @@ export default function RecoveryCode() {
         if (reset.data.status !== "OK") {
             setError("Recovery code not found");
         } else {
-            await MultiFactorAuth.redirectToFactor("totp", true, false, nav);
+            await MultiFactorAuth.redirectToFactor({
+                factorId: "totp",
+                forceSetup: true,
+                redirectBack: false,
+                navigate: nav,
+            });
         }
     }