Add support for handling recovery token flow

Author: deepjyoti30-st

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

@@ -20,11 +20,13 @@ import { SuperTokensBranding } from "../../../../../components/SuperTokensBrandi
 import SuperTokens from "../../../../../superTokens";
 import { AuthPageFooter, AuthPageHeader } from "../../../../../ui";
 import UserContextWrapper from "../../../../../usercontext/userContextWrapper";
+import { handleCallAPI } from "../../../../../utils";
 import { PasskeyConfirmation } from "../signUp/confirmation";
 import { ThemeBase } from "../themeBase";
 
 import { PasskeyRecoverAccountSuccess } from "./success";
 
+import type { FieldState } from "../../../../emailpassword/components/library/formBase";
 import type { RecoverAccountWithTokenThemeProps } from "../../../types";
 
 export enum RecoverAccountScreen {
@@ -48,6 +50,7 @@ function PasskeyRecoverAccountWithTokenTheme(props: RecoverAccountWithTokenTheme
     const [errorMessageLabel, setErrorMessageLabel] = useState<string | null>(null);
     const [activeScreen, setActiveScreen] = useState<RecoverAccountScreen>(RecoverAccountScreen.ContinueWithPasskey);
     const [registerOptions, setRegisterOptions] = useState<RegisterOptions | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
 
     const onResetFactorList = () => {
         throw new Error("Should never come here as we don't have back functionality");
@@ -99,10 +102,7 @@ function PasskeyRecoverAccountWithTokenTheme(props: RecoverAccountWithTokenTheme
         void fetchAndStoreRegisterOptions();
     }, []);
 
-    const onContinueClick = useCallback(async () => {
-        // TODO: Add support to make the network call and show the next screen based
-        // on that result.
-        //
+    const callAPI = useCallback(async () => {
         // We will do the following things in the order when the user clicks on the continue
         // button.
         // 1. Check if the fetched register options have expired
@@ -122,9 +122,85 @@ function PasskeyRecoverAccountWithTokenTheme(props: RecoverAccountWithTokenTheme
             await fetchAndStoreRegisterOptions();
         }
 
-        // TODO: Do rest of the logic once recover flow is ready in core.
-        setActiveScreen(RecoverAccountScreen.Success);
-    }, [setActiveScreen]);
+        if (props.token === null) {
+            // The token should not be null because while fetching the register options
+            // we already checked for null and redirected to the sign in page if it is null.
+            throw new Error("Should never come here");
+        }
+
+        // Use the register options to register the credential and recover the account.
+        // We should have received a valid registration options response.
+        const registerCredentialResponse = await props.recipeImplementation.registerCredential({
+            registrationOptions: registerOptions,
+        });
+        if (registerCredentialResponse.status !== "OK") {
+            return registerCredentialResponse;
+        }
+
+        const recoverAccountResponse = await props.recipeImplementation.recoverAccount({
+            token: props.token,
+            webauthnGeneratedOptionsId: registerOptions.webauthnGeneratedOptionsId,
+            credential: registerCredentialResponse.registrationResponse,
+            userContext: props.userContext,
+        });
+
+        return recoverAccountResponse;
+    }, [fetchAndStoreRegisterOptions, props, registerOptions]);
+
+    const onContinueClick = useCallback(async () => {
+        const fieldUpdates: FieldState[] = [];
+        setIsLoading(true);
+
+        try {
+            const { result, generalError, fetchError } = await handleCallAPI<any>({
+                apiFields: [],
+                fieldUpdates,
+                callAPI: callAPI,
+            });
+
+            if (generalError !== undefined || fetchError !== undefined) {
+                setErrorMessageLabel("WEBAUTHN_ACCOUNT_RECOVERY_GENERAL_ERROR");
+            } else {
+                // If successful
+                if (result.status === "OK") {
+                    if (setIsLoading) {
+                        setIsLoading(false);
+                    }
+                    setActiveScreen(RecoverAccountScreen.Success);
+                } else {
+                    switch (result.status) {
+                        case "RECOVER_ACCOUNT_TOKEN_INVALID_ERROR":
+                            setErrorMessageLabel("WEBAUTHN_ACCOUNT_RECOVERY_TOKEN_INVALID_ERROR");
+                            break;
+                        case "GENERAL_ERROR":
+                            setErrorMessageLabel("WEBAUTHN_ACCOUNT_RECOVERY_GENERAL_ERROR");
+                            break;
+                        case "INVALID_GENERATED_OPTIONS_ERROR":
+                            setErrorMessageLabel("WEBAUTHN_ACCOUNT_RECOVERY_INVALID_GENERATED_OPTIONS_ERROR");
+                            break;
+                        case "INVALID_CREDENTIALS_ERROR":
+                            setErrorMessageLabel("WEBAUTHN_ACCOUNT_RECOVERY_INVALID_CREDENTIALS_ERROR");
+                            break;
+                        case "GENERATED_OPTIONS_NOT_FOUND_ERROR":
+                            setErrorMessageLabel("WEBAUTHN_ACCOUNT_RECOVERY_GENERATED_OPTIONS_NOT_FOUND_ERROR");
+                            break;
+                        case "INVALID_AUTHENTICATOR_ERROR":
+                            setErrorMessageLabel("WEBAUTHN_ACCOUNT_RECOVERY_INVALID_AUTHENTICATOR_ERROR");
+                            break;
+                        default:
+                            throw new Error("Should never come here");
+                    }
+                    return;
+                }
+            }
+        } catch (e) {
+            setErrorMessageLabel("WEBAUTHN_ACCOUNT_RECOVERY_GENERAL_ERROR");
+        } finally {
+            if (setIsLoading) {
+                setIsLoading(false);
+            }
+        }
+    }, [callAPI]);
 
     return (
         <UserContextWrapper userContext={props.userContext}>
@@ -155,6 +231,7 @@ function PasskeyRecoverAccountWithTokenTheme(props: RecoverAccountWithTokenTheme
                             errorMessageLabel={errorMessageLabel}
                             email={registerOptions?.user.name || null}
                             isContinueDisabled={registerOptions === null}
+                            isLoading={isLoading}
                         />
                         {activeScreen !== RecoverAccountScreen.Success && (
                             <AuthPageFooter
@@ -180,6 +257,7 @@ const RecoverAccountThemeInner = (
         errorMessageLabel: string | null;
         email: string | null;
         isContinueDisabled: boolean;
+        isLoading: boolean;
     }
 ) => {
     return props.activeScreen === RecoverAccountScreen.ContinueWithPasskey ? (
@@ -188,7 +266,7 @@ const RecoverAccountThemeInner = (
             email={props.email || undefined}
             onContinueClick={props.onContinueClick}
             errorMessageLabel={props.errorMessageLabel || undefined}
-            isLoading={false}
+            isLoading={props.isLoading}
             hideContinueWithoutPasskey
             isContinueDisabled={props.isContinueDisabled}
         />

lib/build/webauthnprebuiltui.js

@@ -40,5 +40,9 @@ export const defaultTranslationsWebauthn = {
         WEBAUTHN_ACCOUNT_RECOVERY_FETCH_ERROR: "Something went wrong, please refresh the page or reach out to support.",
         WEBAUTHN_SIGN_UP_CAUTION_MESSAGE_LABEL:
             "Make sure your email is correct—we’ll use it to help you recover your account.",
+        WEBAUTHN_ACCOUNT_RECOVERY_INVALID_CREDENTIALS_ERROR:
+            "The passkey is invalid, please try again, possibly with a different device.",
+        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.",
     },
 };

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

@@ -138,7 +138,7 @@ export const RecoverAccountWithToken: Story = {
         "multifactorauth.initialized": false,
         "passwordless.initialized": false,
         "webauthn.initialized": true,
-        query: "token=asdf",
+        query: "token=MmEyYjVhYjdiMjA2OTc1NjMwYzM0ZGU5NDliNjhlZTQxYjQ5ZDlkMTQ5YjlhYTc5YmM1N2UxM2U0NzU4ODJmYzMzNTY0MTcyYjE1ZGYxMTMxZjg2YTUzNzNiMDkzZTU2",
     },
 };