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

Поділитися
Вставка
  • Опубліковано 20 сер 2024

КОМЕНТАРІ • 106

  • @DailyWebCoding
    @DailyWebCoding  5 місяців тому +1

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

    • @jorgezozaya5049
      @jorgezozaya5049 5 місяців тому

      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?

  • @jotaroisdarius1918
    @jotaroisdarius1918 9 місяців тому +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  9 місяців тому +2

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

    • @jotaroisdarius1918
      @jotaroisdarius1918 9 місяців тому +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  9 місяців тому

      @@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 9 місяців тому +1

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

  • @kgkcStudios
    @kgkcStudios 7 місяців тому +3

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

  • @devDarshilJadav
    @devDarshilJadav 3 місяці тому +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

  • @user-qi3nq3em7v
    @user-qi3nq3em7v 9 місяців тому +4

    Perfectly explained. Congratulations!

  • @Dreaming-AI
    @Dreaming-AI 6 місяців тому +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 5 місяців тому +1

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

  • @KhalidKhan-xq5xp
    @KhalidKhan-xq5xp 9 місяців тому +1

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

  • @logemann74
    @logemann74 8 місяців тому +2

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

  • @automioai
    @automioai 9 місяців тому +3

    Such a powerful and simple stack 🎉

  • @estevamfurtado1049
    @estevamfurtado1049 21 день тому +1

    GOAT

  • @maskman4821
    @maskman4821 8 місяців тому +1

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

  • @user-dn8up5jp9t
    @user-dn8up5jp9t 8 місяців тому +5

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

  • @panagiotiskaribalis4828
    @panagiotiskaribalis4828 9 місяців тому

    thanks for everything, please continue uploading content !

  • @clipstube7691
    @clipstube7691 4 місяці тому +1

    Great video. Thanks bro!

  • @YaronLavi
    @YaronLavi 8 місяців тому +1

    Thank you very much for this video!

  • @lolwildriftbro
    @lolwildriftbro 8 місяців тому +1

    Very Nice Video thanks bro 🔥

  • @maxrusakovic
    @maxrusakovic 6 місяців тому +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  6 місяців тому

      ua-cam.com/video/KgK7m9zNHP4/v-deo.htmlsi=wz4E5O-Mj9Lct9kR you check this video here

  • @perepalacin4130
    @perepalacin4130 6 місяців тому +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!!

  • @vasyl8889
    @vasyl8889 5 місяців тому +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  5 місяців тому +1

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

  • @ITSKRIMO
    @ITSKRIMO 7 місяців тому

    you saved my life bro.

  • @rockbotico
    @rockbotico 9 місяців тому +1

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

  • @user-qd2wi2mc4l
    @user-qd2wi2mc4l 7 місяців тому

    Very helpful tutorial for me!!

  • @dimitrijacquin5956
    @dimitrijacquin5956 8 місяців тому +1

    Thanks very much

  • @pcv-free-as-a-bird
    @pcv-free-as-a-bird Місяць тому

    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?

  • @Nurpie
    @Nurpie 8 місяців тому +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  8 місяців тому +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.

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 9 місяців тому +1

    Nice , thanks video

  • @hago7568
    @hago7568 7 місяців тому +1

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

  • @abdelhakajbouni3367
    @abdelhakajbouni3367 5 місяців тому +1

    thank you

  • @zorrobasher2947
    @zorrobasher2947 3 місяці тому

    thanks bro

  • @fetheddineaddad402
    @fetheddineaddad402 4 місяці тому

    can you share with us a reset-password tutorial

  • @herbertk9266
    @herbertk9266 9 місяців тому +1

    Thank you

  • @user-zn6qt1kv1u
    @user-zn6qt1kv1u 6 місяців тому

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

  • @jotaroisdarius1918
    @jotaroisdarius1918 6 місяців тому

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

  • @julienheng3880
    @julienheng3880 8 місяців тому

    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?

  • @PranavRungta
    @PranavRungta 7 місяців тому

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

  • @axelpo9390
    @axelpo9390 9 місяців тому +1

    thanks!!!

  • @erracode
    @erracode 8 місяців тому +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  8 місяців тому +1

      you need to disable confirm email

    • @erracode
      @erracode 8 місяців тому

      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

  • @samfights
    @samfights 7 місяців тому

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

  • @markbroomfield1818
    @markbroomfield1818 6 місяців тому

    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

  • @syz3981
    @syz3981 9 місяців тому +1

    Why not add page protection inside the middleware

    • @DailyWebCoding
      @DailyWebCoding  9 місяців тому

      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

  • @user-jt8gd5lh7c
    @user-jt8gd5lh7c 9 місяців тому +1

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

    • @DailyWebCoding
      @DailyWebCoding  9 місяців тому

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

  • @marcinooooo
    @marcinooooo 9 місяців тому +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  9 місяців тому +1

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

  • @user-tp7kh3rb9g
    @user-tp7kh3rb9g 8 місяців тому +1

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

    • @DailyWebCoding
      @DailyWebCoding  8 місяців тому

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

    • @user-tp7kh3rb9g
      @user-tp7kh3rb9g 8 місяців тому +1

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

  • @donkeyblade
    @donkeyblade 8 місяців тому

    Anybody know a fix for permission denied on schema public?

  • @gauravr4127
    @gauravr4127 8 місяців тому +1

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

    • @DailyWebCoding
      @DailyWebCoding  8 місяців тому

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

  • @user-ku4hx9ys2v
    @user-ku4hx9ys2v 7 місяців тому +1

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

    • @DailyWebCoding
      @DailyWebCoding  7 місяців тому +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

  • @adamroach43
    @adamroach43 9 місяців тому +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  9 місяців тому

      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.

  • @olaolak4498
    @olaolak4498 9 місяців тому +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  9 місяців тому

      After login you can read it from the session.

  • @BleisexYT
    @BleisexYT 9 місяців тому +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  9 місяців тому

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

  • @yeongjong9395
    @yeongjong9395 8 місяців тому +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  8 місяців тому

      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 8 місяців тому

      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  8 місяців тому

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

    • @yeongjong9395
      @yeongjong9395 8 місяців тому

      @@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 8 місяців тому

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

  • @bipboprobot
    @bipboprobot 7 місяців тому

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

    • @bipboprobot
      @bipboprobot 7 місяців тому

      Oh I fixed it! Just turn off email Confirmation

    • @perepalacin4130
      @perepalacin4130 6 місяців тому +1

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

  • @AvisekDas
    @AvisekDas 4 місяці тому

    10:48 Bootong🤣

  • @MangoFlamingo
    @MangoFlamingo 6 місяців тому

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

    • @DailyWebCoding
      @DailyWebCoding  6 місяців тому +1

      ua-cam.com/video/KgK7m9zNHP4/v-deo.html. I think this video may help you.

  • @junsgk
    @junsgk 8 місяців тому +1

  • @cupang_sawah4764
    @cupang_sawah4764 9 місяців тому

    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

  • @barsylmaz5019
    @barsylmaz5019 7 місяців тому

    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 ?

  • @muhendisim
    @muhendisim 6 місяців тому

    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  6 місяців тому +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 6 місяців тому

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

  • @marcinooooo
    @marcinooooo 9 місяців тому

    Can you provide final github code repository please?

    • @DailyWebCoding
      @DailyWebCoding  9 місяців тому +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 8 місяців тому

    31:28 why no store to the session??

    • @DailyWebCoding
      @DailyWebCoding  8 місяців тому

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

  • @miloszmilosz123
    @miloszmilosz123 8 місяців тому

    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  8 місяців тому

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

  • @EvanLabourdette
    @EvanLabourdette 4 місяці тому

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

  • @user-eq5ii2tq6g
    @user-eq5ii2tq6g 7 місяців тому

    man, why do you use such a terrible font?

  • @mihirgala
    @mihirgala 8 місяців тому

    you talk too fast.

    • @marciplan
      @marciplan 8 місяців тому +1

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

    • @mathiasriissorensen6994
      @mathiasriissorensen6994 7 місяців тому +1

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