Add support for Recover Account form component in webauthn

Author: deepjyoti30-st

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

@@ -49,7 +49,7 @@ function PasskeySignUpTheme(props: SignUpThemeProps): JSX.Element {
                         props.factorIds.length > 1 ? "multiFactor" : "singleFactor"
                     }`}>
                     <div data-supertokens="row">
-                        {activeScreen !== SignUpScreen.Error && (
+                        {![SignUpScreen.Error, SignUpScreen.RecoverAccount].includes(activeScreen) && (
                             <AuthPageHeader
                                 factorIds={props.factorIds}
                                 isSignUp={true}

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

@@ -0,0 +1,98 @@
+/* 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 { useState } from "react";
+import STGeneralError from "supertokens-web-js/lib/build/error";
+
+import { withOverride } from "../../../../../components/componentOverride/withOverride";
+import { useTranslation } from "../../../../../translation/translationContext";
+import { Label } from "../../../../emailpassword/components/library";
+import BackButton from "../../../../emailpassword/components/library/backButton";
+import FormBase from "../../../../emailpassword/components/library/formBase";
+import { defaultEmailValidator } from "../../../../emailpassword/validators";
+
+import type { RecoverFromProps } from "../../../types";
+
+export const PasskeyRecoverAccountFormInner = withOverride(
+    "PasskeyRecoverAccountFormInner",
+    (props: RecoverFromProps): JSX.Element => {
+        const [, setError] = useState<string | undefined>(undefined);
+
+        return (
+            <FormBase
+                clearError={() => setError(undefined)}
+                onFetchError={() => setError("Failed to fetch")}
+                onError={(error) => setError(error)}
+                formFields={[
+                    {
+                        id: "email",
+                        label: "",
+                        labelComponent: (
+                            <div data-supertokens="formLabelWithLinkWrapper">
+                                <Label value={"WEBAUTHN_SIGN_UP_LABEL"} data-supertokens="emailInputLabel" />
+                            </div>
+                        ),
+                        optional: false,
+                        autofocus: true,
+                        placeholder: "",
+                        autoComplete: "email",
+                        // We are using the default validator that allows any string
+                        validate: defaultEmailValidator,
+                    },
+                ]}
+                buttonLabel={"WEBAUTHN_EMAIL_CONTINUE_BUTTON"}
+                onSuccess={props.onSuccess}
+                callAPI={async (formFields) => {
+                    const email = formFields.find((field) => field.id === "email")?.value;
+                    if (email === undefined) {
+                        throw new STGeneralError("GENERAL_ERROR_EMAIL_UNDEFINED");
+                    }
+                    // TODO: Define code to make the API call to send reset email.
+                    return {
+                        status: "OK",
+                        email,
+                    };
+                }}
+                validateOnBlur={false}
+                showLabels={true}
+            />
+        );
+    }
+);
+
+export const PasskeyRecoverAccountForm = withOverride(
+    "PasskeyRecoverAccountForm",
+    (props: RecoverFromProps): JSX.Element => {
+        const t = useTranslation();
+
+        return (
+            <div data-supertokens="passkeyRecoverAccountFormContainer">
+                <div data-supertokens="passkeyRecoverAccountFormHeaderWrapper">
+                    <div data-supertokens="passkeyRecoverAccountFormHeader headerTitle withBackButton">
+                        <BackButton onClick={props.onBackClick} />
+                        {t("WEBAUTHN_RECOVER_ACCOUNT_LABEL")}
+                        <span data-supertokens="backButtonPlaceholder backButtonCommon">
+                            {/* empty span for spacing the back button */}
+                        </span>
+                    </div>
+                    <div data-supertokens="passkeyRecoverAccountFormSubHeader">
+                        {t("WEBAUTHN_RECOVER_ACCOUNT_SUBHEADER_LABEL")}
+                    </div>
+                </div>
+                <PasskeyRecoverAccountFormInner {...props} />
+            </div>
+        );
+    }
+);

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

@@ -26,6 +26,7 @@ import { defaultEmailValidator } from "../../../../emailpassword/validators";
 
 import { PasskeyConfirmation } from "./confirmation";
 import { ContinueWithoutPasskey } from "./continueWithoutPasskey";
+import { PasskeyRecoverAccountForm } from "./recoverAccountForm";
 import { SignUpSomethingWentWrong } from "./somethingWentWrong";
 
 import type { APIFormField } from "../../../../../types";
@@ -35,6 +36,8 @@ export enum SignUpScreen {
     SignUpForm,
     PasskeyConfirmation,
     Error,
+    RecoverAccount,
+    RecoverEmailSent,
 }
 
 export const SignUpFormInner = withOverride(
@@ -43,6 +46,7 @@ export const SignUpFormInner = withOverride(
         props: SignUpFormProps & {
             footer?: JSX.Element;
             onContinueClick: (params: ContinueOnSuccessParams) => void;
+            setActiveScreen: React.Dispatch<React.SetStateAction<SignUpScreen>>;
         }
     ): JSX.Element {
         const t = useTranslation();
@@ -68,7 +72,7 @@ export const SignUpFormInner = withOverride(
                             <div data-supertokens="formLabelWithLinkWrapper">
                                 <Label value={"WEBAUTHN_SIGN_UP_LABEL"} data-supertokens="emailInputLabel" />
                                 <a
-                                    onClick={() => alert("That is not defined yet!")}
+                                    onClick={() => props.setActiveScreen(SignUpScreen.RecoverAccount)}
                                     data-supertokens="link linkButton formLabelLinkBtn recoverAccountTrigger">
                                     {t("WEBAUTHN_RECOVER_ACCOUNT_LABEL")}
                                 </a>
@@ -162,6 +166,14 @@ export const SignUpForm = (
         });
     }, [callAPI, props]);
 
+    const onRecoverAccountFormSuccess = () => {
+        props.setActiveScreen(SignUpScreen.RecoverEmailSent);
+    };
+
+    const onRecoverAccountBackClick = () => {
+        props.setActiveScreen(SignUpScreen.SignUpForm);
+    };
+
     return props.activeScreen === SignUpScreen.SignUpForm ? (
         <SignUpFormInner {...props} onContinueClick={onContinueClickCallback} />
     ) : props.activeScreen === SignUpScreen.PasskeyConfirmation ? (
@@ -174,5 +186,7 @@ export const SignUpForm = (
         />
     ) : props.activeScreen === SignUpScreen.Error ? (
         <SignUpSomethingWentWrong onClick={() => props.setActiveScreen(SignUpScreen.SignUpForm)} />
+    ) : props.activeScreen === SignUpScreen.RecoverAccount ? (
+        <PasskeyRecoverAccountForm onSuccess={onRecoverAccountFormSuccess} onBackClick={onRecoverAccountBackClick} />
     ) : null;
 };

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

@@ -170,3 +170,25 @@
 [data-supertokens~="passkeySignInContainer"] {
     margin-bottom: 6px;
 }
+
+[data-supertokens~="passkeyRecoverAccountFormContainer"]
+    [data-supertokens~="passkeyRecoverAccountFormHeaderWrapper"]
+    [data-supertokens~="passkeyRecoverAccountFormHeader"] {
+    padding-top: 10px;
+}
+
+[data-supertokens~="passkeyRecoverAccountFormContainer"]
+    [data-supertokens~="passkeyRecoverAccountFormHeaderWrapper"]
+    [data-supertokens~="passkeyRecoverAccountFormSubHeader"] {
+    width: 70%;
+    margin: 0 auto;
+    font-family: Arial;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16.1px;
+    text-align: center;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: #808080;
+    margin-bottom: 20px;
+}

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

@@ -6,6 +6,7 @@ export const defaultTranslationsWebauthn = {
         WEBAUTHN_EMAIL_CONTINUE_BUTTON: "CONTINUE",
         WEBAUTHN_SIGN_UP_LABEL: "Email",
         WEBAUTHN_RECOVER_ACCOUNT_LABEL: "Recover Account",
+        WEBAUTHN_RECOVER_ACCOUNT_SUBHEADER_LABEL: "We will send you an email to recover your account.",
         WEBAUTHN_CONTINUE_WITHOUT_PASSKEY_BUTTON: "Continue without passkey",
         WEBAUTHN_CREATE_A_PASSKEY_HEADER: "Create a passkey",
         WEBAUTHN_CONTINUE_WITH_EMAIL_SUBTEXT: "Continue with",

lib/ts/recipe/webauthn/types.ts

@@ -175,5 +175,10 @@ export type FeatureBlockDetailProps = {
     icon: JSX.Element;
 };
 
+export type RecoverFromProps = {
+    onSuccess: () => void;
+    onBackClick: () => void;
+};
+
 // Type to indicate what the `Continue with` button is being used for.
 export type ContinueFor = "SIGN_UP" | "SIGN_IN";