Add support for a proper sign up theme component

Author: deepjyoti30-st

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

@@ -27,14 +27,14 @@ import { useRethrowInRender } from "../../../../../utils";
 import Session from "../../../../session/recipe";
 import useSessionContext from "../../../../session/useSessionContext";
 import { ContinueWithPasskeyTheme } from "../../themes/continueWithPasskey";
+import SignUpTheme from "../../themes/signUp";
 import { defaultTranslationsWebauthn } from "../../themes/translations";
-// import SignUpThemeWrapper from "../../themes/signInUp";
 
 import type { UserContext, PartialAuthComponentProps } from "../../../../../types";
 import type { AuthSuccessContext } from "../../../../authRecipe/types";
 import type Recipe from "../../../recipe";
 import type { ComponentOverrideMap } from "../../../types";
-import type { SignUpChildProps } from "../../../types";
+import type { SignUpThemeProps } from "../../../types";
 import type { User } from "supertokens-web-js/types";
 
 export function useChildProps(
@@ -44,7 +44,7 @@ export function useChildProps(
     error: string | undefined,
     onError: (err: string) => void,
     userContext: UserContext
-): SignUpChildProps {
+): SignUpThemeProps {
     const session = useSessionContext();
     const recipeImplementation = recipe.webJSRecipe;
     const rethrowInRender = useRethrowInRender();
@@ -109,8 +109,7 @@ const SignUpFeatureInner: React.FC<
     return (
         <Fragment>
             {/* No custom theme, use default. */}
-            {/* {props.children === undefined && <SignUpThemeWrapper {...childProps} />} */}
-            {props.children === undefined && <div></div>}
+            {props.children === undefined && <SignUpTheme {...childProps} />}
 
             {/* Otherwise, custom theme is provided, propagate props. */}
             {props.children &&

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

@@ -0,0 +1,36 @@
+/* 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 SuperTokens from "../../../../../superTokens";
+import UserContextWrapper from "../../../../../usercontext/userContextWrapper";
+import { ThemeBase } from "../themeBase";
+
+import type { SignUpThemeProps } from "../../../types";
+
+function SignUpTheme(props: SignUpThemeProps): JSX.Element {
+    const rootStyle = SuperTokens.getInstanceOrThrow().rootStyle;
+
+    const activeStyle = props.config.signUpFeature.style;
+
+    return (
+        <UserContextWrapper userContext={props.userContext}>
+            <ThemeBase userStyles={[rootStyle, props.config.recipeRootStyle, activeStyle]}>
+                <div></div>
+            </ThemeBase>
+        </UserContextWrapper>
+    );
+}
+
+export default SignUpTheme;

lib/ts/recipe/webauthn/types.ts

@@ -15,6 +15,8 @@
 
 import type {
     FeatureBaseConfig,
+    NormalisedBaseConfig,
+    NormalisedFormField,
     NormalisedGetRedirectionURLContext,
     UserContext,
     WebJSRecipeInterface,
@@ -25,6 +27,7 @@ import type {
     NormalisedConfig as NormalisedAuthRecipeModuleConfig,
     Config as AuthRecipeModuleConfig,
 } from "../authRecipe/types";
+import type { InputProps } from "../emailpassword/components/library/input";
 import type WebJSRecipe from "supertokens-web-js/recipe/webauthn";
 import type { RecipeInterface } from "supertokens-web-js/recipe/webauthn";
 import type { User } from "supertokens-web-js/types";
@@ -95,7 +98,7 @@ export type OnHandleEventContext =
       }
     | AuthRecipeModuleOnHandleEventContext;
 
-export type UserInput = {} & {
+export type UserInput = Record<string, unknown> & {
     override?: {
         functions?: (originalImplementation: RecipeInterface) => RecipeInterface;
     };
@@ -106,7 +109,18 @@ export type UserInput = {} & {
 export type Config = UserInput &
     AuthRecipeModuleConfig<GetRedirectionURLContext, PreAndPostAPIHookAction, OnHandleEventContext>;
 
+export type NormalisedSignUpFormFeatureConfig = NormalisedBaseConfig & {
+    /*
+     * Normalised form fields for SignUp.
+     */
+    formFields: (NormalisedFormField & {
+        inputComponent?: (props: InputProps) => JSX.Element;
+    })[];
+};
+
 export type NormalisedConfig = {
+    signUpFeature: NormalisedSignUpFormFeatureConfig;
+
     override: {
         functions: (originalImplementation: RecipeInterface) => RecipeInterface;
     };
@@ -122,7 +136,7 @@ export type WebauthnSignUpState = {
     error: string | undefined;
 };
 
-export type SignUpChildProps = {
+export type SignUpThemeProps = {
     recipeImplementation: RecipeImplementation;
     factorIds: string[];
     config: NormalisedConfig;