Social Auth flow for React and Supabase

1'use client'
2 
3import { useState } from 'react'
4 
5import { cn } from '@/lib/utils'
6import { createClient } from '@/registry/default/clients/react/lib/supabase/client'
7import { Button } from '@/registry/default/components/ui/button'
8import {
9  Card,
10  CardContent,
11  CardDescription,
12  CardHeader,
13  CardTitle,
14} from '@/registry/default/components/ui/card'
15 
16export function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
17  const [error, setError] = useState<string | null>(null)
18  const [isLoading, setIsLoading] = useState(false)
19 
20  const handleSocialLogin = async (e: React.FormEvent) => {
21    e.preventDefault()
22    const supabase = createClient()
23    setIsLoading(true)
24    setError(null)
25 
26    try {
27      const { error } = await supabase.auth.signInWithOAuth({
28        provider: 'github',
29      })
30 
31      if (error) throw error
32      location.href = '/protected'
33    } catch (error: unknown) {
34      setError(error instanceof Error ? error.message : 'An error occurred')
35      setIsLoading(false)
36    }
37  }
38 
39  return (
40    <div className={cn('flex flex-col gap-6', className)} {...props}>
41      <Card>
42        <CardHeader>
43          <CardTitle className="text-2xl">Welcome!</CardTitle>
44          <CardDescription>Sign in to your account to continue</CardDescription>
45        </CardHeader>
46        <CardContent>
47          <form onSubmit={handleSocialLogin}>
48            <div className="flex flex-col gap-6">
49              {error && <p className="text-sm text-destructive-500">{error}</p>}
50              <Button type="submit" className="w-full" disabled={isLoading}>
51                {isLoading ? 'Logging in...' : 'Continue with GitHub'}
52              </Button>
53            </div>
54          </form>
55        </CardContent>
56      </Card>
57    </div>
58  )
59}