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 can change this back in your authentication settings after logging in with your new email if desired.
+</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 can change this back after logging in with your new email if desired."
+                  }
                 >
                   <Input
                     {...field}