Add support for handling recoverable errors in the UI

Author: deepjyoti30-st

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

@@ -28,6 +28,8 @@ export const PasskeyConfirmation = withOverride(
         props: SignUpFormProps & {
             email: string;
             onContinueClick: () => void;
+            errorMessageLabel?: string;
+            isLoading: boolean;
         }
     ): JSX.Element {
         const t = useTranslation();
@@ -39,10 +41,13 @@ export const PasskeyConfirmation = withOverride(
                     <div data-supertokens="enteredEmailId">{props.email}</div>
                 </div>
                 <PasskeyFeatureBlocks />
+                {props.errorMessageLabel !== undefined && props.errorMessageLabel !== "" && (
+                    <div data-supertokens="passkeyRecoverableErrorContainer">{t(props.errorMessageLabel)}</div>
+                )}
                 <div data-supertokens="passkeyConfirmationFooter">
                     <Button
                         disabled={false}
-                        isLoading={false}
+                        isLoading={props.isLoading}
                         type="button"
                         onClick={props.onContinueClick}
                         label="WEBAUTHN_EMAIL_CONTINUE_BUTTON"

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

@@ -113,6 +113,8 @@ export const SignUpForm = (
 ): JSX.Element | null => {
     const [continueClickResponse, setContinueClickResponse] = useState<ContinueOnSuccessParams | null>(null);
     const userContext = useUserContext();
+    const [showPasskeyConfirmationError, setShowPasskeyConfirmationError] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
 
     const onContinueClickCallback = useCallback(
         (params: ContinueOnSuccessParams) => {
@@ -139,8 +141,11 @@ export const SignUpForm = (
     const onConfirmationClick = useCallback(async () => {
         await handleFormSubmit({
             callAPI: callAPI,
-            clearError: () => alert("Clearing error"),
-            onError: (error) => console.error("Got error: ", error),
+            clearError: () => setShowPasskeyConfirmationError(false),
+            onError: () => setShowPasskeyConfirmationError(true),
+            onFetchError: () => setShowPasskeyConfirmationError(true),
+            onSuccess: (payload) => console.warn("payload: ", payload),
+            setIsLoading: setIsLoading,
         });
     }, [callAPI]);
 
@@ -151,6 +156,8 @@ export const SignUpForm = (
             {...props}
             email={continueClickResponse?.email || ""}
             onContinueClick={onConfirmationClick}
+            errorMessageLabel={showPasskeyConfirmationError ? "WEBAUTHN_PASSKEY_RECOVERABLE_ERROR" : undefined}
+            isLoading={isLoading}
         />
     ) : null;
 };

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

@@ -102,6 +102,21 @@
     margin-top: 9px;
 }
 
+[data-supertokens~="passkeyConfirmationContainer"] [data-supertokens~="passkeyRecoverableErrorContainer"] {
+    margin-top: 15px;
+    border-radius: 6px;
+    background-color: #fceaeb;
+    color: #cf3644;
+    padding: 10px;
+    font-family: Arial;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16.59px;
+    text-align: center;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+}
+
 [data-supertokens~="passkeyConfirmationContainer"] [data-supertokens~="passkeyConfirmationFooter"] {
     margin-top: 25px;
 }

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

@@ -18,5 +18,7 @@ export const defaultTranslationsWebauthn = {
             "Passkey will automatically be available across all your synced devices.",
         WEBAUTHN_FEATURE_BLOCK_KEEP_ACCOUNT_SAFER: "Keep your account safer",
         WEBAUTHN_FEATURE_BLOCK_KEEP_ACCOUNT_SAFER_DETAIL: "Passkey offer state of the art phishing resistance.",
+        WEBAUTHN_PASSKEY_RECOVERABLE_ERROR:
+            "The request either timed out, was canceled or the device is already registered. Please try again or try using another device.",
     },
 };