Add init support for using FormBase for rendering the sign up form

Author: deepjyoti30-st

lib/ts/recipe/authRecipe/components/feature/authPage/authPage.tsx

@@ -508,7 +508,7 @@ async function buildAndSetChildProps(
 
     for (const a of authComps) {
         if (a.type === "FULL_PAGE") {
-            const preloadRes = await a.preloadInfoAndRunChecks(firstFactors, userContext, isSignUp);
+            const preloadRes = await a.preloadInfoAndRunChecks(firstFactors, userContext);
             // We skip setting if the auth page unmounted while we were checking
             // if we should show any full page comps
             if (abort.aborted) {

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

@@ -26,14 +26,15 @@ import { useUserContext } from "../../../../../usercontext";
 import { useRethrowInRender } from "../../../../../utils";
 import Session from "../../../../session/recipe";
 import useSessionContext from "../../../../session/useSessionContext";
+import { WEBAUTHN_IS_SIGN_UP_STATE_KEY } from "../../../constants";
 import { ContinueWithPasskeyTheme } from "../../themes/continueWithPasskey";
 import SignUpTheme from "../../themes/signUp";
 import { defaultTranslationsWebauthn } from "../../themes/translations";
 
 import type { UserContext, PartialAuthComponentProps } from "../../../../../types";
 import type { AuthSuccessContext } from "../../../../authRecipe/types";
 import type Recipe from "../../../recipe";
-import type { ComponentOverrideMap } from "../../../types";
+import type { ComponentOverrideMap, ContinueFor } from "../../../types";
 import type { SignUpThemeProps } from "../../../types";
 import type { User } from "supertokens-web-js/types";
 
@@ -43,7 +44,8 @@ export function useChildProps(
     onAuthSuccess: (successContext: AuthSuccessContext) => Promise<void>,
     error: string | undefined,
     onError: (err: string) => void,
-    userContext: UserContext
+    userContext: UserContext,
+    clearError: () => void
 ): SignUpThemeProps {
     const session = useSessionContext();
     const recipeImplementation = recipe.webJSRecipe;
@@ -74,6 +76,7 @@ export function useChildProps(
             },
             error,
             onError,
+            clearError,
             onFetchError: async (/* err: Response*/) => {
                 // TODO: Do we need to do something else?
                 onError("SOMETHING_WENT_WRONG_ERROR");
@@ -103,7 +106,8 @@ const SignUpFeatureInner: React.FC<
         props.onAuthSuccess,
         props.error,
         props.onError,
-        userContext
+        userContext,
+        props.clearError
     )!;
 
     return (
@@ -152,14 +156,22 @@ export const SignUpWithPasskeyFeature: React.FC<
 > = (props) => {
     const recipeComponentOverrides = props.useComponentOverrides();
 
+    const handleContinueClick = React.useCallback(
+        (continueFor: ContinueFor) => {
+            props.setFactorList(props.factorIds);
+            props.userContext[WEBAUTHN_IS_SIGN_UP_STATE_KEY] = continueFor === "SIGN_UP";
+        },
+        [props]
+    );
+
     return (
         <AuthComponentWrapper recipeComponentOverrides={recipeComponentOverrides}>
             <FeatureWrapper
                 useShadowDom={SuperTokens.getInstanceOrThrow().useShadowDom}
                 defaultStore={defaultTranslationsWebauthn}>
                 <ContinueWithPasskeyTheme
                     {...props}
-                    continueWithPasskeyClicked={() => props.setFactorList(props.factorIds)}
+                    continueWithPasskeyClicked={handleContinueClick}
                     config={props.recipe.config}
                     continueFor="SIGN_UP"
                 />

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

@@ -17,6 +17,8 @@ import SuperTokens from "../../../../../superTokens";
 import UserContextWrapper from "../../../../../usercontext/userContextWrapper";
 import { ThemeBase } from "../themeBase";
 
+import { SignUpForm } from "./signUpForm";
+
 import type { SignUpThemeProps } from "../../../types";
 
 function SignUpTheme(props: SignUpThemeProps): JSX.Element {
@@ -27,7 +29,7 @@ function SignUpTheme(props: SignUpThemeProps): JSX.Element {
     return (
         <UserContextWrapper userContext={props.userContext}>
             <ThemeBase userStyles={[rootStyle, props.config.recipeRootStyle, activeStyle]}>
-                <div></div>
+                <SignUpForm {...props} />
             </ThemeBase>
         </UserContextWrapper>
     );

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

@@ -0,0 +1,66 @@
+/* Copyright (c) 2024, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+import STGeneralError from "supertokens-web-js/utils/error";
+
+import { withOverride } from "../../../../../components/componentOverride/withOverride";
+// import { useUserContext } from "../../../../../usercontext";
+import FormBase from "../../../../emailpassword/components/library/formBase";
+import { defaultValidate } from "../../../../emailpassword/validators";
+
+import type { SignUpFormProps } from "../../../types";
+
+export const SignUpForm = withOverride(
+    "PasskeySignUpForm",
+    function PasswordlessEmailForm(
+        props: SignUpFormProps & {
+            footer?: JSX.Element;
+        }
+    ): JSX.Element {
+        // const userContext = useUserContext();
+
+        return (
+            <FormBase
+                clearError={props.clearError}
+                onFetchError={props.onFetchError}
+                onError={props.onError}
+                formFields={[
+                    {
+                        id: "email",
+                        label: "WEBAUTHN_SIGN_UP_LABEL",
+                        optional: false,
+                        autofocus: true,
+                        placeholder: "",
+                        autoComplete: "email",
+                        // We are using the default validator that allows any string
+                        validate: defaultValidate,
+                    },
+                ]}
+                buttonLabel={"WEBAUTHN_EMAIL_CONTINUE_BUTTON"}
+                onSuccess={props.onSuccess}
+                callAPI={async (formFields) => {
+                    const email = formFields.find((field) => field.id === "email")?.value;
+                    if (email === undefined) {
+                        throw new STGeneralError("GENERAL_ERROR_EMAIL_UNDEFINED");
+                    }
+                    return null;
+                }}
+                validateOnBlur={false}
+                showLabels={true}
+                footer={props.footer}
+            />
+        );
+    }
+);

lib/ts/recipe/webauthn/components/themes/translations.ts

@@ -3,7 +3,8 @@ import { defaultTranslationsCommon } from "../../../../translation/translations"
 export const defaultTranslationsWebauthn = {
     en: {
         ...defaultTranslationsCommon.en,
-        // WEBAUTHN_EMAIL_CONTINUE_BUTTON: "Continue",
+        WEBAUTHN_EMAIL_CONTINUE_BUTTON: "Continue",
+        WEBAUTHN_SIGN_UP_LABEL: "Email",
         // WEBAUTHN_CONTINUE_WITHOUT_PASSKEY_BUTTON: "Continue without passkey",
         // WEBAUTHN_CREATE_A_PASSKEY_HEADER: "Create a passkey",
         // WEBAUTHN_CONTINUE_WITH_EMAIL_SUBTEXT: "Continue with",

lib/ts/recipe/webauthn/constants.ts

@@ -0,0 +1 @@
+export const WEBAUTHN_IS_SIGN_UP_STATE_KEY = "__webauthn-is-sign-up";

lib/ts/recipe/webauthn/prebuiltui.tsx

@@ -8,6 +8,7 @@ import { useRecipeComponentOverrideContext } from "./componentOverrideContext";
 import SignInWithPasskeyFeature from "./components/features/signIn";
 import SignUpFeature, { SignUpWithPasskeyFeature } from "./components/features/signUp";
 import { defaultTranslationsWebauthn } from "./components/themes/translations";
+import { WEBAUTHN_IS_SIGN_UP_STATE_KEY } from "./constants";
 import WebauthnRecipe from "./recipe";
 
 import type { GenericComponentOverrideMap } from "../../components/componentOverride/componentOverrideContext";
@@ -83,7 +84,8 @@ export class WebauthnPreBuiltUI extends RecipeRouter {
         return [
             {
                 type: "FULL_PAGE",
-                async preloadInfoAndRunChecks(firstFactors, _, isSignUp) {
+                async preloadInfoAndRunChecks(firstFactors, userContext) {
+                    const isSignUp = userContext[WEBAUTHN_IS_SIGN_UP_STATE_KEY] || false;
                     return {
                         shouldDisplay:
                             isSignUp && firstFactors.length === 1 && firstFactors.includes(FactorIds.WEBAUTHN),

lib/ts/recipe/webauthn/types.ts

@@ -102,8 +102,7 @@ export type UserInput = Record<string, unknown> & {
     override?: {
         functions?: (originalImplementation: RecipeInterface) => RecipeInterface;
     };
-    linkClickedScreenFeature?: WebauthnFeatureBaseConfig;
-    mfaFeature?: WebauthnFeatureBaseConfig;
+    signUpFeature?: NormalisedSignUpFormFeatureConfig;
 } & AuthRecipeModuleUserInput<GetRedirectionURLContext, PreAndPostAPIHookAction, OnHandleEventContext>;
 
 export type Config = UserInput &
@@ -137,6 +136,7 @@ export type WebauthnSignUpState = {
 };
 
 export type SignUpThemeProps = {
+    clearError: () => void;
     recipeImplementation: RecipeImplementation;
     factorIds: string[];
     config: NormalisedConfig;
@@ -147,5 +147,15 @@ export type SignUpThemeProps = {
     userContext: UserContext;
 };
 
+export type SignUpFormProps = {
+    clearError: () => void;
+    onError: (error: string) => void;
+    onFetchError: (error: Response) => void;
+    error: string | undefined;
+    recipeImplementation: RecipeImplementation;
+    config: NormalisedConfig;
+    onSuccess?: (result: { createdNewRecipeUser: boolean; user: User }) => void;
+};
+
 // Type to indicate what the `Continue with` button is being used for.
 export type ContinueFor = "SIGN_UP" | "SIGN_IN";

lib/ts/recipe/webauthn/utils.ts

@@ -1,6 +1,7 @@
 import { normaliseAuthRecipe } from "../authRecipe/utils";
 
 import type { Config, NormalisedConfig } from "./types";
+import type { FeatureBaseConfig, NormalisedBaseConfig } from "../../types";
 import type { RecipeInterface } from "supertokens-web-js/recipe/webauthn";
 
 export function normaliseWebauthnConfig(config: Config): NormalisedConfig {
@@ -17,6 +18,15 @@ export function normaliseWebauthnConfig(config: Config): NormalisedConfig {
 
     return {
         ...normaliseAuthRecipe(config),
+        signUpFeature: normalisePasskeyBaseConfig(config.signUpFeature),
         override,
     };
 }
+
+function normalisePasskeyBaseConfig<T>(config?: T & FeatureBaseConfig): T & NormalisedBaseConfig {
+    const style = config && config.style !== undefined ? config.style : "";
+    return {
+        ...(config as T),
+        style,
+    };
+}

lib/ts/types.ts

@@ -437,8 +437,7 @@ export type FullPageAuthComponent<PreloadInfoType = any> = {
     type: "FULL_PAGE";
     preloadInfoAndRunChecks: (
         firstFactors: string[],
-        userContext: UserContext,
-        isSignUp: boolean
+        userContext: UserContext
     ) => Promise<{ shouldDisplay: true; preloadInfo: PreloadInfoType } | { shouldDisplay: false }>;
     component: React.FC<FullPageAuthComponentProps<PreloadInfoType>>;
 };