Docs
Password-based Authentication

Password-based Authentication

Password-based authentication block for Nuxt.js

Installation

Open in

Folder structure

This block assumes that you have already installed a Supabase client for Nuxt from the previous step.

  • app
    • components
    • pages
      • auth
      • protected
  • server
    • routes
      • auth
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
15
16const email = ref("")
17const error = ref<string | null>(null)
18const success = ref(false)
19const isLoading = ref(false)
20
21const handleForgotPassword = async (e: Event) => {
22  e.preventDefault()
23  const supabase = createClient()
24  isLoading.value = true
25  error.value = null
26
27  try {
28    const { error: supabaseError } = await supabase.auth.resetPasswordForEmail(email.value, {
29      redirectTo: "http://localhost:3000/update-password",
30    })
31    if (supabaseError) throw supabaseError
32    success.value = true
33  } catch (err: unknown) {
34    error.value = err instanceof Error ? err.message : "An error occurred"
35  } finally {
36    isLoading.value = false
37  }
38}
39</script>
40
41<template>
42  <div class="flex flex-col gap-6">
43    <Card v-if="success">
44      <CardHeader>
45        <CardTitle class="text-2xl">Check Your Email</CardTitle>
46        <CardDescription>Password reset instructions sent</CardDescription>
47      </CardHeader>
48      <CardContent>
49        <p class="text-sm text-muted-foreground">
50          If you registered using your email and password, you will receive a password reset email.
51        </p>
52      </CardContent>
53    </Card>
54
55    <Card v-else>
56      <CardHeader>
57        <CardTitle class="text-2xl">Reset Your Password</CardTitle>
58        <CardDescription>
59          Type in your email and we&apos;ll send you a link to reset your password
60        </CardDescription>
61      </CardHeader>
62      <CardContent>
63        <form @submit="handleForgotPassword">
64          <div class="flex flex-col gap-6">
65            <div class="grid gap-2">
66              <Label for="email">Email</Label>
67              <Input
68                id="email"
69                type="email"
70                placeholder="m@example.com"
71                required
72                v-model="email"
73              />
74            </div>
75            <p v-if="error" class="text-sm text-red-500">{{ error }}</p>
76            <Button type="submit" class="w-full" :disabled="isLoading">
77              {{ isLoading ? "Sending..." : "Send reset email" }}
78            </Button>
79          </div>
80          <div class="mt-4 text-center text-sm">
81            Already have an account?
82            <a href="/login" class="underline underline-offset-4">Login</a>
83          </div>
84        </form>
85      </CardContent>
86    </Card>
87  </div>
88</template>

Usage

Once you install the block in your Next.js project, you'll get all the necessary pages and components to set up a password-based authentication flow.

Getting started

After installing the block, you'll have the following environment variables in your .env.local file:

NUXT_PUBLIC_SUPABASE_URL=
NUXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=

  • If you're using supabase.com, you can find these values in the Connect modal under App Frameworks or in your project's API settings.

  • If you're using a local instance of Supabase, you can find these values by running supabase start or supabase status (if you already have it running).

Adding email templates

  1. Add an email template for sign-up to the Supabase project. Your signup email template should contain at least the following HTML:

    <h2>Confirm your signup</h2>
 
<p>Follow this link to confirm your user:</p>
<p>
  <a
    href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email&next={{ .RedirectTo }}"
    >Confirm your email</a
  >
</p>

    For detailed instructions on how to configure your email templates, including the use of variables like {{ .SiteURL }},{{ .TokenHash }}, and {{ .RedirectTo }}, refer to our Email Templates guide.

  2. Add an email template for reset password to the Supabase project. Your reset password email template should contain at least the following HTML:

    <h2>Reset Password</h2>
 
<p>Follow this link to reset the password for your user:</p>
<p>
  <a
    href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next={{ .RedirectTo }}"
    >Reset Password</a
  >
</p>

Setting up routes and redirect URLs

  1. Set the site URL in the URL Configuration settings in the Supabase Dashboard.

  2. Set up the Nuxt.js route that users will visit to reset or update their password. Go to the URL Configuration settings and add the forgot-password route to the list of Redirect URLs. It should look something like: http://example.com/auth/forgot-password.

  3. Update the redirect paths in login-form.vue and update-password-form.vue components to point to the logged-in routes in your app. Our examples use /protected, but you can set this to whatever fits your app.

Further reading