fix(clerk-js): Do not send stale field value when creating email addr…

…ess and username (#4713)

Co-authored-by: panteliselef <[email protected]>

.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

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();

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);