feat: update username and sign up email should allow username

examples/nextjs-example/components/sign-in.tsx

@@ -38,11 +38,10 @@ export default function SignIn() {
 			<CardContent>
 				<div className="grid gap-4">
 					<div className="grid gap-2">
-						<Label htmlFor="email">Email</Label>
+						<Label htmlFor="email">Email/Username</Label>
 						<Input
 							id="email"
-							type="email"
-							placeholder="m@example.com"
+							placeholder="Email or Username"
 							required
 							onChange={(e) => {
 								setEmail(e.target.value);
@@ -82,25 +81,51 @@ export default function SignIn() {
 						className="w-full"
 						disabled={loading}
 						onClick={async () => {
-							await signIn.email(
-								{
-									email: email,
-									password: password,
-									callbackURL: "/dashboard",
-									dontRememberMe: !rememberMe,
-								},
-								{
-									onRequest: () => {
-										setLoading(true);
+							if (email.includes("@")) {
+								await signIn.email(
+									{
+										email: email,
+										password: password,
+										dontRememberMe: !rememberMe,
 									},
-									onResponse: () => {
-										setLoading(false);
+									{
+										onRequest: () => {
+											setLoading(true);
+										},
+										onResponse: () => {
+											setLoading(false);
+										},
+										onError: (ctx) => {
+											toast.error(ctx.error.message);
+										},
+										onSuccess: () => {
+											router.push("/dashboard");
+										},
 									},
-									onError: (ctx) => {
-										toast.error(ctx.error.message);
+								);
+							} else {
+								await signIn.username(
+									{
+										username: email,
+										password: password,
+										dontRememberMe: !rememberMe,
 									},
-								},
-							);
+									{
+										onRequest: () => {
+											setLoading(true);
+										},
+										onResponse: () => {
+											setLoading(false);
+										},
+										onError: (ctx) => {
+											toast.error(ctx.error.message);
+										},
+										onSuccess: () => {
+											router.push("/dashboard");
+										},
+									},
+								);
+							}
 						}}
 					>
 						{loading ? <Loader2 size={16} className="animate-spin" /> : "Login"}

examples/nextjs-example/components/sign-up.tsx

@@ -22,6 +22,7 @@ import { toast } from "sonner";
 export function SignUp() {
 	const [firstName, setFirstName] = useState("");
 	const [lastName, setLastName] = useState("");
+	const [username, setUsername] = useState("");
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
 	const [passwordConfirmation, setPasswordConfirmation] = useState("");
@@ -90,6 +91,19 @@ export function SignUp() {
 							value={email}
 						/>
 					</div>
+					<div className="grid gap-2">
+						<Label htmlFor="username">Username</Label>
+						<Input
+							id="username"
+							type="text"
+							placeholder="Username"
+							required
+							onChange={(e) => {
+								setUsername(e.target.value);
+							}}
+							value={username}
+						/>
+					</div>
 					<div className="grid gap-2">
 						<Label htmlFor="password">Password</Label>
 						<PasswordInput
@@ -151,6 +165,7 @@ export function SignUp() {
 							await signUp.email({
 								email,
 								password,
+								username,
 								name: `${firstName} ${lastName}`,
 								image: image ? await convertImageToBase64(image) : "",
 								callbackURL: "/dashboard",