fix: email update bug (#10306)

Co-authored-by: Keith Williams <keithwillcode@gmail.com>

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -96,7 +96,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
   const updateUsername = trpc.viewer.updateProfile.useMutation({
     onSuccess: async () => {
       onSuccessMutation && (await onSuccessMutation());
-      await update();
+      await update({ username: inputUsernameValue });
       setOpenDialogSaveUsername(false);
     },
     onError: (error) => {

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -25,6 +25,7 @@ interface ICustomUsernameProps {
 const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.ComponentProps<typeof TextField>>) => {
   const { t } = useLocale();
   const { data: session, update } = useSession();
+
   const {
     currentUsername,
     setCurrentUsername = noop,
@@ -71,7 +72,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
       onSuccessMutation && (await onSuccessMutation());
       setOpenDialogSaveUsername(false);
       setCurrentUsername(inputUsernameValue);
-      await update();
+      await update({ username: inputUsernameValue });
     },
     onError: (error) => {
       onErrorMutation && onErrorMutation(error);

apps/web/pages/settings/my-account/profile.tsx

@@ -1,5 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { signOut } from "next-auth/react";
+import { useSession } from "next-auth/react";
 import type { BaseSyntheticEvent } from "react";
 import { useRef, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -78,13 +79,16 @@ type FormValues = {
 const ProfileView = () => {
   const { t } = useLocale();
   const utils = trpc.useContext();
+  const { data: session, update } = useSession();
+
   const { data: user, isLoading } = trpc.viewer.me.useQuery();
   const { data: avatar, isLoading: isLoadingAvatar } = trpc.viewer.avatar.useQuery();
   const mutation = trpc.viewer.updateProfile.useMutation({
-    onSuccess: () => {
+    onSuccess: (values) => {
       showToast(t("settings_updated_successfully"), "success");
       utils.viewer.me.invalidate();
       utils.viewer.avatar.invalidate();
+      update(values);
       setTempFormValues(null);
     },
     onError: () => {
@@ -115,7 +119,9 @@ const ProfileView = () => {
 
   const confirmPasswordMutation = trpc.viewer.auth.verifyPassword.useMutation({
     onSuccess() {
-      if (tempFormValues) mutation.mutate(tempFormValues);
+      if (tempFormValues) {
+        mutation.mutate(tempFormValues);
+      }
       setConfirmPasswordOpen(false);
     },
     onError() {

packages/features/auth/lib/next-auth-options.ts

@@ -350,6 +350,14 @@ export const AUTH_OPTIONS: AuthOptions = {
   providers,
   callbacks: {
     async jwt({ token, user, account, trigger, session }) {
+      if (trigger === "update") {
+        return {
+          ...token,
+          name: session?.name ?? token.name,
+          username: session?.username ?? token.username,
+          email: session?.email ?? token.email,
+        };
+      }
       const autoMergeIdentities = async () => {
         const existingUser = await prisma.user.findFirst({
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

packages/trpc/server/routers/loggedInViewer/updateProfile.handler.ts

@@ -98,6 +98,11 @@ export const updateProfileHandler = async ({ ctx, input }: UpdateProfileOptions)
       });
     }
   }
+  const hasEmailBeenChanged = userToUpdate.email !== data.email;
+
+  if (hasEmailBeenChanged) {
+    data.emailVerified = null;
+  }
 
   const updatedUser = await prisma.user.update({
     where: {