index.tsx.liquid•5.05 kB
/**
* AuthForm Component
*
* DESIGN PATTERNS:
* - Client component for auth form interactivity
* - Supports both sign-in and sign-up modes
* - Handles OAuth and email/password auth
*
* CODING STANDARDS:
* - Use Better Auth client hooks
* - Handle loading and error states
* - Validate form inputs before submission
* - Show appropriate error messages
*
* USAGE:
* - <AuthForm mode="signin" providers="email,google,github" />
* - <AuthForm mode="signup" providers="email" />
*/
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { signIn, signUp } from "@/lib/auth-client";
interface AuthFormProps {
mode: "signin" | "signup";
providers: string;
}
export function AuthForm({ mode, providers }: AuthFormProps) {
const router = useRouter();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [name, setName] = useState("");
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const providerList = providers.split(",").map((p) => p.trim());
const hasEmail = providerList.includes("email");
const oauthProviders = providerList.filter((p) => p !== "email");
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError("");
setLoading(true);
try {
if (mode === "signin") {
await signIn.email({
email,
password,
});
router.push("/dashboard");
} else {
await signUp.email({
email,
password,
name,
});
router.push("/sign-in");
}
} catch (err) {
setError(err instanceof Error ? err.message : "Authentication failed");
} finally {
setLoading(false);
}
};
const handleOAuth = async (provider: string) => {
setLoading(true);
try {
await signIn.social({
provider: provider as any,
callbackURL: "/dashboard",
});
} catch (err) {
setError(err instanceof Error ? err.message : "OAuth failed");
setLoading(false);
}
};
return (
<div className="space-y-6">
{hasEmail && (
<form onSubmit={handleSubmit} className="space-y-4">
{mode === "signup" && (
<div>
<label htmlFor="name" className="block text-sm font-medium">
Name
</label>
<input
id="name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
required
className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
/>
</div>
)}
<div>
<label htmlFor="email" className="block text-sm font-medium">
Email
</label>
<input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
/>
</div>
<div>
<label htmlFor="password" className="block text-sm font-medium">
Password
</label>
<input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
/>
</div>
{error && (
<p className="text-sm text-red-600">{error}</p>
)}
<button
type="submit"
disabled={loading}
className="w-full rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 disabled:opacity-50"
>
{loading ? "Loading..." : mode === "signin" ? "Sign In" : "Sign Up"}
</button>
</form>
)}
{oauthProviders.length > 0 && (
<div>
{hasEmail && (
<div className="relative">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300" />
</div>
<div className="relative flex justify-center text-sm">
<span className="bg-white px-2 text-gray-500">Or continue with</span>
</div>
</div>
)}
<div className="mt-4 space-y-2">
{oauthProviders.map((provider) => (
<button
key={provider}
onClick={() => handleOAuth(provider)}
disabled={loading}
className="w-full rounded-md border border-gray-300 px-4 py-2 hover:bg-gray-50 disabled:opacity-50"
>
{provider.charAt(0).toUpperCase() + provider.slice(1)}
</button>
))}
</div>
</div>
)}
</div>
);
}