fix(clerk-js): Add createUsernameError to sign-up continue flow (#4840)

Author: alexcarpenter

.changeset/rotten-berries-jog.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix username field error message rendering within sign-up continue flow.

packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx

@@ -2,7 +2,7 @@ import { useClerk } from '@clerk/shared/react';
 import React, { useEffect, useMemo } from 'react';
 
 import { SignInContext, useCoreSignUp, useEnvironment, useOptions, useSignUpContext } from '../../contexts';
-import { descriptors, Flex, Flow, localizationKeys } from '../../customizables';
+import { descriptors, Flex, Flow, localizationKeys, useLocalizations } from '../../customizables';
 import {
   Card,
   Header,
@@ -13,7 +13,7 @@ import {
 import { useCardState } from '../../elements/contexts';
 import { useRouter } from '../../router';
 import type { FormControlState } from '../../utils';
-import { buildRequest, handleError, useFormControl } from '../../utils';
+import { buildRequest, createUsernameError, handleError, useFormControl } from '../../utils';
 import { SignUpForm } from './SignUpForm';
 import type { ActiveIdentifier } from './signUpFormHelpers';
 import {
@@ -30,7 +30,8 @@ function _SignUpContinue() {
   const clerk = useClerk();
   const { navigate } = useRouter();
   const { displayConfig, userSettings } = useEnvironment();
-  const { attributes } = userSettings;
+  const { attributes, usernameSettings } = userSettings;
+  const { t, locale } = useLocalizations();
   const { afterSignUpUrl, signInUrl, unsafeMetadata, initialValues = {} } = useSignUpContext();
   const signUp = useCoreSignUp();
   const options = useOptions();
@@ -62,6 +63,8 @@ function _SignUpContinue() {
       type: 'text',
       label: localizationKeys('formFieldLabel__username'),
       placeholder: localizationKeys('formFieldInputPlaceholder__username'),
+      transformer: value => value.trim(),
+      buildErrorMessage: errors => createUsernameError(errors, { t, locale, usernameSettings }),
     }),
     phoneNumber: useFormControl('phoneNumber', initialValues.phoneNumber || '', {
       type: 'tel',