Easily Add Authentication With Nuxt 3 + 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

[@monsieurm2904]

Bring a legend medal to the guy who made this tutorial

[@randel_mcafee86]

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

[@christopher5731]

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

[@BloodBunn]

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

[@adydetra_]

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

[@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

[@StellaCrewGaming]

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

[@larsnobel4279]

Not showing how template is build and no github repo?

[@welkerarantes9073]

Awesome video !!! 🤯 It helped me so much

[@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

[@DanteMishima]

Would have liked to see the sign up login markup

[@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?

[@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?

[@peoray]

how did you verify the user email? cause you can't login without confirming email but not shown in the video

[@masu4644]

no codebase ? -_-

[@bombrman1994]

i need the repo so bad, i am stuck

[@sonny5497]

thanks this was very helpful 💯

[@martinpenev6750]

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

[@JuanBayonaBeriso]

Does this work in server routes?

[@psybitcoin]

Interesting question

[@AyyLebo]

Great video, thanks !!

[@JohnKomarnicki]

Glad it was helpful!

[@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

[@osherezra131]

TNX

[@hugomejia7826]

Thanks for the video, really helped. However, does anyone knows how to handle the email confirmation callback? I'm having trouble to manage, what to do with the "code" param that's returned by Supabase to my Nuxt app. As I'm using client side register, I'm not getting a has_token but don't know wha to do with the "code", shall I store it ? Ignore it ? Any help highly appreciated 👍

[@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.

[@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') } })

[@LOKESHSRINIVAS-x1z]

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

[@MrSonicastra]

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

[@fedvvvv]

Same for me. This is the default behaviour for the supabase nuxt module. For some reason the devs thought this would be a smart idea. The only way I was able to get the register page to work is by adding this to my nuxt config: supabase: { redirectOptions: { exclude: ["/register"], }, }, With this, you will have to create your own nuxt middleware to handle route guarding.

[@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!

[@husseinalhilfi8186]

It is not secure.

[@fedvvvv]

Ok. Why? Very useful comment, dude.

[@iml404]

9 from 10 nuxt developerts don't use supabase, you tutorial sucks

[@JohnKomarnicki]

Thanks!

[@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

[@Artison14]

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

[@JohnKomarnicki]

Glad to hear! 😀