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?
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?
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
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?
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
@@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.
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
@@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.
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
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') } })
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.
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?
It is very gratifying that you are making a video about nuxt js 3 when there is such a shortage of resources.
Nice video. Would love to see more of this. Nuxt + Supabase - Features, Best Practices, SSR, SEO, Tests, etc
Keep it up!
Thanks! I’ve got a course coming out that I’m working on building a saas application using this stack
Just in time as i have been looking to start a project using nuxt and supabase!
This was so useful, thanks!
Please more nuxt and nuxt + supabase content
Man this video is so well done. Easy to understand, straight to the point. I love it. Keep it up!
Thank you for this wonderful video! Here and there you have to tweak some things, but this helps me a lot!
Thank you! Shortly after this video they updated the auth setup. I need to get around to creating an updated version
Awesome video !!! 🤯 It helped me so much
Thank you so much, was able to figure out my issue thanks to this video!!
bro can you send this source code/repo and put link in description?
Not showing how template is build and no github repo?
how did you verify the user email? cause you can't login without confirming email but not shown in the video
thanks this was very helpful 💯
i need the repo so bad, i am stuck
Can you create an additional video showing how to create a profile table to store the user info once is registered?
Yeah, I might do a follow up to a few things in regards to this video and that was one of them
Great video, thanks !!
Glad it was helpful!
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?
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?
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
@@JohnKomarnicki please do. also can you show how to login user after he clicked on email link?
How does Supabase identify the user? Session ID in local storage? JWT?
Does this work in server routes?
Interesting question
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?
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
@@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.
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
@@JohnKomarnicki I will check it out, thank you!
@@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.
when i created a register page and add supabase it automatically redirect to the login page. any solution?
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
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')
}
})
no codebase ? -_-
Is there a GitHub repo for this demo?
There is not. However, this page on the supabase docs should be helpful.
supabase.com/docs/guides/getting-started/tutorials/with-nuxt-3
TNX
why when i add "const client = useSupabaseAuthClient();" i keep get 500 document is not defined
same
they dropped useSupabaseAuthClient(). Alternatively, use useSupabaseClient()
I guess it changed recently, replace useSupabaseAuthClient(); by useSupabaseClient(); and it should work
@@Cwoissant now it appears to be `createClient()`, lol.
Hmm for some reason i can't go to /register it redirect me to /login whole the time?
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.
the default middleware is holding me on login and i cant figure the documentations how to let the user allowed in register page
did you try in your nuxt config:
supabase: {
redirect: false,
},
Yea. Since posting this video they changed this. The above solution should fix your issue!
It is not secure.
Ok. Why? Very useful comment, dude.
Thanks a lot for the help man, you saved my ass
Glad to hear! 😀
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?
edit suffering the same error
same problem, did you find a solution?
@@BloodBunn sadly i did not
@@pr0viz796 what backend do you use then? Or what auth service?
@@BloodBunn i didn't finish the project at all as it was a side project