Add some fixes for webauthn

Author: deepjyoti30-st

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

@@ -12,5 +12,51 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
+/*
+ * Imports.
+ */
+import * as React from "react";
+
+import AuthComponentWrapper from "../../../../../components/authCompWrapper";
+import FeatureWrapper from "../../../../../components/featureWrapper";
+import SuperTokens from "../../../../../superTokens";
+import { ContinueWithPasskeyTheme } from "../../themes/continueWithPasskey";
+import { defaultTranslationsWebauthn } from "../../themes/translations";
+
+import type { UserContext, PartialAuthComponentProps } from "../../../../../types";
+import type Recipe from "../../../recipe";
+import type { ComponentOverrideMap } from "../../../types";
+
+export const SignInWithPasskeyFeature: 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_IN"
+                />
+            </FeatureWrapper> */}
+            <ContinueWithPasskeyTheme
+                {...props}
+                continueWithPasskeyClicked={() => props.setFactorList(props.factorIds)}
+                config={props.recipe.config}
+                continueFor="SIGN_IN"
+            />
+        </AuthComponentWrapper>
+    );
+};
 
-// TODO: Define later with more code
+export default SignInWithPasskeyFeature;

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

@@ -5,7 +5,8 @@ import { RecipeRouter } from "../recipeRouter";
 import SessionAuth from "../session/sessionAuth";
 
 import { useRecipeComponentOverrideContext } from "./componentOverrideContext";
-import ContinueWithPasskeyFeature from "./components/features/continueWithPasskey";
+import SignInWithPasskeyFeature from "./components/features/signIn";
+import { defaultTranslationsWebauthn } from "./components/themes/translations";
 import WebauthnRecipe from "./recipe";
 
 import type { GenericComponentOverrideMap } from "../../components/componentOverride/componentOverrideContext";
@@ -19,9 +20,7 @@ import type {
 
 export class WebauthnPreBuiltUI extends RecipeRouter {
     static instance?: WebauthnPreBuiltUI;
-    languageTranslations = {
-        en: {},
-    };
+    languageTranslations = defaultTranslationsWebauthn;
 
     constructor(public readonly recipeInstance: WebauthnRecipe) {
         super();
@@ -42,7 +41,7 @@ export class WebauthnPreBuiltUI extends RecipeRouter {
         return WebauthnPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatures(useComponentOverrides);
     }
     static getFeatureComponent(
-        componentName: "sign-up" | "sign-in",
+        componentName: "webauthn-sign-up",
         props: FeatureBaseProps<{ userContext?: UserContext }>,
         useComponentOverrides: () => GenericComponentOverrideMap<any> = useRecipeComponentOverrideContext
     ): JSX.Element {
@@ -63,35 +62,31 @@ export class WebauthnPreBuiltUI extends RecipeRouter {
     };
 
     getFeatureComponent = (
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        componentName: "sign-up" | "sign-in",
+        componentName: "webauthn-sign-up",
         props: FeatureBaseProps<{ userContext?: UserContext }>,
         _: () => GenericComponentOverrideMap<any> = useRecipeComponentOverrideContext
     ): JSX.Element => {
-        if (componentName === "sign-up") {
+        if (componentName === "webauthn-sign-up") {
             return (
                 <UserContextWrapper userContext={props.userContext}>
                     <SessionAuth requireAuth={false} doRedirection={false}>
                         <div></div>
                     </SessionAuth>
                 </UserContextWrapper>
             );
-        } else if (componentName === "sign-in") {
-            // TODO: Define this once sign-in is ready.
-            return <div></div>;
         }
         throw new Error("Should never come here.");
     };
 
     getAuthComponents(): AuthComponent[] {
-        const res: AuthComponent[] = [
+        return [
             {
                 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) => (
-                    <ContinueWithPasskeyFeature
-                        continueFor="SIGN_UP"
+                    <SignInWithPasskeyFeature
                         key="webauthn-sign-up"
                         {...props}
                         recipe={this.recipeInstance}
@@ -100,9 +95,21 @@ export class WebauthnPreBuiltUI extends RecipeRouter {
                     />
                 ),
             },
+            {
+                type: "SIGN_IN" as const,
+                factorIds: [FactorIds.WEBAUTHN],
+                displayOrder: 4,
+                component: (props: PartialAuthComponentProps) => (
+                    <SignInWithPasskeyFeature
+                        key="webauthn-sign-in"
+                        {...props}
+                        recipe={this.recipeInstance}
+                        factorIds={[FactorIds.WEBAUTHN]}
+                        useComponentOverrides={useRecipeComponentOverrideContext}
+                    />
+                ),
+            },
         ];
-
-        return res;
     }
 
     // For tests

lib/ts/recipe/webauthn/prebuiltui.tsx

@@ -43,7 +43,7 @@ export default class Webauthn extends AuthRecipe<
     NormalisedConfig
 > {
     static instance?: Webauthn;
-    static RECIPE_ID = "passwordless";
+    static RECIPE_ID = "webauthn";
 
     recipeID = Webauthn.RECIPE_ID;
     firstFactorIds = [];

lib/ts/recipe/webauthn/recipe.tsx

@@ -95,7 +95,7 @@ export type OnHandleEventContext =
       }
     | AuthRecipeModuleOnHandleEventContext;
 
-export type UserInput = Record<string, unknown> & {
+export type UserInput = {} & {
     override?: {
         functions?: (originalImplementation: RecipeInterface) => RecipeInterface;
     };