Merge pull request #4539 from Infisical/fix/enableEmailLoginOnChangeEmails

Enable email login on change of emails flows to avoid blocked users

backend/src/services/user/user-service.ts

@@ -294,11 +294,18 @@ export const userServiceFactory = ({
       // Delete all user aliases since the email is changing
       await userAliasDAL.delete({ userId }, tx);
 
+      // Ensure EMAIL auth method is included if not already present
+      const currentAuthMethods = user.authMethods || [];
+      const updatedAuthMethods = currentAuthMethods.includes(AuthMethod.EMAIL)
+        ? currentAuthMethods
+        : [...currentAuthMethods, AuthMethod.EMAIL];
+
       const updatedUser = await userDAL.updateById(
         userId,
         {
           email: newEmail.toLowerCase(),
-          username: newEmail.toLowerCase()
+          username: newEmail.toLowerCase(),
+          authMethods: updatedAuthMethods
         },
         tx
       );

docs/documentation/platform/auth-methods/email-password.mdx

@@ -29,6 +29,9 @@ You can update your account email address:
 1. Open the `Personal Settings` menu.
 2. Navigate to the `Authentication` tab.
 3. In the `Change Email` section, enter your new email address.
+<Info>
+If you don't currently have Email authentication enabled, it will be automatically activated when you change your email. You may disable it in the authentication settings after logging in with your new email if needed.
+</Info>
 ![change email section](../../../images/auth-methods/personal-settings-authentication-change-email-password.png)
 4. Click `Send Verification Code` to receive an 6-digit verification code at your new email address.
 5. Check your new email inbox and enter the verification code.

frontend/src/pages/user/PersonalSettingsPage/components/ChangeEmailSection/ChangeEmailSection.tsx

@@ -10,6 +10,7 @@ import { Button, FormControl, Input, Modal, ModalContent } from "@app/components
 import { useUser } from "@app/context";
 import { useRequestEmailChangeOTP, useUpdateUserEmail } from "@app/hooks/api/users";
 import { clearSession } from "@app/hooks/api/users/queries";
+import { AuthMethod } from "@app/hooks/api/users/types";
 
 const emailSchema = z
   .object({
@@ -43,6 +44,7 @@ const otpInputProps = {
 export const ChangeEmailSection = () => {
   const navigate = useNavigate();
   const { user } = useUser();
+  const hasEmailAuth = user?.authMethods?.includes(AuthMethod.EMAIL) ?? false;
   const [isOTPModalOpen, setIsOTPModalOpen] = useState(false);
   const [pendingEmail, setPendingEmail] = useState("");
 
@@ -177,6 +179,11 @@ export const ChangeEmailSection = () => {
                   label="New email address"
                   isError={Boolean(error)}
                   errorText={error?.message}
+                  tooltipText={
+                    hasEmailAuth
+                      ? "Your email authentication method is currently enabled and will remain active after changing your email."
+                      : "Email authentication method will be automatically enabled after changing your email. You may disable email authentication after logging in with your new email if needed."
+                  }
                 >
                   <Input
                     {...field}