fix: use navigate fn to redirect to reset pw page in ep+pwless combo (#863)

Author: porcellus

CHANGELOG.md

@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [0.48.0] - 2024-10-07
 
+### Fixes
+
+-   Fixed an issue where the `AuthPage` was using full-page redirects to navigate to the password reset page if both emailpassword and passwordless were enabled.
+
 ### Changes
 
 -   Added the `OAuth2Provider` recipe

lib/build/passwordlessprebuiltui.js

@@ -233,6 +233,7 @@ export function useChildProps(
             recipeImplementation: recipeImplementation,
             config: recipe.config,
             validatePhoneNumber: recipe.config.validatePhoneNumber ?? defaultPhoneNumberValidator,
+            navigate,
         };
     }, [
         error,
@@ -242,6 +243,7 @@ export function useChildProps(
         isPhoneNumber,
         showPasswordField,
         showContinueWithPasswordlessLink,
+        navigate,
     ]);
 }
 

lib/build/recipe/passwordless/types.d.ts

@@ -59,10 +59,13 @@ export const EPComboEmailForm = withOverride(
                         <Label value={"PWLESS_COMBO_PASSWORD_LABEL"} data-supertokens="passwordInputLabel" />
                         <a
                             onClick={() =>
-                                EmailPassword.getInstanceOrThrow().redirect({
-                                    action: "RESET_PASSWORD",
-                                    tenantIdFromQueryParams: getTenantIdFromQueryParams(),
-                                })
+                                EmailPassword.getInstanceOrThrow().redirect(
+                                    {
+                                        action: "RESET_PASSWORD",
+                                        tenantIdFromQueryParams: getTenantIdFromQueryParams(),
+                                    },
+                                    props.navigate
+                                )
                             }
                             data-supertokens="link linkButton formLabelLinkBtn forgotPasswordLink">
                             {t("PWLESS_COMBO_FORGOT_PW_LINK")}

lib/build/recipe/recipeModule/index.d.ts

@@ -109,10 +109,13 @@ export const EPComboEmailOrPhoneForm = withOverride(
                         <Label value={"PWLESS_COMBO_PASSWORD_LABEL"} data-supertokens="passwordInputLabel" />
                         <a
                             onClick={() =>
-                                EmailPassword.getInstanceOrThrow().redirect({
-                                    action: "RESET_PASSWORD",
-                                    tenantIdFromQueryParams: getTenantIdFromQueryParams(),
-                                })
+                                EmailPassword.getInstanceOrThrow().redirect(
+                                    {
+                                        action: "RESET_PASSWORD",
+                                        tenantIdFromQueryParams: getTenantIdFromQueryParams(),
+                                    },
+                                    props.navigate
+                                )
                             }
                             data-supertokens="link linkButton formLabelLinkBtn forgotPasswordLink">
                             {t("PWLESS_COMBO_FORGOT_PW_LINK")}

lib/ts/recipe/passwordless/components/features/signInAndUpEPCombo/index.tsx

@@ -33,6 +33,7 @@ import type { ComponentOverride } from "../../components/componentOverride/compo
 import type {
     APIFormField,
     FeatureBaseConfig,
+    Navigate,
     NormalisedBaseConfig,
     UserContext,
     WebJSRecipeInterface,
@@ -307,6 +308,7 @@ export type SignInUpEPComboEmailOrPhoneFormProps = {
     recipeImplementation: RecipeImplementation;
     config: NormalisedConfig;
     validatePhoneNumber: (phoneNumber: string) => Promise<string | undefined> | string | undefined;
+    navigate: Navigate | undefined;
 };
 
 export type SignInUpEPComboEmailFormProps = {
@@ -327,6 +329,7 @@ export type SignInUpEPComboEmailFormProps = {
     recipeImplementation: RecipeImplementation;
     validatePhoneNumber: (phoneNumber: string) => Promise<string | undefined> | string | undefined;
     config: NormalisedConfig;
+    navigate: Navigate | undefined;
 };
 
 export type MFAAction =
@@ -381,6 +384,7 @@ export type SignInUpEPComboChildProps = Omit<SignInUpProps, "onSuccess"> & {
             | { status: "OK"; isEmailPassword: false | undefined }
     ) => void;
     validatePhoneNumber: (phoneNumber: string) => Promise<string | undefined> | string | undefined;
+    navigate: Navigate | undefined;
 };
 export type LinkSentChildProps = LinkSentThemeProps;
 export type MFAChildProps = Omit<MFAProps, "featureState" | "dispatch">;

lib/ts/recipe/passwordless/components/themes/signInUpEPCombo/emailForm.tsx

@@ -30,7 +30,7 @@ export default abstract class RecipeModule<
 > extends BaseRecipeModule<GetRedirectionURLContextType, Action, OnHandleEventContextType, N> {
     redirect = async (
         context: NormalisedGetRedirectionURLContext<GetRedirectionURLContextType>,
-        navigate?: Navigate,
+        navigate: Navigate | undefined,
         queryParams?: Record<string, string>,
         userContext?: UserContext
     ): Promise<void> => {

lib/ts/recipe/passwordless/components/themes/signInUpEPCombo/emailOrPhoneForm.tsx

@@ -38,6 +38,7 @@ import {
     backendBeforeEach,
     waitForUrl,
     setupBrowser,
+    clickForgotPasswordLink,
 } from "../helpers";
 
 import { TEST_CLIENT_BASE_URL, TEST_SERVER_BASE_URL, SOMETHING_WENT_WRONG_ERROR } from "../constants";
@@ -1866,6 +1867,37 @@ export function getPasswordlessTestCases({ authRecipe, logId, generalErrorRecipe
                 await waitForSTElement(page, "[data-supertokens~=input][name=userInputCode]");
             });
         });
+
+        if (authRecipe === "all") {
+            describe("with emailpassword combo", () => {
+                before(async function () {
+                    ({ browser, page } = await initBrowser(contactMethod, consoleLogs, authRecipe));
+                    await setPasswordlessFlowType(contactMethod, "USER_INPUT_CODE");
+                    if (authRecipe === "all") {
+                        await tryEmailPasswordSignUp(page, registeredEmailWithPass);
+                    }
+                });
+
+                it("should navigate to the sign in page when the user clicks on the forgot password link", async function () {
+                    await page.goto(`${TEST_CLIENT_BASE_URL}/auth`);
+
+                    await setInputValues(page, [{ name: "email", value: registeredEmailWithPass }]);
+                    await submitForm(page);
+
+                    const testVal = "nav check" + Date.now();
+
+                    await page.evaluate((testVal) => {
+                        window.testVal = testVal;
+                    }, testVal);
+
+                    await clickForgotPasswordLink(page);
+                    await waitForUrl(page, "/auth/reset-password");
+
+                    const testValAfterNav = await page.evaluate(() => window.testVal);
+                    assert.strictEqual(testVal, testValAfterNav);
+                });
+            });
+        }
     }
 }