Password Based Auth flow for React and Supabase

1import { useState } from 'react'
2 
3import { cn } from '@/lib/utils'
4import { createClient } from '@/registry/default/clients/react/lib/supabase/client'
5import { Button } from '@/registry/default/components/ui/button'
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardHeader,
11  CardTitle,
12} from '@/registry/default/components/ui/card'
13import { Input } from '@/registry/default/components/ui/input'
14import { Label } from '@/registry/default/components/ui/label'
15 
16export function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
17  const [email, setEmail] = useState('')
18  const [password, setPassword] = useState('')
19  const [error, setError] = useState<string | null>(null)
20  const [isLoading, setIsLoading] = useState(false)
21  const supabase = createClient()
22 
23  const handleLogin = async (e: React.FormEvent) => {
24    e.preventDefault()
25    setIsLoading(true)
26    setError(null)
27 
28    try {
29      const { error } = await supabase.auth.signInWithPassword({
30        email,
31        password,
32      })
33      if (error) throw error
34      // Update this route to redirect to an authenticated route. The user already has an active session.
35      location.href = '/protected'
36    } catch (error: unknown) {
37      setError(error instanceof Error ? error.message : 'An error occurred')
38    } finally {
39      setIsLoading(false)
40    }
41  }
42 
43  return (
44    <div className={cn('flex flex-col gap-6', className)} {...props}>
45      <Card>
46        <CardHeader>
47          <CardTitle className="text-2xl">Login</CardTitle>
48          <CardDescription>Enter your email below to login to your account</CardDescription>
49        </CardHeader>
50        <CardContent>
51          <form onSubmit={handleLogin}>
52            <div className="flex flex-col gap-6">
53              <div className="grid gap-2">
54                <Label htmlFor="email">Email</Label>
55                <Input
56                  id="email"
57                  type="email"
58                  placeholder="m@example.com"
59                  required
60                  value={email}
61                  onChange={(e) => setEmail(e.target.value)}
62                />
63              </div>
64              <div className="grid gap-2">
65                <div className="flex items-center">
66                  <Label htmlFor="password">Password</Label>
67                  <a
68                    href="/forgot-password"
69                    className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
70                  >
71// … truncated