Add fixes for making the sign up component buttons work properly

supertokens · Dec 26, 2024 · 64da711 · 64da711
1 parent bc37a5b
commit 64da711
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 11 deletions.
diff --git a/lib/ts/recipe/webauthn/components/features/signUp/index.tsx b/lib/ts/recipe/webauthn/components/features/signUp/index.tsx
@@ -45,7 +45,8 @@ export function useChildProps(
     onError: (err: string) => void,
     userContext: UserContext,
     clearError: () => void,
-    resetFactorList: () => void
+    resetFactorList: () => void,
+    onSignInUpSwitcherClick: () => void
 ): SignUpThemeProps {
     const session = useSessionContext();
     const recipeImplementation = recipe.webJSRecipe;
@@ -85,6 +86,7 @@ export function useChildProps(
             recipeImplementation: recipeImplementation,
             config: recipe.config,
             resetFactorList: resetFactorList,
+            onSignInUpSwitcherClick,
         };
     }, [error, factorIds, userContext, recipeImplementation]);
 }
@@ -109,7 +111,8 @@ const SignUpFeatureInner: React.FC<
         props.onError,
         userContext,
         props.clearError,
-        props.resetFactorList
+        props.resetFactorList,
+        props.onSignInUpSwitcherClick
     )!;
 
     return (

diff --git a/lib/ts/recipe/webauthn/components/themes/signUp/index.tsx b/lib/ts/recipe/webauthn/components/themes/signUp/index.tsx
@@ -29,11 +29,6 @@ function SignUpTheme(props: SignUpThemeProps): JSX.Element {
 
     const activeStyle = props.config.signUpFeature.style;
 
-    // TODO: Define a way to reset the factor list.
-    // const handleResetFactorList = () => {
-    //     return null;
-    // };
-
     const stInstance = SuperTokens.getInstanceOrThrow();
 
     const privacyPolicyLink = stInstance.privacyPolicyLink;
@@ -50,7 +45,7 @@ function SignUpTheme(props: SignUpThemeProps): JSX.Element {
                         <AuthPageHeader
                             factorIds={props.factorIds}
                             isSignUp={true}
-                            onSignInUpSwitcherClick={undefined}
+                            onSignInUpSwitcherClick={props.onSignInUpSwitcherClick}
                             hasSeparateSignUpView={true}
                             resetFactorList={props.resetFactorList}
                             showBackButton={true}

diff --git a/lib/ts/recipe/webauthn/components/themes/signUp/signUpForm.tsx b/lib/ts/recipe/webauthn/components/themes/signUp/signUpForm.tsx
@@ -34,9 +34,7 @@ export const SignUpForm = withOverride(
 
         const defaultFooter = (
             <div data-supertokens="continueWithoutPasskey">
-                <a
-                    onClick={() => alert("That is not defined yet!")}
-                    data-supertokens="formLabelLinkBtn continueWithoutPasskeyLabel">
+                <a onClick={props.resetFactorList} data-supertokens="formLabelLinkBtn continueWithoutPasskeyLabel">
                     {t("WEBAUTHN_CONTINUE_WITHOUT_PASSKEY_BUTTON")}
                 </a>
             </div>

diff --git a/lib/ts/recipe/webauthn/types.ts b/lib/ts/recipe/webauthn/types.ts
@@ -146,6 +146,7 @@ export type SignUpThemeProps = {
     error: string | undefined;
     userContext: UserContext;
     resetFactorList: () => void;
+    onSignInUpSwitcherClick: () => void;
 };
 
 export type SignUpFormProps = {
@@ -156,6 +157,7 @@ export type SignUpFormProps = {
     recipeImplementation: RecipeImplementation;
     config: NormalisedConfig;
     onSuccess?: (result: { createdNewRecipeUser: boolean; user: User }) => void;
+    resetFactorList: () => void;
 };
 
 // Type to indicate what the `Continue with` button is being used for.

diff --git a/lib/ts/types.ts b/lib/ts/types.ts
@@ -423,6 +423,7 @@ export type UserContext = Record<string, any>;
 export type AuthComponentProps = {
     setFactorList: (factorIds: string[]) => void;
     resetFactorList: () => void;
+    onSignInUpSwitcherClick: () => void;
     rebuildAuthPage: () => void;
     onAuthSuccess: (successContext: AuthSuccessContext) => Promise<void>;
     navigate: Navigate | undefined;