CZQM-Ops-Demo/components/auth-button.tsx
2024-11-24 17:27:55 -06:00

59 lines
1.5 KiB
TypeScript

"use client"
import { createClient } from '@/lib/supabase/client'
import { Button } from './ui/button'
import { LogIn, LogOut, User } from 'lucide-react'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
export function AuthButton({ user }: { user: any }) {
const supabase = createClient()
const handleSignIn = async () => {
await supabase.auth.signInWithOAuth({
provider: 'vatsim',
options: {
redirectTo: `${location.origin}/auth/callback`,
},
})
}
const handleSignOut = async () => {
await supabase.auth.signOut()
window.location.reload()
}
if (user) {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="gap-2">
<User className="h-4 w-4" />
{user.user_metadata?.full_name || 'User'}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={handleSignOut}>
<LogOut className="h-4 w-4 mr-2" />
Sign Out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
return (
<Button onClick={handleSignIn} className="gap-2">
<LogIn className="h-4 w-4" />
Sign in with VATSIM
</Button>
)
}