Тёмный

Easily Add Authentication With Nuxt 3 + Supabase 

John Komarnicki
Подписаться 21 тыс.
Просмотров 13 тыс.
50% 1

📕 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

Наука

Опубликовано:

 

24 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 63   
@tolgabeyazoglu536
@tolgabeyazoglu536 10 месяцев назад
It is very gratifying that you are making a video about nuxt js 3 when there is such a shortage of resources.
@christopher5731
@christopher5731 4 месяца назад
Man this video is so well done. Easy to understand, straight to the point. I love it. Keep it up!
@psybitcoin
@psybitcoin 11 месяцев назад
Nice video. Would love to see more of this. Nuxt + Supabase - Features, Best Practices, SSR, SEO, Tests, etc Keep it up!
@JohnKomarnicki
@JohnKomarnicki 11 месяцев назад
Thanks! I’ve got a course coming out that I’m working on building a saas application using this stack
@randel_mcafee86
@randel_mcafee86 Год назад
Just in time as i have been looking to start a project using nuxt and supabase!
@StellaCrewGaming
@StellaCrewGaming 2 месяца назад
Thank you so much, was able to figure out my issue thanks to this video!!
@BloodBunn
@BloodBunn Месяц назад
This was so useful, thanks! Please more nuxt and nuxt + supabase content
@elementxyz
@elementxyz Месяц назад
Thank you for this wonderful video! Here and there you have to tweak some things, but this helps me a lot!
@JohnKomarnicki
@JohnKomarnicki Месяц назад
Thank you! Shortly after this video they updated the auth setup. I need to get around to creating an updated version
@sonny5497
@sonny5497 Месяц назад
thanks this was very helpful 💯
@xeon7879
@xeon7879 11 месяцев назад
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?
@AyyLebo
@AyyLebo 11 месяцев назад
Great video, thanks !!
@JohnKomarnicki
@JohnKomarnicki 11 месяцев назад
Glad it was helpful!
@adydetra_
@adydetra_ 10 месяцев назад
bro can you send this source code/repo and put link in description?
@osherezra131
@osherezra131 9 месяцев назад
TNX
@antoniogiroz
@antoniogiroz 10 месяцев назад
Can you create an additional video showing how to create a profile table to store the user info once is registered?
@JohnKomarnicki
@JohnKomarnicki 10 месяцев назад
Yeah, I might do a follow up to a few things in regards to this video and that was one of them
@ManasMadrecha
@ManasMadrecha 11 месяцев назад
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
@JohnKomarnicki 11 месяцев назад
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
@RootsterAnon 10 месяцев назад
@@JohnKomarnicki please do. also can you show how to login user after he clicked on email link?
@martinpenev6750
@martinpenev6750 8 месяцев назад
How does Supabase identify the user? Session ID in local storage? JWT?
@MrSonicastra
@MrSonicastra 7 месяцев назад
Hmm for some reason i can't go to /register it redirect me to /login whole the time?
@bombrman1994
@bombrman1994 7 месяцев назад
i need the repo so bad, i am stuck
@larsnobel4279
@larsnobel4279 7 дней назад
Not showing how template is build and no github repo?
@user-mf2dj1tc2r
@user-mf2dj1tc2r 4 месяца назад
when i created a register page and add supabase it automatically redirect to the login page. any solution?
@JohnKomarnicki
@JohnKomarnicki 4 месяца назад
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
@eltonlrodriguez
@eltonlrodriguez 8 месяцев назад
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
@JohnKomarnicki 8 месяцев назад
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
@eltonlrodriguez 8 месяцев назад
@@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
@JohnKomarnicki 8 месяцев назад
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
@eltonlrodriguez 8 месяцев назад
@@JohnKomarnicki I will check it out, thank you!
@jdhurrell
@jdhurrell 8 месяцев назад
@@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.
@JenniferBland
@JenniferBland 9 месяцев назад
Is there a GitHub repo for this demo?
@JohnKomarnicki
@JohnKomarnicki 9 месяцев назад
There is not. However, this page on the supabase docs should be helpful. supabase.com/docs/guides/getting-started/tutorials/with-nuxt-3
@JuanBayonaBeriso
@JuanBayonaBeriso Год назад
Does this work in server routes?
@psybitcoin
@psybitcoin 11 месяцев назад
Interesting question
@YoheiKung
@YoheiKung 11 месяцев назад
why when i add "const client = useSupabaseAuthClient();" i keep get 500 document is not defined
@adydetra_
@adydetra_ 10 месяцев назад
same
@RonGeorgePile
@RonGeorgePile 10 месяцев назад
they dropped useSupabaseAuthClient(). Alternatively, use useSupabaseClient()
@Cwoissant
@Cwoissant 9 месяцев назад
I guess it changed recently, replace useSupabaseAuthClient(); by useSupabaseClient(); and it should work
@businessoftechnology
@businessoftechnology 8 месяцев назад
@@Cwoissant now it appears to be `createClient()`, lol.
@bombrman1994
@bombrman1994 7 месяцев назад
the default middleware is holding me on login and i cant figure the documentations how to let the user allowed in register page
@intervelix7822
@intervelix7822 7 месяцев назад
did you try in your nuxt config: supabase: { redirect: false, },
@JohnKomarnicki
@JohnKomarnicki 7 месяцев назад
Yea. Since posting this video they changed this. The above solution should fix your issue!
@masu4644
@masu4644 3 месяца назад
no codebase ? -_-
@BloodBunn
@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') } })
@husseinalhilfi8186
@husseinalhilfi8186 8 дней назад
It is not secure.
@pr0viz796
@pr0viz796 3 месяца назад
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
@atharvasurwase6772 2 месяца назад
edit suffering the same error
@BloodBunn
@BloodBunn Месяц назад
same problem, did you find a solution?
@pr0viz796
@pr0viz796 Месяц назад
@@BloodBunn sadly i did not
@BloodBunn
@BloodBunn Месяц назад
@@pr0viz796 what backend do you use then? Or what auth service?
@pr0viz796
@pr0viz796 Месяц назад
@@BloodBunn i didn't finish the project at all as it was a side project
@Artison14
@Artison14 11 месяцев назад
Thanks a lot for the help man, you saved my ass
@JohnKomarnicki
@JohnKomarnicki 11 месяцев назад
Glad to hear! 😀
Далее
Data Fetching With Nuxt 3
20:31
Просмотров 26 тыс.
Getting Started With Nuxt UI
27:13
Просмотров 12 тыс.
🎙ПОЮ для ТЕБЯ ВЖИВУЮ!
3:05:44
Просмотров 1,4 млн
Improving Security of Nuxt 3
13:12
Просмотров 6 тыс.
Why you should use useState()
17:57
Просмотров 12 тыс.
Nuxt 3 Server Routes Master Course
13:22
Просмотров 18 тыс.
Is Astro A Game Changer For Nuxt and Vue Developers?
24:41
Nuxt DevTools First Look
11:30
Просмотров 6 тыс.
SvelteKit Authentication with Supabase
23:02
Просмотров 34 тыс.