Password Based Auth flow for Vue and Supabase

1<script setup lang="ts">
2import { ref } from "vue"
3import { createClient } from "@/lib/supabase/client"
4import { Button } from "@/components/ui/button"
5import {
6  Card,
7  CardContent,
8  CardDescription,
9  CardHeader,
10  CardTitle,
11} from "@/components/ui/card"
12import { Input } from "@/components/ui/input"
13import { Label } from "@/components/ui/label"
14 
15const email = ref("")
16const error = ref<string | null>(null)
17const success = ref(false)
18const isLoading = ref(false)
19 
20const handleForgotPassword = 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.resetPasswordForEmail(email.value, {
28      redirectTo: "http://localhost:3000/update-password",
29    })
30    if (supabaseError) throw supabaseError
31    success.value = true
32  } catch (err: unknown) {
33    error.value = err instanceof Error ? err.message : "An error occurred"
34  } finally {
35    isLoading.value = false
36  }
37}
38</script>
39 
40<template>
41  <div class="flex flex-col gap-6">
42    <Card v-if="success">
43      <CardHeader>
44        <CardTitle class="text-2xl">Check Your Email</CardTitle>
45        <CardDescription>Password reset instructions sent</CardDescription>
46      </CardHeader>
47      <CardContent>
48        <p class="text-sm text-muted-foreground">
49          If you registered using your email and password, you will receive a password reset email.
50        </p>
51      </CardContent>
52    </Card>
53 
54    <Card v-else>
55      <CardHeader>
56        <CardTitle class="text-2xl">Reset Your Password</CardTitle>
57        <CardDescription>
58          Type in your email and we&apos;ll send you a link to reset your password
59        </CardDescription>
60      </CardHeader>
61      <CardContent>
62        <form @submit="handleForgotPassword">
63          <div class="flex flex-col gap-6">
64            <div class="grid gap-2">
65              <Label for="email">Email</Label>
66              <Input
67                id="email"
68                type="email"
69                placeholder="m@example.com"
70                required
71                v-model="email"
72              />
73            </div>
74            <p v-if="error" class="text-sm text-red-500">{{ error }}</p>
75            <Button type="submit" class="w-full" :disabled="isLoading">
76              {{ isLoading ? "Sending..." : "Send reset email" }}
77            </Button>
78          </div>
79          <div class="mt-4 text-center text-sm">
80            Already have an account?
81// … truncated