From 624523ed89957485f665bf7abb545f57b6617e4d Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Fri, 16 May 2025 15:04:12 -0400
Subject: [PATCH] fix(clerk-js): Translate username error in username form

---
 .changeset/slick-windows-listen.md                         | 5 +++++
 .../src/ui/components/UserProfile/UsernameForm.tsx         | 7 +++++--
 2 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/slick-windows-listen.md

diff --git a/.changeset/slick-windows-listen.md b/.changeset/slick-windows-listen.md
new file mode 100644
index 00000000000..09daf56e995
--- /dev/null
+++ b/.changeset/slick-windows-listen.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fixes issue where min/max username lengths errors were not properly interpolated within profile component.
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UsernameForm.tsx b/packages/clerk-js/src/ui/components/UserProfile/UsernameForm.tsx
index c6f94e98778..8f6c004aaef 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UsernameForm.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UsernameForm.tsx
@@ -1,10 +1,10 @@
 import { useReverification, useUser } from '@clerk/shared/react';
 
 import { useEnvironment } from '../../contexts';
-import { localizationKeys } from '../../customizables';
+import { localizationKeys, useLocalizations } from '../../customizables';
 import type { FormProps } from '../../elements';
 import { Form, FormButtons, FormContainer, useCardState, withCardStateProvider } from '../../elements';
-import { handleError, useFormControl } from '../../utils';
+import { createUsernameError, handleError, useFormControl } from '../../utils';
 
 type UsernameFormProps = FormProps;
 
@@ -16,10 +16,13 @@ export const UsernameForm = withCardStateProvider((props: UsernameFormProps) =>
 
   const { userSettings } = useEnvironment();
   const card = useCardState();
+  const { t, locale } = useLocalizations();
+  const { usernameSettings } = userSettings;
   const usernameField = useFormControl('username', user?.username || '', {
     type: 'text',
     label: localizationKeys('formFieldLabel__username'),
     placeholder: localizationKeys('formFieldInputPlaceholder__username'),
+    buildErrorMessage: errors => createUsernameError(errors, { t, locale, usernameSettings }),
   });
 
   if (!user) {