Add support for showing error indicating passkey is not supported

Author: deepjyoti30-st

lib/build/recipe/webauthn/components/themes/translations.d.ts

@@ -187,6 +187,9 @@ function PasskeyRecoverAccountWithTokenTheme(props: RecoverAccountWithTokenTheme
                         case "INVALID_AUTHENTICATOR_ERROR":
                             setErrorMessageLabel("WEBAUTHN_ACCOUNT_RECOVERY_INVALID_AUTHENTICATOR_ERROR");
                             break;
+                        case "WEBAUTHN_NOT_SUPPORTED_ERROR":
+                            setErrorMessageLabel("WEBAUTHN_NOT_SUPPORTED_ERROR");
+                            break;
                         default:
                             throw new Error("Should never come here");
                     }

lib/build/webauthnprebuiltui.js

@@ -38,14 +38,17 @@ function PasskeySignInTheme(props: SignInThemeProps): JSX.Element {
                 userContext,
             });
 
-            if (response.status === "INVALID_CREDENTIALS_ERROR") {
-                setError("WEBAUTHN_PASSKEY_INVALID_CREDENTIALS_ERROR");
-                return response;
-            }
-
-            if (response.status === "FAILED_TO_AUTHENTICATE_USER" || response.status === "INVALID_OPTIONS_ERROR") {
-                setError("WEBAUTHN_PASSKEY_RECOVERABLE_ERROR");
-                return response;
+            switch (response.status) {
+                case "INVALID_CREDENTIALS_ERROR":
+                    setError("WEBAUTHN_PASSKEY_INVALID_CREDENTIALS_ERROR");
+                    break;
+                case "FAILED_TO_AUTHENTICATE_USER":
+                case "INVALID_OPTIONS_ERROR":
+                    setError("WEBAUTHN_PASSKEY_RECOVERABLE_ERROR");
+                    break;
+                case "WEBAUTHN_NOT_SUPPORTED":
+                    setError("WEBAUTHN_NOT_SUPPORTED_ERROR");
+                    break;
             }
 
             return response;

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

@@ -161,6 +161,10 @@ export const SignUpForm = (
                 setErrorLabel("WEBAUTHN_EMAIL_ALREADY_EXISTS_ERROR");
             }
 
+            if (response.status === "WEBAUTHN_NOT_SUPPORTED") {
+                setErrorLabel("WEBAUTHN_NOT_SUPPORTED_ERROR");
+            }
+
             return response;
         },
         [continueClickResponse, props, userContext]

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

@@ -47,5 +47,6 @@ export const defaultTranslationsWebauthn = {
         WEBAUTHN_ACCOUNT_RECOVERY_GENERATED_OPTIONS_NOT_FOUND_ERROR: "Failed to recover account, please try again.",
         WEBAUTHN_ACCOUNT_RECOVERY_INVALID_AUTHENTICATOR_ERROR: "Invalid authenticator, please try again.",
         WEBAUTHN_EMAIL_ALREADY_EXISTS_ERROR: "Email already exists, please sign in instead.",
+        WEBAUTHN_NOT_SUPPORTED_ERROR: "Passkey is not supported on your browser, please try with a different browser.",
     },
 };