Next.js: Authentication (Best Practices for Server Components, Actions, Middleware)
Вставка
- Опубліковано 20 лип 2024
- Best practices for authentication in Modern Next.js and React: Server Components, Server Actions, Middleware.
Docs: rc.nextjs.org/docs/app/buildi...
Code: github.com/vercel-labs/app-ro...
00:00 Intro
00:25 Forms and Server Actions
00:51 Form validation
01:06 useActionState
01:45 Creating a user
02:14 Session management
04:13 Authorization
04:37 Middleware
05:33 Data Access Layer
07:35 API Minimization
08:03 Data Transfer Objects
09:45 Server Actions
10:19 Conditional Rendering
10:50 Client Context Providers
11:14 Summary
Your voice is healing. I can watch it all day.
Very concise and to the point approach makes this short tour to auth a memorable one. Thank you. 👏
The vibe of this video brings a lot of peace, I really liked it, congratulations on the content 😁
Your smile is relaxing and refreshing. You made the tutorial seems simple
Video quality is top-notch, great job!
I'm amazed by the quality of the video, please do more stuff like this :)
Amazing video, no bs, no fluff straight to the point and no spoon-feeding thanks!
Honestly, this is the clearest tutorial I have ever seen. Continue with this method; it works well.
This is useful, high quality content that is executed professionally. Clearly this took a lot of work. Love the format and look forward to watching the rest of the series. Kudos!
Your explanation on this topic is the best i have come across, and I absolutely love the meditation sound
Such a complex topic yet its explained with ease, thanks for this💯
Just a minute in and i am appreciating the amount of research and sweat that went into editing this. Beautiful way of animating code. :D
What a professional tutorial. Can you show us how you made it? The progression of the code on the screen is perfect.
This was such a complex topic, and yet you explained it with such simplicity. >>
I had no idea that the quality of this tutorial would be this high before I clicked on this. Great video!
I was literally struggling with this yesterday LOL thanks
I have seen you while learning to make dashboard-app 😄
That documentation in Next-JS is so good, I learnt a lot from it!
Being new to NextJS I appreciate your video. It is possibly one of the best videos I have seen. Great work and thank you!
Appreciate it, welcome. Let us know if you have any feedback.
Incredible content, straightforward and didactic! Thank you
Wow! Congratulations Delba.
crisp Clear & Perfect .. Thank You
Fantastic video. Would love to see more videos like this discussing best practices
That's the plan!
Really like the simplicity in the video... Relaxing video!
I would love to see some advance patterns to build real world apps.
Glad to hear it.
I plan to 🙏
You’r videos are top notch, please keep uploading
As always a top-notch content from Delba
Just discovered you and wow, amazing, really good information, concise, your voice it's amazing, and you have such a knowledge, thanks for sharing.
Thank you 🙏
This is the most perfect tutorial video!! Thank u sm!
your name defines your videos. they are so calming and its good for learning
Ngl this has been one of the most consise and informative NextJs video that i've ever seen.
Kind of you to say, appreciate it!
This is so elegant & perfect, keep up the good work! subbed!
Thanks, welcome!
Really Really REALLY informative, thank you for making the video
Great video Delba, thanks so much, it's just what I need right now. 🙌🏻
If there was an award for the video of the year in tech, I would vote on this one.
Really quality content.
Wow, thank you!
@@Delba How do you create your videos?
Быстро нашли новую связку, молодцы, ну а я с вами всегда в профите!
Very well explained, thanks for sharing with us.
Brilliant tutorial best explained auth one I've come across
this one is good , will need more videos like this
Thank you for this video. You covered the topic of authentication very nicely to a beginner and it was clear and concise
Awesome, great to hear!
Thank you for this great and quick video, really helpful
You're welcome!
Thank you very much for sharing such a useful resource!
BTW the animations and look and feel are top notch
Glad to hear it!
Sempre que eu vejo um vídeo já pulo aqui, a qualidade ta absurda
obrigada meus amores brasileiros 🇧🇷
Love the content!!! Right when I needed it! Thanks Delba!
Glad to hear it!
Thank you for your content, it's always very useful. 🙏
This is a great video 👏👏👏👏👏
I do have a hard time using server forms… but for login it’s fine. Thanks for the vid
Thanks alot i literally was looking for this
Nice format, the best on Yt, thank y - pls keep going...✨
Great content as always
a real gem ✨ of information and presentation! thank you a lot Delba for this remarkable video!
Appreciate it!
It was very very helpful. Thank you so much
Hi Delba, please bring such content regularly, it really helps😄
Glad to hear it, that's the plan!
Muito bom o vídeo, salvou meu dia, estava com um bug usando next-auth e quebrando a cabeça, consegui adaptar a sua solução.
Thanks a lot, you're Rock.
I like a lot your contents.
Feliz em ouvir
hats off 👌.
great explaination.
The cutest person making tutorials
thanks for the video really simple and professional
Very nice explanation, good video quality and sound , but I feel that the environment is more darker than usual. But the rest great. Excited to the Next ones.
Omg! It was very smooth
Thank you!
Insane editing!
Very nice thanks Delba :)
Cheers Guillaume!
Life saver, thank you so much for this
A great video. Loved your voice.
I will definitely creating this theme extension for VS Code, I really like the colours and the dark background. It is quite minimalistic.
Please make more quality videos. Really liked your content. Thanks
Great explanation
that felt like an Ai , but that was the shortest and the clearest auth explanation I ever saw
Really a clear and understanding video it will be more great if it includes window authentication too as a single sign-in
Thnx for sharing miss Delba
i didn't saw your whole video. i just saw you and subscribed.
I like it and I subscribe. I love the way and the effort you put into making this video.
Welcome!
Thanks for your awesome explaintion
Связка просто имба!
this video is a life saver. Thanks a lot !
Amazing tutorial, but I am sure 50k people are here for your voice and the 8k for nextjs :D
Thank you so much. You explained very well.
Please keep creating tutorial like that. Thank you mam
Delba beauty with brain ❤. Love your content always
I’m gunna keep building in nextjs just so I can watch your videos 😂
Thank you so much for this video, it’s very clear & simple to understand with server actions now! 😊
(btw what tools are you using for such an incredible video)
Glad to hear it.
I used Remotion.
amazing video Delba 😄
You and Lee need a raise 😊😊
Haha thanks!
It used to be simple, there was clear separation between what run on server, what count as react component, especially serversideprop, used to love that. Now you need to 'mark' which file runs where, even when you used it on a react component, otherwise it'll be marked as server-side and gave you error DURING BUILD, and not while coding. Beautiful.
There is a challenge of demarkation when you use the same component model and language on the client and server, however we believe the composability and shareability is worth it.
You should be getting errors during development by the way, can you share an example of something only erroring in build? Perhaps we can fix it.
Good job Delba!!!
Well done. Just, well done.
Need someone like her in my life
you have very friendly style explanation but you are doing it quickly
so i need to rerunning the video many times to get the idea 😅😅
good, a follow up video with social login would be amazing!
Amazing quality and to the point content.
Just curious what combination of tools and softwares are you using for the code animations and transitions?
¡Muchas gracias!
Amazing 👍
i love this video! thank you
Very nice! ASMR coding with Delba hahah
I really enjoyed your video on. It's rare to find tutorials that avoid third-party libraries, and yours made everything so easy to understand. Thanks for sharing your knowledge!
Thank you for saying so.
Yeah the extreme reliance on 3rd party services to do anything in tutorials is alarming really. People should learn the basics and then use services if they need to because they will then understand what those services provide and what problems they solve for them, if any.
Oh my god. After watching your video I thought even the documentation on vercel does not explain the things the way you did ao sweetly. Then I subscribed your channel and started exploring your channel and found out that you work at vercel. The way you explained things in calm and sweet voice with smile it was just way way more digestable than any other video or documentation. Thankyou. You deserve to be at vercel. And if possible please make more videos explaining how nextJS works.
In general documentation on next-auth are utterly atrocious. Many things (like e.g. clearing the client cookies on logout, or how to read them, the whole bruhaha with RSC while using next-auth v4 and so on) are either not entirely clear or "exercise left to the reader".
Take this video for example: authentication *without* using next-auth - because at least this way you get to have some agency on what actually happens as you login/navigate in the application.
You should definitely make a whole Next.js course ! 😀
I'll be making more Next.js content atleast.
Great reference thnx
No. 1 NextJS Content Creator. Thanks for making this Delba!
amazing
Great share 😊🙌
Excellent video! Is there a chance that there is a github branch with the Providers paradigm? I really want to examine this particular pattern, since, after all, Context is a client thing and (theoretically) you can't have server components "inside" client components. I would love to see Next's approach on this (perhaps using internally ServerContext or something more interesting/exotic?).
Thanks all in all, a very thorough run-down on what's what on the somewhat thorny authentication/authorisation subject!
I love your voice 😭❤️
really fascinating explaining and the animations were superb, can you show how you made them?
Thanks, I use a tool called Remotion.
The moment the food arrived was the moment of victory (It was funny haha)