Refactor the code to create SignInTheme

Author: deepjyoti30-st

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

@@ -20,12 +20,11 @@ import * as React from "react";
 import AuthComponentWrapper from "../../../../../components/authCompWrapper";
 import { useUserContext } from "../../../../../usercontext";
 import { useRethrowInRender } from "../../../../../utils";
-import { handleFormSubmit } from "../../../../emailpassword/components/library/functions/form";
 import { useSessionContext } from "../../../../session";
 import Session from "../../../../session/recipe";
-import { ContinueWithPasskeyTheme } from "../../themes/continueWithPasskey";
+import SignInTheme from "../../themes/signIn";
 
-import type { UserContext, PartialAuthComponentProps, APIFormField } from "../../../../../types";
+import type { UserContext, PartialAuthComponentProps } from "../../../../../types";
 import type { AuthSuccessContext } from "../../../../authRecipe/types";
 import type Recipe from "../../../recipe";
 import type { ComponentOverrideMap, SignInThemeProps } from "../../../types";
@@ -109,46 +108,10 @@ const SignInFeatureInner: React.FC<
         props.onSignInUpSwitcherClick
     )!;
 
-    const callAPI = React.useCallback(
-        async (_: APIFormField[], __: (id: string, value: string) => any) => {
-            const email = prompt("Enter email ID");
-            if (email === null) {
-                alert("Please enter an email");
-                return;
-            }
-
-            const response = await childProps.recipeImplementation.authenticateCredentialWithSignIn({
-                email: email,
-                userContext,
-            });
-
-            return response;
-        },
-        [childProps, userContext]
-    );
-
-    // Define the code to handle sign in properly through this component.
-    const handleWebauthnSignInClick = async () => {
-        await handleFormSubmit({
-            callAPI: callAPI,
-            clearError: () => alert("Clear error"),
-            onError: () => alert("Error"),
-            onFetchError: () => alert("Fetch error"),
-            onSuccess: (payload) => console.warn("payload: ", payload),
-        });
-    };
-
     return (
         <React.Fragment>
             {/* No custom theme, use default. */}
-            {props.children === undefined && (
-                <ContinueWithPasskeyTheme
-                    {...props}
-                    continueWithPasskeyClicked={handleWebauthnSignInClick}
-                    config={props.recipe.config}
-                    continueFor="SIGN_IN"
-                />
-            )}
+            {props.children === undefined && <SignInTheme {...childProps} />}
 
             {/* Otherwise, custom theme is provided, propagate props. */}
             {props.children &&

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

@@ -20,7 +20,6 @@ import SuperTokens from "../../../../../superTokens";
 import { Button } from "../../../../emailpassword/components/library";
 import { ThemeBase } from "../themeBase";
 
-import type { PartialAuthComponentProps } from "../../../../../types";
 import type { ContinueFor, NormalisedConfig } from "../../../types";
 
 interface ContinueWithPasskeyProps {
@@ -45,9 +44,7 @@ const ContinueWithPasskey: React.FC<ContinueWithPasskeyProps> = ({ continueFor,
 
 const ContinueWithPasskeyWithOverride = withOverride("WebauthnContinueWithPasskey", ContinueWithPasskey);
 
-export const ContinueWithPasskeyTheme = (
-    props: PartialAuthComponentProps & { config: NormalisedConfig } & ContinueWithPasskeyProps
-) => {
+export const ContinueWithPasskeyTheme = (props: { config: NormalisedConfig } & ContinueWithPasskeyProps) => {
     const rootStyle = SuperTokens.getInstanceOrThrow().rootStyle;
     return (
         <ThemeBase userStyles={[rootStyle, props.config.recipeRootStyle]}>

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

@@ -0,0 +1,78 @@
+/* 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 * as React from "react";
+
+import SuperTokens from "../../../../../superTokens";
+import { useUserContext } from "../../../../../usercontext";
+import UserContextWrapper from "../../../../../usercontext/userContextWrapper";
+import { handleFormSubmit } from "../../../../emailpassword/components/library/functions/form";
+import { ContinueWithPasskeyTheme } from "../continueWithPasskey";
+import { ThemeBase } from "../themeBase";
+
+import type { APIFormField } from "../../../../../types";
+import type { SignInThemeProps } from "../../../types";
+
+function PasskeySignInTheme(props: SignInThemeProps): JSX.Element {
+    const userContext = useUserContext();
+
+    const callAPI = React.useCallback(
+        async (_: APIFormField[], __: (id: string, value: string) => any) => {
+            const email = prompt("Enter email ID");
+            if (email === null) {
+                alert("Please enter an email");
+                return;
+            }
+
+            const response = await props.recipeImplementation.authenticateCredentialWithSignIn({
+                email: email,
+                userContext,
+            });
+
+            return response;
+        },
+        [props, userContext]
+    );
+
+    // Define the code to handle sign in properly through this component.
+    const handleWebauthnSignInClick = async () => {
+        await handleFormSubmit({
+            callAPI: callAPI,
+            clearError: () => alert("Clear error"),
+            onError: () => alert("Error"),
+            onFetchError: () => alert("Fetch error"),
+            onSuccess: (payload) => console.warn("payload: ", payload),
+        });
+    };
+
+    const rootStyle = SuperTokens.getInstanceOrThrow().rootStyle;
+
+    const activeStyle = props.config.signUpFeature.style;
+
+    return (
+        <UserContextWrapper userContext={props.userContext}>
+            <ThemeBase userStyles={[rootStyle, props.config.recipeRootStyle, activeStyle]}>
+                <ContinueWithPasskeyTheme
+                    {...props}
+                    continueWithPasskeyClicked={handleWebauthnSignInClick}
+                    config={props.config}
+                    continueFor="SIGN_IN"
+                />
+            </ThemeBase>
+        </UserContextWrapper>
+    );
+}
+
+export default PasskeySignInTheme;

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

@@ -26,7 +26,7 @@ import { SignUpForm, SignUpScreen } from "./signUpForm";
 
 import type { SignUpThemeProps } from "../../../types";
 
-function SignUpTheme(props: SignUpThemeProps): JSX.Element {
+function PasskeySignUpTheme(props: SignUpThemeProps): JSX.Element {
     const rootStyle = SuperTokens.getInstanceOrThrow().rootStyle;
 
     const activeStyle = props.config.signUpFeature.style;
@@ -88,4 +88,4 @@ function SignUpTheme(props: SignUpThemeProps): JSX.Element {
     );
 }
 
-export default SignUpTheme;
+export default PasskeySignUpTheme;