fix: validation and ux fixes

.storybook/main.ts

@@ -8,8 +8,8 @@ const config: StorybookConfig = {
         "@storybook/addon-actions",
         "@storybook/addon-links",
         "@storybook/addon-interactions",
-        "@storybook/addon-designs",
         // "@storybook/addon-actions/register",
+        "@storybook/addon-designs",
     ],
     async webpackFinal(config, { configType }) {
         if (config.module?.rules) {

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

@@ -85,10 +85,6 @@
     cursor: pointer;
 }
 
-[data-supertokens~="forgotPasswordLink"] {
-    margin-top: 10px;
-}
-
 [data-supertokens~="enterEmailSuccessMessage"] {
     margin-top: 15px;
     margin-bottom: 15px;
@@ -144,6 +140,10 @@
     padding-bottom: 0;
 }
 
+[data-supertokens~="formRow"]:last-child {
+    padding-bottom: 0;
+}
+
 [data-supertokens~="sendVerifyEmailIcon"] {
     margin-top: 11px;
 }

lib/ts/recipe/passwordless/components/themes/signInUpEPCombo/continueWithPasswordlessFooter.tsx

@@ -1,24 +1,48 @@
 import { useTranslation } from "../../../../../translation/translationContext";
 import { useFormFields } from "../../../../emailpassword/components/library/formBase";
 
+import type { NormalisedConfig } from "../../../types";
+
 export const ContinueWithPasswordlessFooter: React.FC<{
     onError: (err: string) => void;
     isPhoneNumber: boolean;
     onContinueWithPasswordlessClick: (contactInfo: string) => Promise<void>;
-}> = ({ onError, onContinueWithPasswordlessClick, isPhoneNumber }) => {
+    config: NormalisedConfig;
+}> = ({ onError, onContinueWithPasswordlessClick, isPhoneNumber, config }) => {
     const state = useFormFields();
     const t = useTranslation();
 
     return (
         <a
-            onClick={() => {
-                const emailOrPhone = state.find(
-                    (field) => field.id === (isPhoneNumber ? "phoneNumber" : "email")
-                )?.value;
-                if (emailOrPhone === undefined) {
-                    onError("GENERAL_ERROR_EMAIL_OR_PHONE_UNDEFINED");
+            data-supertokens="link linkButton continueWithSupertokensLink"
+            onClick={async () => {
+                if (isPhoneNumber) {
+                    const phoneNumber = state.find((field) => field.id === "phoneNumber")?.value;
+                    if (phoneNumber === undefined) {
+                        onError("GENERAL_ERROR_PHONE_UNDEFINED");
+                        return;
+                    }
+
+                    const validationRes = await config.validatePhoneNumber(phoneNumber);
+                    if (validationRes !== undefined) {
+                        onError(validationRes);
+                        return;
+                    }
+
+                    return onContinueWithPasswordlessClick(phoneNumber);
                 } else {
-                    onContinueWithPasswordlessClick(emailOrPhone).catch(onError);
+                    const email = state.find((field) => field.id === "email")?.value;
+                    if (email === undefined) {
+                        onError("GENERAL_ERROR_EMAIL_UNDEFINED");
+                        return;
+                    }
+                    const validationRes = await config.validateEmailAddress(email);
+                    if (validationRes !== undefined) {
+                        onError(validationRes);
+                        return;
+                    }
+
+                    return onContinueWithPasswordlessClick(email);
                 }
             }}>
             {t("PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS")}

lib/ts/recipe/passwordless/components/themes/signInUpEPCombo/emailForm.tsx

@@ -58,8 +58,8 @@ export const EPComboEmailForm = withOverride(
                         <Label value={"PWLESS_COMBO_PASSWORD_LABEL"} data-supertokens="passwordInputLabel" />
                         <a
                             onClick={() => EmailPassword.getInstanceOrThrow().redirect({ action: "RESET_PASSWORD" })}
-                            data-supertokens="forgotPasswordLink">
-                            {t("PWLESS_COMBO_FORGOT_PW_LINK")}{" "}
+                            data-supertokens="link linkButton formLabelLinkBtn forgotPasswordLink">
+                            {t("PWLESS_COMBO_FORGOT_PW_LINK")}
                         </a>
                     </div>
                 ),
@@ -97,6 +97,7 @@ export const EPComboEmailForm = withOverride(
                             isPhoneNumber={false}
                             onContinueWithPasswordlessClick={props.onContinueWithPasswordlessClick}
                             onError={props.onError}
+                            config={props.config}
                         />
                     ) : undefined
                 }

lib/ts/recipe/passwordless/components/themes/signInUpEPCombo/emailOrPhoneForm.tsx

@@ -108,8 +108,8 @@ export const EPComboEmailOrPhoneForm = withOverride(
                         <Label value={"PWLESS_COMBO_PASSWORD_LABEL"} data-supertokens="passwordInputLabel" />
                         <a
                             onClick={() => EmailPassword.getInstanceOrThrow().redirect({ action: "RESET_PASSWORD" })}
-                            data-supertokens="forgotPasswordLink">
-                            {t("PWLESS_COMBO_FORGOT_PW_LINK")}{" "}
+                            data-supertokens="link linkButton formLabelLinkBtn forgotPasswordLink">
+                            {t("PWLESS_COMBO_FORGOT_PW_LINK")}
                         </a>
                     </div>
                 ),
@@ -162,6 +162,7 @@ export const EPComboEmailOrPhoneForm = withOverride(
                             isPhoneNumber={props.isPhoneNumber}
                             onContinueWithPasswordlessClick={props.onContinueWithPasswordlessClick}
                             onError={props.onError}
+                            config={props.config}
                         />
                     ) : undefined
                 }

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

@@ -97,3 +97,7 @@
     white-space: nowrap;
     margin: "0 16px";
 }
+
+[data-supertokens~="continueWithPasswordlessButtonWrapper"] {
+    margin: 9px 0;
+}

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

@@ -12,10 +12,6 @@ export const defaultTranslationsPasswordless = {
         GENERAL_ERROR_PHONE_NON_STRING: "Phone number must be of type string",
         GENERAL_ERROR_PHONE_INVALID: "Phone number is invalid",
 
-        GENERAL_ERROR_EMAIL_OR_PHONE_UNDEFINED: "Please set your email or phone number",
-        GENERAL_ERROR_EMAIL_OR_PHONE_NON_STRING: "Email or Phone number must be of type string",
-        GENERAL_ERROR_EMAIL_OR_PHONE_INVALID: "Email or Phone number is invalid",
-
         GENERAL_ERROR_OTP_UNDEFINED: "Please fill your OTP",
         GENERAL_ERROR_OTP_INVALID: "Invalid OTP",
         GENERAL_ERROR_OTP_EXPIRED: "Expired OTP.",

lib/ts/recipe/passwordless/utils.ts

@@ -15,12 +15,7 @@
 
 import { normaliseAuthRecipe } from "../authRecipe/utils";
 
-import {
-    defaultPhoneNumberValidator,
-    defaultPhoneNumberValidatorForCombinedInput,
-    defaultEmailValidator,
-    defaultEmailValidatorForCombinedInput,
-} from "./validators";
+import { defaultPhoneNumberValidator, defaultEmailValidator } from "./validators";
 
 import type { Config, NormalisedConfig, SignInUpFeatureConfigInput } from "./types";
 import type { FeatureBaseConfig, NormalisedBaseConfig } from "../../types";
@@ -47,8 +42,6 @@ export function normalisePasswordlessConfig(config: Config): NormalisedConfig {
         config.validateEmailAddress !== undefined
     ) {
         validateEmailAddress = config.validateEmailAddress;
-    } else if (config.contactMethod === "EMAIL_OR_PHONE") {
-        validateEmailAddress = defaultEmailValidatorForCombinedInput;
     }
 
     let validatePhoneNumber: NormalisedConfig["validatePhoneNumber"] = defaultPhoneNumberValidator;
@@ -57,8 +50,6 @@ export function normalisePasswordlessConfig(config: Config): NormalisedConfig {
         config.validatePhoneNumber !== undefined
     ) {
         validatePhoneNumber = config.validatePhoneNumber;
-    } else if (config.contactMethod === "EMAIL_OR_PHONE") {
-        validatePhoneNumber = defaultPhoneNumberValidatorForCombinedInput;
     }
 
     return {

lib/ts/recipe/passwordless/validators.ts

@@ -51,41 +51,6 @@ export async function defaultPhoneNumberValidator(value: string) {
     return undefined;
 }
 
-export function defaultEmailValidatorForCombinedInput(value: any): string | undefined {
-    if (typeof value !== "string") {
-        return "GENERAL_ERROR_EMAIL_OR_PHONE_NON_STRING";
-    }
-    value = value.trim();
-
-    const defaultEmailValidatorRegexp =
-        // eslint-disable-next-line no-useless-escape
-        /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-    // We check if the email syntax is correct
-    // As per https://github.com/supertokens/supertokens-auth-react/issues/5#issuecomment-709512438
-    // Regex from https://stackoverflow.com/a/46181/3867175
-
-    if (value.match(defaultEmailValidatorRegexp) === null) {
-        return "GENERAL_ERROR_EMAIL_OR_PHONE_INVALID";
-    }
-
-    return undefined;
-}
-
-export async function defaultPhoneNumberValidatorForCombinedInput(value: string) {
-    if (typeof value !== "string") {
-        return "GENERAL_ERROR_EMAIL_OR_PHONE_NON_STRING";
-    }
-
-    value = value.trim();
-
-    const intlTelInputUtils = await getPhoneNumberUtils();
-
-    if (!intlTelInputUtils.isValidNumber(value, undefined as any)) {
-        return "GENERAL_ERROR_EMAIL_OR_PHONE_INVALID";
-    }
-    return undefined;
-}
-
 export async function userInputCodeValidate(value: any): Promise<string | undefined> {
     if (typeof value !== "string") {
         return "GENERAL_ERROR_OTP_NON_STRING";

lib/ts/styles/styles.css

@@ -379,3 +379,7 @@
     cursor: default;
     text-decoration: none;
 }
+
+[data-supertokens~="authComponentList"] {
+    padding-bottom: 20px;
+}

stories/emailpassword.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, waitFor, within } from "@storybook/test";
+import { userEvent, within } from "@storybook/testing-library";
 import meta, { Args } from "./authPage.stories";
 
 type Story = StoryObj<Args>;

stories/emailverification.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, waitFor, within } from "@storybook/test";
 import { ErrorBoundary } from "./errorBoundary";
 import { RoutingComponent } from "../lib/ts/components/routingComponent";
 import EmailVerification from "../lib/ts/recipe/emailverification";

stories/totpMFA.stories.tsx

@@ -6,7 +6,6 @@ import React from "react";
 import { defaultTranslationsTOTP } from "../lib/ts/recipe/totp/components/themes/translations";
 import { TranslationContextProvider } from "../lib/ts/translation/translationContext";
 import { ComponentOverrideContext } from "../lib/ts/components/componentOverride/componentOverrideContext";
-import { userEvent, within, waitFor } from "@storybook/test";
 import { resetAndInitST, withFetchResponse } from "./utils";
 import { SessionContext } from "../lib/ts/recipe/session";