Add support for sending recovery email for webauthn

Author: deepjyoti30-st

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

@@ -0,0 +1,38 @@
+/* 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";
+
+import type { EmailSentProps } from "../../../types";
+
+export const PasskeyEmailSent = withOverride("PasskeyEmailSent", (props: EmailSentProps): JSX.Element => {
+    const t = useTranslation();
+    return (
+        <div data-supertokens="passkeyEmailSentContainer">
+            <div data-supertokens="headerTitle">{t("WEBAUTHN_EMAIL_SENT_LABEL")}</div>
+            <div data-supertokens="emailSentDescription">
+                {t("WEBAUTHN_EMAIL_SENT_PRE_LABEL")}
+                {props.email}
+                {t("WEBAUTHN_EMAIL_SENT_POST_LABEL")}
+                <a
+                    onClick={props.onEmailChangeClick}
+                    data-supertokens="link linkButton formLabelLinkBtn changeEmailBtn">
+                    {t("WEBAUTHN_RESEND_OR_CHANGE_EMAIL_LABEL")}
+                </a>
+            </div>
+        </div>
+    );
+});

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

@@ -49,7 +49,9 @@ function PasskeySignUpTheme(props: SignUpThemeProps): JSX.Element {
                         props.factorIds.length > 1 ? "multiFactor" : "singleFactor"
                     }`}>
                     <div data-supertokens="row">
-                        {![SignUpScreen.Error, SignUpScreen.RecoverAccount].includes(activeScreen) && (
+                        {![SignUpScreen.Error, SignUpScreen.RecoverAccount, SignUpScreen.RecoverEmailSent].includes(
+                            activeScreen
+                        ) && (
                             <AuthPageHeader
                                 factorIds={props.factorIds}
                                 isSignUp={true}
@@ -73,13 +75,15 @@ function PasskeySignUpTheme(props: SignUpThemeProps): JSX.Element {
                             activeScreen={activeScreen}
                             setActiveScreen={setActiveScreen}
                         />
-                        <AuthPageFooter
-                            factorIds={props.factorIds}
-                            isSignUp={true}
-                            hasSeparateSignUpView={true}
-                            privacyPolicyLink={privacyPolicyLink}
-                            termsOfServiceLink={termsOfServiceLink}
-                        />
+                        {activeScreen !== SignUpScreen.RecoverEmailSent && (
+                            <AuthPageFooter
+                                factorIds={props.factorIds}
+                                isSignUp={true}
+                                hasSeparateSignUpView={true}
+                                privacyPolicyLink={privacyPolicyLink}
+                                termsOfServiceLink={termsOfServiceLink}
+                            />
+                        )}
                     </div>
                     <SuperTokensBranding />
                 </div>

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

@@ -18,23 +18,29 @@ import STGeneralError from "supertokens-web-js/lib/build/error";
 
 import { withOverride } from "../../../../../components/componentOverride/withOverride";
 import { useTranslation } from "../../../../../translation/translationContext";
+import { useUserContext } from "../../../../../usercontext";
 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 { RecoverableError } from "../error/recoverableError";
 
 import type { RecoverFromProps } from "../../../types";
 
 export const PasskeyRecoverAccountFormInner = withOverride(
     "PasskeyRecoverAccountFormInner",
-    (props: RecoverFromProps): JSX.Element => {
-        const [, setError] = useState<string | undefined>(undefined);
+    (
+        props: RecoverFromProps & {
+            setError: React.Dispatch<React.SetStateAction<string | undefined>>;
+        }
+    ): JSX.Element => {
+        const userContext = useUserContext();
 
         return (
             <FormBase
-                clearError={() => setError(undefined)}
-                onFetchError={() => setError("Failed to fetch")}
-                onError={(error) => setError(error)}
+                clearError={() => props.setError(undefined)}
+                onFetchError={() => props.setError("WEBAUTHN_ACCOUNT_RECOVERY_GENERAL_ERROR")}
+                onError={() => props.setError("WEBAUTHN_ACCOUNT_RECOVERY_GENERAL_ERROR")}
                 formFields={[
                     {
                         id: "email",
@@ -59,9 +65,18 @@ export const PasskeyRecoverAccountFormInner = withOverride(
                     if (email === undefined) {
                         throw new STGeneralError("GENERAL_ERROR_EMAIL_UNDEFINED");
                     }
-                    // TODO: Define code to make the API call to send reset email.
+                    // Define code to make the API call to send reset email.
+                    const res = await props.recipeImplementation.generateRecoverAccountToken({
+                        email: email,
+                        userContext: userContext,
+                    });
+
+                    if (res.status === "RECOVER_ACCOUNT_NOT_ALLOWED") {
+                        props.setError("WEBAUTHN_ACCOUNT_RECOVERY_NOT_ALLOWED_LABEL");
+                    }
+
                     return {
-                        status: "OK",
+                        ...res,
                         email,
                     };
                 }}
@@ -76,6 +91,7 @@ export const PasskeyRecoverAccountForm = withOverride(
     "PasskeyRecoverAccountForm",
     (props: RecoverFromProps): JSX.Element => {
         const t = useTranslation();
+        const [errorLabel, setErrorLabel] = useState<string | undefined>(undefined);
 
         return (
             <div data-supertokens="passkeyRecoverAccountFormContainer">
@@ -91,7 +107,12 @@ export const PasskeyRecoverAccountForm = withOverride(
                         {t("WEBAUTHN_RECOVER_ACCOUNT_SUBHEADER_LABEL")}
                     </div>
                 </div>
-                <PasskeyRecoverAccountFormInner {...props} />
+                {errorLabel !== undefined && (
+                    <div data-supertokens="errorContainer">
+                        <RecoverableError errorMessageLabel={errorLabel} />
+                    </div>
+                )}
+                <PasskeyRecoverAccountFormInner {...props} setError={setErrorLabel} />
             </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 { PasskeyEmailSent } from "./emailSent";
 import { PasskeyRecoverAccountForm } from "./recoverAccountForm";
 import { SignUpSomethingWentWrong } from "./somethingWentWrong";
 
@@ -122,6 +123,7 @@ export const SignUpForm = (
     const userContext = useUserContext();
     const [showPasskeyConfirmationError, setShowPasskeyConfirmationError] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
+    const [recoverAccountEmail, setRecoverAccountEmail] = useState<string>("");
 
     const onContinueClickCallback = useCallback(
         (params: ContinueOnSuccessParams) => {
@@ -166,14 +168,19 @@ export const SignUpForm = (
         });
     }, [callAPI, props]);
 
-    const onRecoverAccountFormSuccess = () => {
+    const onRecoverAccountFormSuccess = (result: { email: string }) => {
+        setRecoverAccountEmail(result.email);
         props.setActiveScreen(SignUpScreen.RecoverEmailSent);
     };
 
     const onRecoverAccountBackClick = () => {
         props.setActiveScreen(SignUpScreen.SignUpForm);
     };
 
+    const onEmailChangeClick = () => {
+        props.setActiveScreen(SignUpScreen.RecoverAccount);
+    };
+
     return props.activeScreen === SignUpScreen.SignUpForm ? (
         <SignUpFormInner {...props} onContinueClick={onContinueClickCallback} />
     ) : props.activeScreen === SignUpScreen.PasskeyConfirmation ? (
@@ -187,6 +194,12 @@ export const SignUpForm = (
     ) : props.activeScreen === SignUpScreen.Error ? (
         <SignUpSomethingWentWrong onClick={() => props.setActiveScreen(SignUpScreen.SignUpForm)} />
     ) : props.activeScreen === SignUpScreen.RecoverAccount ? (
-        <PasskeyRecoverAccountForm onSuccess={onRecoverAccountFormSuccess} onBackClick={onRecoverAccountBackClick} />
+        <PasskeyRecoverAccountForm
+            onSuccess={onRecoverAccountFormSuccess}
+            onBackClick={onRecoverAccountBackClick}
+            recipeImplementation={props.recipeImplementation}
+        />
+    ) : props.activeScreen === SignUpScreen.RecoverEmailSent ? (
+        <PasskeyEmailSent email={recoverAccountEmail} onEmailChangeClick={onEmailChangeClick} />
     ) : null;
 };

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

@@ -192,3 +192,25 @@
     color: #808080;
     margin-bottom: 20px;
 }
+
+[data-supertokens~="passkeyRecoverAccountFormContainer"] [data-supertokens~="errorContainer"] {
+    margin-bottom: 15px;
+}
+
+[data-supertokens~="passkeyEmailSentContainer"] [data-supertokens~="emailSentDescription"] {
+    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;
+}
+
+[data-supertokens~="passkeyEmailSentContainer"]
+    [data-supertokens~="emailSentDescription"]
+    [data-supertokens~="changeEmailBtn"] {
+    line-height: 16.1px;
+}

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

@@ -24,5 +24,12 @@ export const defaultTranslationsWebauthn = {
         WEBAUTHN_ERROR_GO_BACK_BUTTON_LABEL: "Go back",
         WEBAUTHN_UNRECOVERABLE_ERROR: "Something went wrong",
         WEBAUTHN_UNRECOVERABLE_ERROR_DETAILS: "something went wrong with your current session. please try again.",
+        WEBAUTHN_EMAIL_SENT_LABEL: "Email sent",
+        WEBAUTHN_EMAIL_SENT_PRE_LABEL: "Account recovery email has been sent to ",
+        WEBAUTHN_EMAIL_SENT_POST_LABEL: ", if it exists in our system.",
+        WEBAUTHN_RESEND_OR_CHANGE_EMAIL_LABEL: "Resend or change email",
+        WEBAUTHN_ACCOUNT_RECOVERY_NOT_ALLOWED_LABEL: "Account Recovery is not allowed, please contact support.",
+        WEBAUTHN_ACCOUNT_RECOVERY_GENERAL_ERROR:
+            "Something went wrong while trying to send recover account token, please try again.",
     },
 };

lib/ts/recipe/webauthn/types.ts

@@ -176,8 +176,14 @@ export type FeatureBlockDetailProps = {
 };
 
 export type RecoverFromProps = {
-    onSuccess: () => void;
+    onSuccess: (result: any) => void;
     onBackClick: () => void;
+    recipeImplementation: RecipeImplementation;
+};
+
+export type EmailSentProps = {
+    email: string;
+    onEmailChangeClick: () => void;
 };
 
 // Type to indicate what the `Continue with` button is being used for.