Supabase Authentication
/ auth
components/login-form.tsx
import { cn } from "@/lib/utils"import { Button } from "@/components/ui/button"import { Input } from "@/components/ui/input"import { Label } from "@/components/ui/label"import { supabase } from "@/lib/supabase";export function LoginForm({ className, ...props}: React.ComponentProps<"form">) { // Login form state const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); // Handle form submission const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); const { data, error } = await supabase.auth.signInWithPassword({ email, password, }); if (error) { console.error("Error logging in:", error.message); return; } console.log("Logged in:", data.user); }; // User Interface Login return ( <form className={cn("flex flex-col gap-6", className)} {...props}> <div className="flex flex-col items-center gap-2 text-center"> <h1 className="text-2xl font-bold">Login to your account</h1> <p className="text-muted-foreground text-sm text-balance"> Enter your email below to login to your account </p> </div> <div className="grid gap-6"> <div className="grid gap-3"> <Label htmlFor="email">Email</Label> <Input id="email" type="email" placeholder="m@example.com" required /> </div> <div className="grid gap-3"> <div className="flex items-center"> <Label htmlFor="password">Password</Label> <a href="#" className="ml-auto text-sm underline-offset-4 hover:underline" > Forgot your password? </a> </div> <Input id="password" type="password" required /> </div> <Button type="submit" className="w-full"> Login </Button> </div> <div className="text-center text-sm"> Don't have an account?{" "} <a href="/register" className="underline underline-offset-4"> Sign up </a> </div> </form> )}