From 5150fa1fd254b8cf9e95df9b2d51251576c86223 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:27:52 -0300
Subject: [PATCH] fix(clerk-js): Do not send stale field value when creating
 email address and username (#4713)

Co-authored-by: panteliselef <panteliselef@outlook.com>
---
 .changeset/lucky-shrimps-switch.md                           | 5 +++++
 .../clerk-js/src/ui/components/UserProfile/EmailForm.tsx     | 4 ++--
 .../clerk-js/src/ui/components/UserProfile/UsernameForm.tsx  | 4 ++--
 3 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/lucky-shrimps-switch.md

diff --git a/.changeset/lucky-shrimps-switch.md b/.changeset/lucky-shrimps-switch.md
new file mode 100644
index 0000000000..3564436b88
--- /dev/null
+++ b/.changeset/lucky-shrimps-switch.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fixes an issue in `UserProfile` where email and username forms could retain stale values from the previous render, leading to incorrect data being sent to FAPI
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailForm.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailForm.tsx
index 9eced5436a..18847b490b 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EmailForm.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/EmailForm.tsx
@@ -22,7 +22,7 @@ export const EmailForm = withCardStateProvider((props: EmailFormProps) => {
   const environment = useEnvironment();
   const preferEmailLinks = emailLinksEnabledForInstance(environment);
 
-  const [createEmailAddress] = useReverification(() => user?.createEmailAddress({ email: emailField.value }));
+  const [createEmailAddress] = useReverification((email: string) => user?.createEmailAddress({ email }));
 
   const emailAddressRef = React.useRef<EmailAddressResource | undefined>(user?.emailAddresses.find(a => a.id === id));
   const wizard = useWizard({
@@ -44,7 +44,7 @@ export const EmailForm = withCardStateProvider((props: EmailFormProps) => {
     if (!user) {
       return;
     }
-    return createEmailAddress()
+    return createEmailAddress(emailField.value)
       .then(res => {
         emailAddressRef.current = res;
         wizard.nextStep();
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UsernameForm.tsx b/packages/clerk-js/src/ui/components/UserProfile/UsernameForm.tsx
index a052638465..43a36bfd83 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UsernameForm.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UsernameForm.tsx
@@ -12,7 +12,7 @@ export const UsernameForm = withCardStateProvider((props: UsernameFormProps) =>
   const { onSuccess, onReset } = props;
   const { user } = useUser();
 
-  const [updateUsername] = useReverification(() => user?.update({ username: usernameField.value }));
+  const [updateUsername] = useReverification((username: string) => user?.update({ username }));
 
   const { userSettings } = useEnvironment();
   const card = useCardState();
@@ -33,7 +33,7 @@ export const UsernameForm = withCardStateProvider((props: UsernameFormProps) =>
 
   const submitUpdate = async () => {
     try {
-      await updateUsername();
+      await updateUsername(usernameField.value);
       onSuccess();
     } catch (e) {
       handleError(e, [usernameField], card.setError);