Vue 3 Authentication With Supabase - FULL TUTORIAL (Login, Sign Up, Logout, Protected Routes)

Account authentication in Vue 3 can be simple! Using Supabase, we create an application that let's a user sign up, login, logout, check their current session, and protect routes from unauthorized users.

We use a form and connect inputs using v-model, create a supabase client, create a supabase account for our Vue 3 application, and then create auth functionality for our user.

At the end we show how add meta data to your supabase user accounts and how to protect routes using Vue Router and Supabase.

0:00 - What we are building
0:50 - Understanding our application
3:37 - Creating functions/Connecting Inputs
6:42 - Create Supabase Account
8:25 - Create Supabase Client in App
12:10 - Create Sign Up Functionality
15:48 - Login and getSession Functionality
18:34 - Logout Functionality
20:38 - Introducing Protected Route and Metadata
21:20 - Adding Metadata to Accounts
24:24 - Creating a protected route/page
31:02 - Show User Email
32:55 - Review Application
34:17 - Sign Up for Free Course

**** Join Free Course Waitlist ****

**** Finished code ****

**** Get Starter Application to Follow Along ****

Create a folder then:

1. Copy into console:

2. cd or open the folder that is created

3. Copy into console: npm install

4. Start application: npm run dev

**** JavaScript API for Supabase Authentication ****

*** Professional Inquiries ***

[VueReference]

Having a problem with keeping the user logged in after refreshes or closing the browser? Instead of await supabase.auth.getSession(); try this instead:

import { useSupabaseUser } from "~~/.nuxt/imports";

const user = useSupabaseUser();

[CaptainBearddd]

Amazing. This vid was SO easy to follow.

[christianmottaz]

Hello friend, sorry but witch supabase table are you use for this demo… Anyway thanks lot 😊

[recitoprasidha]

i found out that the signup return rate limi error. anyone knows how to fix this?

[yusufshaik]

Thanks for the great tutorial! Really simple explanation of supabase. There is an error that appears in your console after implementing the email display. How can this be fixed?

Also: This authorization confirms that any person is logged in, how do we implement a specific user being logged in. For example, implementing a user settings page that should be private, only accessible for a given user

[skverskk]

Even though I use NextJS, I found this tutorial to be very useful in navigating Superbase. Do you see any security flaws in Superbase, i.e. I believe tokens are stored in local storage? Thx.

[jordivandermeer]

Thanks for the video. Could you make a video about guards with different rolles. I cant find any tutorial about that. So a admin sees different pages then a editor etc. I fixed the login out with refresh by checking if there still is a supbase token stored. Apperently you can give the generasted token a name with storagekey and i just check if it exists.This works great.