Easily Add Authentication With Nuxt 3 + Supabase

📕 Vue 3 Crash Course: johnkomarnicki.gumroad.com/l/...
🤖 SaaS I'm Building (WebDevDaily): www.webdevdaily.io/
🚀 Join the channel : / @johnkomarnicki
🤖 Website: johnkomarnicki.com/
🐦 Twitter: / john_komarnicki
Timestamps:
0:00 Introduction
0:59 Create Nuxt 3 Application
1:22 Setup Supabase Project
1:50 Implement Nuxt Supabase Module
3:00 Sign up a user
7:15: Sign in a user
9:33 Detect if a user is logged in
10:27 Logout a user
11:37 Protect Authenticated Routes With Middleware
#nuxtjs #nuxt3 #supabase

[@tolgabeyazoglu536]

It is very gratifying that you are making a video about nuxt js 3 when there is such a shortage of resources.

[@psybitcoin]

Nice video. Would love to see more of this. Nuxt + Supabase - Features, Best Practices, SSR, SEO, Tests, etc
Keep it up!

[@JohnKomarnicki]

Thanks! I’ve got a course coming out that I’m working on building a saas application using this stack

[@christopher5731]

Man this video is so well done. Easy to understand, straight to the point. I love it. Keep it up!

[@randel_mcafee86]

Just in time as i have been looking to start a project using nuxt and supabase!

[@StellaCrewGaming]

Thank you so much, was able to figure out my issue thanks to this video!!

[@BloodBunn]

This was so useful, thanks!
Please more nuxt and nuxt + supabase content

[@elementxyz]

Thank you for this wonderful video! Here and there you have to tweak some things, but this helps me a lot!

[@JohnKomarnicki]

Thank you! Shortly after this video they updated the auth setup. I need to get around to creating an updated version

[@sonny5497]

thanks this was very helpful 💯

[@AyyLebo]

Great video, thanks !!

[@JohnKomarnicki]

Glad it was helpful!

[@adydetra_]

bro can you send this source code/repo and put link in description?

[@xeon7879]

Thx for the video! Just a quick question: Would i need to use definePageMeta on every page or is it possible to define it on a layout for example and make it available to all pages? What would be the best solution for this?

[@osherezra131]

TNX

[@larsnobel4279]

Not showing how template is build and no github repo?

[@bombrman1994]

i need the repo so bad, i am stuck

[@antoniogiroz]

Can you create an additional video showing how to create a profile table to store the user info once is registered?

[@JohnKomarnicki]

Yeah, I might do a follow up to a few things in regards to this video and that was one of them

[@ManasMadrecha]

Very very helpful video on authentication. Just one doubt: if I want to add permission system (authorisation), i.e., users with only specific permissions can view certain elements of a page, what should be the best approach?
Create a Users table postgres database in supabase and add different columns for each permission type?
Can we reuse the Users table inside the supabase auth page, instead of creating new one in database page?

[@JohnKomarnicki]

For different user levels you can use what are called custom claims. This is what I’m doing within my application. These values get stored on the raw_app_meta_data field of the users table in the auth schema. I might do a follow up video on this

[@RootsterAnon]

@@JohnKomarnicki please do. also can you show how to login user after he clicked on email link?

[@martinpenev6750]

How does Supabase identify the user? Session ID in local storage? JWT?

[@MrSonicastra]

Hmm for some reason i can't go to /register it redirect me to /login whole the time?

[@BloodBunn]

auth.js from middleware (prevent access to profile page if !user.value)
export default defineNuxtRouteMiddleware(() => {
const user = useSupabaseUser()

if (!user.value) {
return navigateTo('/login')
}
})
auth2.js from middleware (redirect the login page to profile page if logged in)
export default defineNuxtRouteMiddleware(() => {
const user = useSupabaseUser()

if (user.value) {
return navigateTo('/profile')
}
})

[@eltonlrodriguez]

So I reproduced what I got here and I find myself in an interesting dilemma. I am stuck in the login page, and cannot seem to go to register despite my best attempts. The login does not work, despite having manually placing my credentials within supabase in order to test the login, console returns I'm not logged in either. When I check my supabase client to see if the connection string is correct (URL and anon string), it is all correct. Does anyone experience the same issues as myself? Or am I doing something wrong?

[@JohnKomarnicki]

After this video was released supabase updated the auth. If your using nuxt, even if you have your own custom middleware it will still redirect you. You will need to add to the nuxt config a redirect:false property to the supabase config

[@eltonlrodriguez]

@@JohnKomarnicki That did it! Thank you for reaching out and letting me know. It had been bothering me for days trying to understand what I was doing wrong.

[@JohnKomarnicki]

Of course, glad to hear that it helped! If you do wanna learn more about that update specifically you can check out the nuxt supabase docs: supabase.nuxtjs.org/get-started#redirect

[@eltonlrodriguez]

@@JohnKomarnicki I will check it out, thank you!

[@jdhurrell]

@@JohnKomarnicki Thanks for that. I also experienced that same issue recently and it was driving me mad. I opened a project that had been working fine a few weeks ago that suddenly would not allow anonymous access to existing pages. Thanks for the videos.

[@YoheiKung]

why when i add "const client = useSupabaseAuthClient();" i keep get 500 document is not defined

[@adydetra_]

same

[@RonGeorgePile]

they dropped useSupabaseAuthClient(). Alternatively, use useSupabaseClient()

[@Cwoissant]

I guess it changed recently, replace useSupabaseAuthClient(); by useSupabaseClient(); and it should work

[@businessoftechnology]

@@Cwoissant now it appears to be `createClient()`, lol.

[@user-mf2dj1tc2r]

when i created a register page and add supabase it automatically redirect to the login page. any solution?

[@JohnKomarnicki]

There’s a new option you need to define in the supabase config that went love not to long after this video was released. Check out the nuxt supabase docs, it’s highlighted there

[@JenniferBland]

Is there a GitHub repo for this demo?

[@JohnKomarnicki]

There is not. However, this page on the supabase docs should be helpful.
supabase.com/docs/guides/getting-started/tutorials/with-nuxt-3

[@JuanBayonaBeriso]

Does this work in server routes?

[@psybitcoin]

Interesting question

[@bombrman1994]

the default middleware is holding me on login and i cant figure the documentations how to let the user allowed in register page

[@intervelix7822]

did you try in your nuxt config:
supabase: {
redirect: false,
},

[@JohnKomarnicki]

Yea. Since posting this video they changed this. The above solution should fix your issue!

[@masu4644]

no codebase ? -_-

[@husseinalhilfi8186]

It is not secure.

[@Artison14]

Thanks a lot for the help man, you saved my ass

[@JohnKomarnicki]

Glad to hear! 😀

[@pr0viz796]

when i click to register the email and password i'm getting the error: Email rate limit exceeded 429 (Too Many Requests)
const { data, error } = await client.auth.signUp({
email: email.value,
password: password.value,
});
what i'm doing wrong?

[@atharvasurwase6772]

edit suffering the same error

[@BloodBunn]

same problem, did you find a solution?

[@pr0viz796]

@@BloodBunn sadly i did not

[@BloodBunn]

@@pr0viz796 what backend do you use then? Or what auth service?

[@pr0viz796]

@@BloodBunn i didn't finish the project at all as it was a side project