Social Auth flow for TanStack and Supabase

1import { useState } from 'react'
2 
3import { cn } from '@/lib/utils'
4import { createClient } from '@/registry/default/clients/tanstack/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'
13 
14export function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
15  const [error, setError] = useState<string | null>(null)
16  const [isLoading, setIsLoading] = useState(false)
17 
18  const handleSocialLogin = async (e: React.FormEvent) => {
19    e.preventDefault()
20    const supabase = createClient()
21    setIsLoading(true)
22    setError(null)
23 
24    try {
25      const { error } = await supabase.auth.signInWithOAuth({
26        provider: 'github',
27        options: {
28          redirectTo: `${window.location.origin}/auth/oauth?next=/protected`,
29        },
30      })
31 
32      if (error) throw error
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}