Password-based Authentication

Installation

Set up the Supabase client

This block requires a Supabase client for Vue. If your project already has one, reuse it and update the block's imports to match your client. Otherwise, install the client:

Configure the environment variables described in the Vue client guide before using the block.

Install the block

Usage

Once you install the block in your Vue project, you'll get all the necessary 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:

VITE_SUPABASE_URL=
VITE_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 keys.
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).

Setting up routes and redirect URLs

Set the site URL in the URL Configuration settings in the Supabase Dashboard.
Set up the route 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.
Update the redirect paths in login.vue and update-password.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.
Add the following code in the authenticated route to redirect to login if the user is unauthenticated.

<script setup lang="ts">
import { onMounted } from 'vue'
 
import { createClient } from '@/lib/supabase/client'
 
onMounted(async () => {
  const client = createClient()
 
  const { error } = await client.auth.getUser()
 
  if (error) {
    location.href = '/login'
  }
})
</script>
 
<template>
  <div>Authenticated page</div>
</template>

Additionally, you could utilize the Navigation Guards from vue-router explained here.