Add support for properly redirecting on recover account click

Author: deepjyoti30-st

lib/ts/recipe/webauthn/components/features/signUp/index.tsx

@@ -30,7 +30,7 @@ import { ContinueWithPasskeyTheme } from "../../themes/continueWithPasskey";
 import SignUpTheme from "../../themes/signUp";
 import { defaultTranslationsWebauthn } from "../../themes/translations";
 
-import type { UserContext, PartialAuthComponentProps } from "../../../../../types";
+import type { UserContext, PartialAuthComponentProps, Navigate } from "../../../../../types";
 import type { AuthSuccessContext } from "../../../../authRecipe/types";
 import type Recipe from "../../../recipe";
 import type { ComponentOverrideMap } from "../../../types";
@@ -46,12 +46,16 @@ export function useChildProps(
     userContext: UserContext,
     clearError: () => void,
     resetFactorList: () => void,
-    onSignInUpSwitcherClick: () => void
+    onSignInUpSwitcherClick: () => void,
+    navigate?: Navigate
 ): SignUpThemeProps {
     const session = useSessionContext();
     const recipeImplementation = recipe.webJSRecipe;
     const rethrowInRender = useRethrowInRender();
 
+    const onRecoverAccountClick = () =>
+        recipe.redirect({ action: "SEND_RECOVERY_EMAIL", tenantIdFromQueryParams: "" }, navigate, {}, userContext);
+
     return useMemo(() => {
         return {
             userContext,
@@ -87,6 +91,7 @@ export function useChildProps(
             config: recipe.config,
             resetFactorList: resetFactorList,
             onSignInUpSwitcherClick,
+            onRecoverAccountClick,
         };
     }, [error, factorIds, userContext, recipeImplementation]);
 }
@@ -112,7 +117,8 @@ const SignUpFeatureInner: React.FC<
         userContext,
         props.clearError,
         props.resetFactorList,
-        props.onSignInUpSwitcherClick
+        props.onSignInUpSwitcherClick,
+        props.navigate
     )!;
 
     return (

lib/ts/recipe/webauthn/components/themes/signUp/signUpForm.tsx

@@ -23,7 +23,6 @@ import { handleCallAPI } from "../../../../../utils";
 import { Label } from "../../../../emailpassword/components/library";
 import FormBase from "../../../../emailpassword/components/library/formBase";
 import { defaultEmailValidator } from "../../../../emailpassword/validators";
-import { DEFAULT_WEBAUTHN_SEND_RECOVERY_EMAIL_PATH } from "../../../constants";
 
 import { PasskeyConfirmation } from "./confirmation";
 import { ContinueWithoutPasskey } from "./continueWithoutPasskey";
@@ -46,6 +45,7 @@ export const SignUpFormInner = withOverride(
             footer?: JSX.Element;
             onContinueClick: (params: ContinueOnSuccessParams) => void;
             setActiveScreen: React.Dispatch<React.SetStateAction<SignUpScreen>>;
+            onRecoverAccountClick: () => void;
         }
     ): JSX.Element {
         const t = useTranslation();
@@ -76,7 +76,7 @@ export const SignUpFormInner = withOverride(
                                 <div data-supertokens="formLabelWithLinkWrapper">
                                     <Label value={"WEBAUTHN_SIGN_UP_LABEL"} data-supertokens="emailInputLabel" />
                                     <a
-                                        href={DEFAULT_WEBAUTHN_SEND_RECOVERY_EMAIL_PATH}
+                                        onClick={props.onRecoverAccountClick}
                                         data-supertokens="link linkButton formLabelLinkBtn recoverAccountTrigger">
                                         {t("WEBAUTHN_RECOVER_ACCOUNT_LABEL")}
                                     </a>
@@ -121,6 +121,7 @@ export const SignUpForm = (
         onContinueClick: (params: ContinueOnSuccessParams) => void;
         activeScreen: SignUpScreen;
         setActiveScreen: React.Dispatch<React.SetStateAction<SignUpScreen>>;
+        onRecoverAccountClick: () => void;
     }
 ): JSX.Element | null => {
     const [continueClickResponse, setContinueClickResponse] = useState<ContinueOnSuccessParams | null>(null);

lib/ts/recipe/webauthn/recipe.tsx

@@ -16,9 +16,11 @@
 import WebauthnWebJS from "supertokens-web-js/lib/build/recipe/webauthn";
 
 import { SSR_ERROR } from "../../constants";
+import { getDefaultRedirectionURLForPath } from "../../utils";
 import AuthRecipe from "../authRecipe";
 import { FactorIds } from "../multifactorauth";
 
+import { DEFAULT_WEBAUTHN_SEND_RECOVERY_EMAIL_PATH } from "./constants";
 import { getFunctionOverrides } from "./functionOverrides";
 import { normaliseWebauthnConfig } from "./utils";
 
@@ -65,6 +67,10 @@ export default class Webauthn extends AuthRecipe<
     }
 
     getDefaultRedirectionURL = async (context: GetRedirectionURLContext): Promise<string> => {
+        if (context.action === "SEND_RECOVERY_EMAIL") {
+            return getDefaultRedirectionURLForPath(this.config, DEFAULT_WEBAUTHN_SEND_RECOVERY_EMAIL_PATH, context);
+        }
+
         return this.getAuthRecipeDefaultRedirectionURL(context);
     };
 

lib/ts/recipe/webauthn/types.ts

@@ -43,7 +43,7 @@ export type GetRedirectionURLContext = NormalisedGetRedirectionURLContext<{
     /*
      * Get Redirection URL Context
      */
-    action: "RECOVER_ACCOUNT";
+    action: "SEND_RECOVERY_EMAIL";
 }>;
 
 export type PreAndPostAPIHookAction =
@@ -129,6 +129,7 @@ export type SignUpThemeProps = {
     userContext: UserContext;
     resetFactorList: () => void;
     onSignInUpSwitcherClick: () => void;
+    onRecoverAccountClick: () => void;
 };
 
 export type SignInThemeProps = SignUpThemeProps;