Social Auth flow for Nuxt and Supabase

1<script setup lang="ts">
2import { ref } from "vue"
3import { createClient } from "@/lib/supabase/client"
4import { cn } from "@/lib/utils"
5 
6import { Button } from "@/components/ui/button.vue"
7import {
8  Card,
9  CardContent,
10  CardDescription,
11  CardHeader,
12  CardTitle,
13} from "@/components/ui/card.vue"
14 
15// Reactive state
16const error = ref<string | null>(null)
17const isLoading = ref(false)
18 
19// GitHub OAuth login handler
20const handleSocialLogin = async (e: Event) => {
21  e.preventDefault()
22  const supabase = createClient()
23  isLoading.value = true
24  error.value = null
25 
26  try {
27    const { error: supabaseError } = await supabase.auth.signInWithOAuth({
28      provider: "github",
29      options: {
30        redirectTo: `${window.location.origin}/api/routes/oauth?next=/protected`,
31      },
32    })
33 
34    if (supabaseError) throw supabaseError
35  } catch (err: unknown) {
36    error.value = err instanceof Error ? err.message : "An error occurred"
37    isLoading.value = false
38  }
39}
40</script>
41 
42<template>
43  <div :class="cn('flex flex-col gap-6')">
44    <Card>
45      <CardHeader>
46        <CardTitle class="text-2xl">Welcome!</CardTitle>
47        <CardDescription>Sign in to your account to continue</CardDescription>
48      </CardHeader>
49      <CardContent>
50        <form @submit="handleSocialLogin">
51          <div class="flex flex-col gap-6">
52            <p v-if="error" class="text-sm text-destructive-500">{{ error }}</p>
53            <Button type="submit" class="w-full" :disabled="isLoading">
54              {{ isLoading ? "Logging in..." : "Continue with GitHub" }}
55            </Button>
56          </div>
57        </form>
58      </CardContent>
59    </Card>
60  </div>
61</template>