Add fixes for making sign in work properly for passkey

Author: deepjyoti30-st

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

@@ -25,13 +25,18 @@ import type { ContinueFor, NormalisedConfig } from "../../../types";
 interface ContinueWithPasskeyProps {
     continueFor: ContinueFor;
     continueWithPasskeyClicked: (continueFor: ContinueFor) => void;
+    isLoading?: boolean;
 }
 
-const ContinueWithPasskey: React.FC<ContinueWithPasskeyProps> = ({ continueFor, continueWithPasskeyClicked }) => {
+const ContinueWithPasskey: React.FC<ContinueWithPasskeyProps> = ({
+    continueFor,
+    continueWithPasskeyClicked,
+    isLoading = false,
+}) => {
     return (
         <div data-supertokens="continueWithPasskeyButtonWrapper">
             <Button
-                isLoading={false}
+                isLoading={isLoading}
                 onClick={() => {
                     continueWithPasskeyClicked(continueFor);
                 }}

lib/ts/recipe/webauthn/components/themes/error/recoverableError.tsx

@@ -0,0 +1,26 @@
+/* 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 { withOverride } from "../../../../../components/componentOverride/withOverride";
+import { useTranslation } from "../../../../../translation/translationContext";
+
+export const RecoverableError = withOverride(
+    "PasskeyRecoverableError",
+    (props: { errorMessageLabel: string }): JSX.Element => {
+        const t = useTranslation();
+
+        return <div data-supertokens="passkeyRecoverableErrorContainer">{t(props.errorMessageLabel)}</div>;
+    }
+);

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

@@ -20,13 +20,16 @@ import { useUserContext } from "../../../../../usercontext";
 import UserContextWrapper from "../../../../../usercontext/userContextWrapper";
 import { handleFormSubmit } from "../../../../emailpassword/components/library/functions/form";
 import { ContinueWithPasskeyTheme } from "../continueWithPasskey";
+import { RecoverableError } from "../error/recoverableError";
 import { ThemeBase } from "../themeBase";
 
 import type { APIFormField } from "../../../../../types";
 import type { SignInThemeProps } from "../../../types";
 
 function PasskeySignInTheme(props: SignInThemeProps): JSX.Element {
     const userContext = useUserContext();
+    const [error, setError] = React.useState<string | null>(null);
+    const [isLoading, setIsLoading] = React.useState(false);
 
     const callAPI = React.useCallback(
         async (_: APIFormField[], __: (id: string, value: string) => any) => {
@@ -41,6 +44,11 @@ function PasskeySignInTheme(props: SignInThemeProps): JSX.Element {
                 userContext,
             });
 
+            if (response.status === "FAILED_TO_AUTHENTICATE_USER") {
+                setError("Failed to authenticate user");
+                return;
+            }
+
             return response;
         },
         [props, userContext]
@@ -50,10 +58,11 @@ function PasskeySignInTheme(props: SignInThemeProps): JSX.Element {
     const handleWebauthnSignInClick = async () => {
         await handleFormSubmit({
             callAPI: callAPI,
-            clearError: () => alert("Clear error"),
-            onError: () => alert("Error"),
-            onFetchError: () => alert("Fetch error"),
+            clearError: () => setError(null),
+            onError: (error) => setError(error),
+            onFetchError: () => setError("Failed to fetch from upstream"),
             onSuccess: (payload) => console.warn("payload: ", payload),
+            setIsLoading: setIsLoading,
         });
     };
 
@@ -64,12 +73,18 @@ function PasskeySignInTheme(props: SignInThemeProps): JSX.Element {
     return (
         <UserContextWrapper userContext={props.userContext}>
             <ThemeBase userStyles={[rootStyle, props.config.recipeRootStyle, activeStyle]}>
-                <ContinueWithPasskeyTheme
-                    {...props}
-                    continueWithPasskeyClicked={handleWebauthnSignInClick}
-                    config={props.config}
-                    continueFor="SIGN_IN"
-                />
+                <div data-supertokens="passkeySignInContainer">
+                    {error !== "" && error !== null && (
+                        <RecoverableError errorMessageLabel="WEBAUTHN_PASSKEY_RECOVERABLE_ERROR" />
+                    )}
+                    <ContinueWithPasskeyTheme
+                        {...props}
+                        continueWithPasskeyClicked={handleWebauthnSignInClick}
+                        config={props.config}
+                        continueFor="SIGN_IN"
+                        isLoading={isLoading}
+                    />
+                </div>
             </ThemeBase>
         </UserContextWrapper>
     );

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

@@ -16,6 +16,7 @@
 import { withOverride } from "../../../../../components/componentOverride/withOverride";
 import { useTranslation } from "../../../../../translation/translationContext";
 import Button from "../../../../emailpassword/components/library/button";
+import { RecoverableError } from "../error/recoverableError";
 
 import { ContinueWithoutPasskey } from "./continueWithoutPasskey";
 import { PasskeyFeatureBlocks } from "./featureBlocks";
@@ -42,7 +43,7 @@ export const PasskeyConfirmation = withOverride(
                 </div>
                 <PasskeyFeatureBlocks />
                 {props.errorMessageLabel !== undefined && props.errorMessageLabel !== "" && (
-                    <div data-supertokens="passkeyRecoverableErrorContainer">{t(props.errorMessageLabel)}</div>
+                    <RecoverableError errorMessageLabel={props.errorMessageLabel} />
                 )}
                 <div data-supertokens="passkeyConfirmationFooter">
                     <Button

lib/ts/recipe/webauthn/components/themes/styles.css

@@ -102,7 +102,7 @@
     margin-top: 9px;
 }
 
-[data-supertokens~="passkeyConfirmationContainer"] [data-supertokens~="passkeyRecoverableErrorContainer"] {
+[data-supertokens~="passkeyRecoverableErrorContainer"] {
     margin-top: 15px;
     border-radius: 6px;
     background-color: #fceaeb;
@@ -166,3 +166,7 @@
     text-decoration-skip-ink: none;
     color: #0076ff;
 }
+
+[data-supertokens~="passkeySignInContainer"] {
+    margin-bottom: 6px;
+}