@@ -22,6 +22,7 @@ export function SignUpForm({
2222 ...props
2323} :React . ComponentPropsWithoutRef < 'div' > ) {
2424const [ email , setEmail ] = useState ( '' )
25+ const [ username , setUsername ] = useState ( '' )
2526const [ password , setPassword ] = useState ( '' )
2627const [ repeatPassword , setRepeatPassword ] = useState ( '' )
2728const [ error , setError ] = useState < string | null > ( null )
@@ -45,7 +46,10 @@ export function SignUpForm({
4546 email,
4647 password,
4748options :{
48- emailRedirectTo :`${ window . location . origin } ,
49+ emailRedirectTo :`${ window . location . origin } ,
50+ data :{
51+ username :username . trim ( ) ,
52+ } ,
4953} ,
5054} )
5155if ( error ) throw error
@@ -78,6 +82,20 @@ export function SignUpForm({
7882onChange = { ( e ) => setEmail ( e . target . value ) }
7983/>
8084</ div >
85+ < div className = "grid gap-2" >
86+ < Label htmlFor = "username" > Username</ Label >
87+ < Input
88+ id = "username"
89+ type = "text"
90+ placeholder = "Your username"
91+ required
92+ value = { username }
93+ onChange = { ( e ) => setUsername ( e . target . value ) }
94+ minLength = { 3 }
95+ pattern = "^[a-zA-Z0-9_]+$"
96+ title = "Username can only contain letters, numbers, and underscores."
97+ />
98+ </ div >
8199< div className = "grid gap-2" >
82100< div className = "flex items-center" >
83101< Label htmlFor = "password" > Password</ Label >