Next.js 14 + @supabase/ssr: authencation, oauth, page protection,CRUD

Sdílet
Vložit
  • čas přidán 8. 09. 2024

Komentáře • 107

  • @DailyWebCoding
    @DailyWebCoding  Před 6 měsíci +1

    czcams.com/play/PLYHXTr4kGJjEPOZ_RqZG2uIguJCdA5ezT.html
    if you faced issue, you can checkout my latest playlist on how to connect with supabase.

    • @jorgezozaya5049
      @jorgezozaya5049 Před 5 měsíci

      Hi sir,
      I've been on a pretty eclectic journey through the tech landscape, from diving deep into meditation and mindfulness to exploring the intricacies of data storytelling. Recently, I've been channeling my energy into becoming a more proficient founder, based out in the vibrant tech scene of Vancouver, Canada.
      Would you be interested in handling the auth process and onboarding logic for a new platform?

  • @kgkcStudios
    @kgkcStudios Před 8 měsíci +3

    Thanks for the tutorial! I was struggling using the Supabase docs but you explained how to do just what I needed.

  • @devDarshilJadav
    @devDarshilJadav Před 4 měsíci +1

    one small suggestion. we don't need to convert the response to sring then again convert it to json. we can do it directly

  • @jotaroisdarius1918
    @jotaroisdarius1918 Před 10 měsíci +5

    I had to go though a lot to find a solution for all the problems I had today, only for you to publish this hours later :(

    • @DailyWebCoding
      @DailyWebCoding  Před 10 měsíci +2

      I wish I had done this faster😁. Don’t forget to give me feedback or any suggestions that could improve this

    • @jotaroisdarius1918
      @jotaroisdarius1918 Před 10 měsíci +1

      @@DailyWebCoding nothing to say, really, i like your videos, but i have a question about supabase if you wanna help me.
      i see that we have a client key and a service key which bypasses row level security.
      does that mean i can enable row level security and not set up any policies and then just use the service role key on the server? is this a valid/common approach?

    • @DailyWebCoding
      @DailyWebCoding  Před 10 měsíci

      @@jotaroisdarius1918 Not sure I understand completely. But service role key is for admin api only and it can not be use to insert to data table. supabase.com/docs/reference/javascript/admin-api

    • @PranjalPruthi
      @PranjalPruthi Před 9 měsíci +1

      Lol I'm the same stage 😂 u but luckily I found this video in time now imma watch whole n learn ❤

  • @user-qi3nq3em7v
    @user-qi3nq3em7v Před 9 měsíci +4

    Perfectly explained. Congratulations!

  • @logemann74
    @logemann74 Před 8 měsíci +2

    great stuff. If you have more protected routes than just /todo, i would move the session-check in the layout though.

  • @Dreaming-AI
    @Dreaming-AI Před 7 měsíci +4

    If you have this "Error: Cookies can only be modified in a Server", you have to remove set and remove methods from the createServerClient funcion.

  • @petersusan215
    @petersusan215 Před 6 měsíci +1

    You really know what's going on with your code,I like that,now subscribed.

  • @KhalidKhan-xq5xp
    @KhalidKhan-xq5xp Před 9 měsíci +1

    Thanks. This video is exactly what I Needed. Please make more Supabase videos

  • @automioai
    @automioai Před 10 měsíci +3

    Such a powerful and simple stack 🎉

  • @user-dn8up5jp9t
    @user-dn8up5jp9t Před 8 měsíci +5

    I get error after 1-2 hours: Error: Cookies can only be modified in a Server Action or Route Handler

  • @maxrusakovic
    @maxrusakovic Před 7 měsíci +2

    Thank you for great video. Could you, please, explain, how to use conditional rendering in 'use client' navbar, for example. How to listen in client component for supabase.auth status change?

    • @DailyWebCoding
      @DailyWebCoding  Před 7 měsíci

      czcams.com/video/KgK7m9zNHP4/video.htmlsi=wz4E5O-Mj9Lct9kR you check this video here

  • @maskman4821
    @maskman4821 Před 9 měsíci +1

    Thank you for this tutorial, you've saved my day 🙏

  • @YaronLavi
    @YaronLavi Před 9 měsíci +1

    Thank you very much for this video!

  • @clipstube7691
    @clipstube7691 Před 5 měsíci +1

    Great video. Thanks bro!

  • @panagiotiskaribalis4828
    @panagiotiskaribalis4828 Před 9 měsíci

    thanks for everything, please continue uploading content !

  • @perepalacin4130
    @perepalacin4130 Před 6 měsíci +1

    Hey man thanks a lot for your tutorial, I really found it super useful! Could you please create a tutorial on how to call superbase server actions or api routes from client components to insert or fetch data from a supabase table? Thanks!!

  • @estevamfurtado1049
    @estevamfurtado1049 Před měsícem +1

    GOAT

  • @Nurpie
    @Nurpie Před 9 měsíci +2

    You added set cookies in server client but it says at 1:58 on the Supabase website
    NOTE
    Server Components only have read access to cookies.
    Trying to understand, why?

    • @DailyWebCoding
      @DailyWebCoding  Před 9 měsíci +1

      The reason that I used supabase server client to SET adnd REMOVE cookie is because my login implementation is in the server action. If I create supabase server client only read cookie only, I can't login and user will not have a session in the cookie.
      If we do authentication using client component, then we don't have to add SET or REMOVE.

  • @lolwildriftbro
    @lolwildriftbro Před 8 měsíci +1

    Very Nice Video thanks bro 🔥

  • @hago7568
    @hago7568 Před 8 měsíci +1

    ขอบคุณมากนะจ้าาา

  • @dimitrijacquin5956
    @dimitrijacquin5956 Před 8 měsíci +1

    Thanks very much

  • @rockbotico
    @rockbotico Před 10 měsíci +1

    Thanks for share, It saves me a lot of time.

  • @user-tp7kh3rb9g
    @user-tp7kh3rb9g Před 9 měsíci +1

    Thank you so much for your dedication!! And I subscribed to your CZcams channel.
    I have a question, how do you display an error in the bottom right corner of the browser?

    • @DailyWebCoding
      @DailyWebCoding  Před 9 měsíci

      ui.shadcn.com/docs/components/toast you can use this one to toast error or any messages u want

    • @user-tp7kh3rb9g
      @user-tp7kh3rb9g Před 9 měsíci +1

      @@DailyWebCoding Oops... I thought it was a library, but it turned out to be a toast message hahaha

  • @user-qd2wi2mc4l
    @user-qd2wi2mc4l Před 8 měsíci

    Very helpful tutorial for me!!

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt Před 9 měsíci +1

    Nice , thanks video

  • @samfights
    @samfights Před 8 měsíci

    i'm using supa with clerk.. how can i get the token(from clerk) on the server side?

  • @pcv-free-as-a-bird
    @pcv-free-as-a-bird Před 2 měsíci +1

    Hi there!! Thank you for the video it was really nice.. I’ve setup supabase/srr on my Remix js app. The createBroswerClient and createServerClient works!!
    But I still don’t understand the concept between when to use the Broswer Client or the Server Client.. I know that when it’s for front-end is the Broswer Client but I think I would need a real life example to understand both. Anyone can help me?

    • @TrollPirate
      @TrollPirate Před 11 dny

      I am in the same boat. Unfortunately, the supabase docs are not very helpful in this area either. Did you manage to figure it out?

  • @herbertk9266
    @herbertk9266 Před 10 měsíci +1

    Thank you

  • @marcinooooo
    @marcinooooo Před 9 měsíci +1

    Hey, thank you for the video! - I have subscribed!
    So my question is, how can we now do that:
    - user can log in and craete his own posts, and only he can edit them, but everyone can read them?
    - upload photots?
    Is it possible, would love to see a tutorial on that

    • @DailyWebCoding
      @DailyWebCoding  Před 9 měsíci +1

      Yes I will check on this after I finish my next-e-commerce tutorial . Stay tune for that

  • @vasyl8889
    @vasyl8889 Před 6 měsíci +1

    who knows why i can't see result from SignIn or SignOut in the client side and can' tdisplay a toast, like in the server post does corectly, but nothing returned to rhe client?

    • @DailyWebCoding
      @DailyWebCoding  Před 6 měsíci +1

      If you still faced the issue you can join my discord. I can help you over there

  • @erracode
    @erracode Před 9 měsíci +1

    I cant get the error of the user is already register, is it maybe i need to look a previous video or something?

    • @DailyWebCoding
      @DailyWebCoding  Před 9 měsíci +1

      you need to disable confirm email

    • @erracode
      @erracode Před 9 měsíci

      for anyone getting this same error, you need to disable email confirmation on supabase dash, otherwise check if the response has any field pointing if the user its already created

  • @gauravr4127
    @gauravr4127 Před 9 měsíci +1

    What's the setting you have used to create space between lines in vscode?

    • @DailyWebCoding
      @DailyWebCoding  Před 9 měsíci

      I set my line height to 40. You can go to setting search for line height and change the value.

  • @ITSKRIMO
    @ITSKRIMO Před 8 měsíci

    you saved my life bro.

  • @markbroomfield1818
    @markbroomfield1818 Před 7 měsíci

    Great video as always my friend 👍. Is there a way I can get the users to do item to render on say another page? So basically they are just updating other pages like adding a listing for non-users to see it.
    Hope this makes sense lol

  • @zorrobasher2947
    @zorrobasher2947 Před 4 měsíci

    thanks bro

  • @user-jt8gd5lh7c
    @user-jt8gd5lh7c Před 9 měsíci +1

    Hi Thanks alot brother, for this amazing video. when is your next video? (:

    • @DailyWebCoding
      @DailyWebCoding  Před 9 měsíci

      Now I am editing my new video. Hopefully I finish it by today 😅

  • @axelpo9390
    @axelpo9390 Před 9 měsíci +1

    thanks!!!

  • @adamroach43
    @adamroach43 Před 9 měsíci +1

    The server.ts function to get the supabase client, doesn't the documentation state that server components can only READ cookies? Or am I misunderstanding. Thanks

    • @DailyWebCoding
      @DailyWebCoding  Před 9 měsíci

      The reason that I used supabase server client to SET adnd REMOVE cookie is because my login implementation is in the server action. If I create supabase server client only read cookie only, I can't login and user will not have a session in the cookie.

  • @julienheng3880
    @julienheng3880 Před 8 měsíci

    Thank you for your tutorial.
    I want to retrieve a user's email to check if the email exists in the supabase before sending the reset password link to their email. How do I check the user's email without session?

  • @olaolak4498
    @olaolak4498 Před 9 měsíci +1

    Hi thank you for the video, I have a problem with OAuth with google is there a way to get the uid after logging in?

    • @DailyWebCoding
      @DailyWebCoding  Před 9 měsíci

      After login you can read it from the session.

  • @BleisexYT
    @BleisexYT Před 10 měsíci +1

    Could you make it possible to choose between admin and user in the registration form? In addition to that in the "dashboard" of the admin can modify the data of normal users and create "TODOs groups" where the user can register that group of "TODOs" and add a new one, how would it be something like that?

    • @DailyWebCoding
      @DailyWebCoding  Před 10 měsíci

      Yes sure in my next video, I am doing something similar to this I will send more detail in discord 😊

  • @user-zn6qt1kv1u
    @user-zn6qt1kv1u Před 6 měsíci

    How to get the session and user data on the client side when we authenticate using server side?

  • @user-ku4hx9ys2v
    @user-ku4hx9ys2v Před 8 měsíci +1

    is there any specific reason that you didn't use auth helpers for next.js

    • @DailyWebCoding
      @DailyWebCoding  Před 8 měsíci +2

      We generally recommend using the new @supabase/ssr package instead of auth-helpers. @supabase/ssr takes the core concepts of the Auth Helpers package and makes them available to any server framework. Check out the migration doc to learn more. This is from supabase doc

  • @yeongjong9395
    @yeongjong9395 Před 9 měsíci +1

    Hi. Thanks for the video. I tried to use another middleware (middleware chaining) to check for the user session using the server client but it always returns back null value. I use client auth for sign in and it does update the last sign in session on supabase. Please guide. Thanks.

    • @DailyWebCoding
      @DailyWebCoding  Před 9 měsíci

      I am not sure next.js support this. Base on this documentation. We can have only one middleware. nextjs.org/docs/messages/nested-middleware

    • @yeongjong9395
      @yeongjong9395 Před 9 měsíci

      I’ll change to one middleware later and see how it works. Any guidance on why is the getSession() using supabase/ssr returns null value?

    • @DailyWebCoding
      @DailyWebCoding  Před 9 měsíci

      @@yeongjong9395 It shouldn't if the user is authenticate. just make sure the user is login

    • @yeongjong9395
      @yeongjong9395 Před 9 měsíci

      @@DailyWebCoding I'm using createBrowserClient() for sign in. I wonder can I check for the session in the middleware? I tried get the session in the middleware (which I have already combined into 1 middleware file) but still it returns null. I did some investigation on the request and response outputs, I noticed something strange where when I change the cookies name to sb-localhost-auth-token, it works, but not during sb-[supabase project id]-auth-token

    • @yeongjong9395
      @yeongjong9395 Před 9 měsíci

      @DailyWebCoding I had a silly mistake (wrong env variables) and is resolved now. Thanks.

  • @syz3981
    @syz3981 Před 9 měsíci +1

    Why not add page protection inside the middleware

    • @DailyWebCoding
      @DailyWebCoding  Před 9 měsíci

      Yep sure we can do it from middleware as well and in my case I just want to read session from page so I can use later on

  • @fetheddineaddad402
    @fetheddineaddad402 Před 5 měsíci

    can you share with us a reset-password tutorial

  • @junsgk
    @junsgk Před 9 měsíci +1

  • @jotaroisdarius1918
    @jotaroisdarius1918 Před 6 měsíci

    9:18 You don't need to return the redirect function

  • @MangoFlamingo
    @MangoFlamingo Před 6 měsíci

    Is there a way to have a listener to refresh a header component and display the user?

    • @DailyWebCoding
      @DailyWebCoding  Před 6 měsíci +1

      czcams.com/video/KgK7m9zNHP4/video.html. I think this video may help you.

  • @barsylmaz5019
    @barsylmaz5019 Před 8 měsíci

    Thank you so much, this helped me a lot ! I have one problem tho when i deploy to Vercel, page protection does't work properly, it seems after the iogging in, readUserSession returns null initially but if i remove the protection and try refreshing the protected page after logging in, session data is returned correctly. I don't have this problem on local btw, any ideas ?

  • @PranavRungta
    @PranavRungta Před 7 měsíci

    I'm getting a fetch failed error when registering new user. Does anyone know how to fix it?

  • @bipboprobot
    @bipboprobot Před 7 měsíci

    Thanks for the tutorial! When i try to get user session my data return null {"session":null}

    • @bipboprobot
      @bipboprobot Před 7 měsíci

      Oh I fixed it! Just turn off email Confirmation

    • @perepalacin4130
      @perepalacin4130 Před 7 měsíci +1

      @@bipboprobot thanks a lot, I was facing the same problem

  • @muhendisim
    @muhendisim Před 6 měsíci

    Thank you for awesome tutorial. But is it working on Vercel production? (Local is completely working) Oauth is working but redirect is working difrrently only on production. redirect isnt work just get back with code token.

    • @DailyWebCoding
      @DailyWebCoding  Před 6 měsíci +1

      Thank you so much for your feedback. Regard to your issue, make sure you set SITE URL to your domain url. Hopefully this could solve your issue.

    • @muhendisim
      @muhendisim Před 6 měsíci

      ​@@DailyWebCoding Thank you bro. I tried before but it doesn't work. But i figured out. I used same localhost:3000 at SiteURL. After I added 'mydomain/auth/callback' at Redirect URLs. Before I just added 'mydomain' That's why redirect wasn't work.

  • @donkeyblade
    @donkeyblade Před 8 měsíci

    Anybody know a fix for permission denied on schema public?

  • @cupang_sawah4764
    @cupang_sawah4764 Před 9 měsíci

    thanks for the video, grab code from github but i got some error while running npm run dev "failed to load SWC binary for win32/64"
    any suggestion?
    edit: it works idk why but suddenly work as well

  • @AvisekDas
    @AvisekDas Před 4 měsíci

    10:48 Bootong🤣

  • @marcinooooo
    @marcinooooo Před 9 měsíci

    Can you provide final github code repository please?

    • @DailyWebCoding
      @DailyWebCoding  Před 9 měsíci +1

      github.com/Chensokheng/next-14-supabase-ssr/tree/demo you can check here.
      If you have more question, you join my discord and ask more question as well.

  • @junsgk
    @junsgk Před 9 měsíci

    31:28 why no store to the session??

    • @DailyWebCoding
      @DailyWebCoding  Před 9 měsíci

      I think i made a mistake here. We can remove it. Since supabase do not cache the request inside next.js

  • @miloszmilosz123
    @miloszmilosz123 Před 9 měsíci

    Great video! Everything was explained clearly. However, I have a question: when I'm logging in, it is sending multiple tokens at once. After logging in twice, I have 107 authentication requests. Any ideas?

    • @DailyWebCoding
      @DailyWebCoding  Před 9 měsíci

      I am not sure why sure at well. I have never faced this issue before.

  • @EvanLabourdette
    @EvanLabourdette Před 5 měsíci

    Waste of time !
    Not working even with the full branch withe the all information and the good database url

  • @user-eq5ii2tq6g
    @user-eq5ii2tq6g Před 8 měsíci

    man, why do you use such a terrible font?

  • @mihirgala
    @mihirgala Před 9 měsíci

    you talk too fast.

    • @marciplan
      @marciplan Před 9 měsíci +1

      He's doing his best. No need for this :)

    • @mathiasriissorensen6994
      @mathiasriissorensen6994 Před 8 měsíci +1

      @@marciplan agree here and you could set the speed down yourself :)

  • @abdelhakajbouni3367
    @abdelhakajbouni3367 Před 6 měsíci +1

    thank you