Add some fixes for the webauthn sign up /in functionality

Author: deepjyoti30-st

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

@@ -37,14 +37,20 @@ export const SignInWithPasskeyFeature: React.FC<
 > = (props) => {
     const recipeComponentOverrides = props.useComponentOverrides();
 
+    // TODO: Define the code to handle sign in properly through this component.
+    const handleWebauthnSignInClick = () => {
+        alert("This is yet to be defined!");
+        return;
+    };
+
     return (
         <AuthComponentWrapper recipeComponentOverrides={recipeComponentOverrides}>
             <FeatureWrapper
                 useShadowDom={SuperTokens.getInstanceOrThrow().useShadowDom}
                 defaultStore={defaultTranslationsWebauthn}>
                 <ContinueWithPasskeyTheme
                     {...props}
-                    continueWithPasskeyClicked={() => props.setFactorList(props.factorIds)}
+                    continueWithPasskeyClicked={handleWebauthnSignInClick}
                     config={props.recipe.config}
                     continueFor="SIGN_IN"
                 />

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

@@ -20,10 +20,14 @@ import { Fragment } from "react";
 import { useMemo } from "react";
 
 import AuthComponentWrapper from "../../../../../components/authCompWrapper";
+import FeatureWrapper from "../../../../../components/featureWrapper";
+import SuperTokens from "../../../../../superTokens";
 import { useUserContext } from "../../../../../usercontext";
 import { useRethrowInRender } from "../../../../../utils";
 import Session from "../../../../session/recipe";
 import useSessionContext from "../../../../session/useSessionContext";
+import { ContinueWithPasskeyTheme } from "../../themes/continueWithPasskey";
+import { defaultTranslationsWebauthn } from "../../themes/translations";
 // import SignUpThemeWrapper from "../../themes/signInUp";
 
 import type { UserContext, PartialAuthComponentProps } from "../../../../../types";
@@ -39,9 +43,7 @@ export function useChildProps(
     onAuthSuccess: (successContext: AuthSuccessContext) => Promise<void>,
     error: string | undefined,
     onError: (err: string) => void,
-    // clearError: () => void,
     userContext: UserContext
-    // navigate?: Navigate
 ): SignUpChildProps {
     const session = useSessionContext();
     const recipeImplementation = recipe.webJSRecipe;
@@ -101,9 +103,7 @@ const SignUpFeatureInner: React.FC<
         props.onAuthSuccess,
         props.error,
         props.onError,
-        // props.clearError,
         userContext
-        // props.navigate
     )!;
 
     return (
@@ -143,4 +143,30 @@ export const SignUpFeature: React.FC<
     );
 };
 
+export const SignUpWithPasskeyFeature: React.FC<
+    PartialAuthComponentProps & {
+        recipe: Recipe;
+        factorIds: string[];
+        userContext?: UserContext;
+        useComponentOverrides: () => ComponentOverrideMap;
+    }
+> = (props) => {
+    const recipeComponentOverrides = props.useComponentOverrides();
+
+    return (
+        <AuthComponentWrapper recipeComponentOverrides={recipeComponentOverrides}>
+            <FeatureWrapper
+                useShadowDom={SuperTokens.getInstanceOrThrow().useShadowDom}
+                defaultStore={defaultTranslationsWebauthn}>
+                <ContinueWithPasskeyTheme
+                    {...props}
+                    continueWithPasskeyClicked={() => props.setFactorList(props.factorIds)}
+                    config={props.recipe.config}
+                    continueFor="SIGN_UP"
+                />
+            </FeatureWrapper>
+        </AuthComponentWrapper>
+    );
+};
+
 export default SignUpFeature;

lib/ts/recipe/webauthn/prebuiltui.tsx

@@ -6,6 +6,7 @@ import SessionAuth from "../session/sessionAuth";
 
 import { useRecipeComponentOverrideContext } from "./componentOverrideContext";
 import SignInWithPasskeyFeature from "./components/features/signIn";
+import SignUpFeature, { SignUpWithPasskeyFeature } from "./components/features/signUp";
 import { defaultTranslationsWebauthn } from "./components/themes/translations";
 import WebauthnRecipe from "./recipe";
 
@@ -80,13 +81,30 @@ export class WebauthnPreBuiltUI extends RecipeRouter {
 
     getAuthComponents(): AuthComponent[] {
         return [
+            {
+                type: "FULL_PAGE",
+                async preloadInfoAndRunChecks(firstFactors) {
+                    return {
+                        shouldDisplay: firstFactors.length === 1 && firstFactors.includes(FactorIds.WEBAUTHN),
+                        preloadInfo: {},
+                    };
+                },
+                component: (props) => (
+                    <SignUpFeature
+                        key="webauthnSignUpFullPage"
+                        {...props}
+                        recipe={this.recipeInstance}
+                        useComponentOverrides={useRecipeComponentOverrideContext}
+                        factorIds={[FactorIds.WEBAUTHN]}
+                    />
+                ),
+            },
             {
                 type: "SIGN_UP" as const,
                 factorIds: [FactorIds.WEBAUTHN],
                 displayOrder: 4,
-                /* TODO: Update the following to be sign up instead of sign in */
                 component: (props: PartialAuthComponentProps) => (
-                    <SignInWithPasskeyFeature
+                    <SignUpWithPasskeyFeature
                         key="webauthn-sign-up"
                         {...props}
                         recipe={this.recipeInstance}

stories/allrecipes.stories.tsx

@@ -115,11 +115,11 @@ export const SignUpPasskey: Story = {
     },
     play: async ({ canvasElement }) => {
         // Assigns canvas to the component root element
-        const canvas = within(canvasElement);
-        const switcher = await canvas.findByText("CONTINUE WITH PASSKEY");
-        await new Promise((res) => setTimeout(res, 100));
-        canvasElement;
-        await userEvent.click(switcher, { delay: 200 });
+        // const canvas = within(canvasElement);
+        // const switcher = await canvas.findByText("CONTINUE WITH PASSKEY");
+        // await new Promise((res) => setTimeout(res, 100));
+        // canvasElement;
+        // await userEvent.click(switcher, { delay: 200 });
     },
 };