Next.js App Router Authentication (Sessions, Cookies, JWTs)

  Рет қаралды 131,062

Lee Robinson

Lee Robinson

3 ай бұрын

Learn the foundations of session based authentication through cookies in the Next.js App Router, and how community libraries like Auth.js build on top of this model. Auth is a deep topic, so let me know what else you want to see here!
◆ Basic: github.com/balazsorban44/auth...
◆ NextAuth: github.com/vercel/next.js/tre...
◆ Docs: nextjs.org/docs/app/building-...

Пікірлер: 232
@codewithantonio
@codewithantonio 3 ай бұрын
Always lovely to see official guides on these important topics :)
@eddi3ms
@eddi3ms 3 ай бұрын
Lee Robinson is awesome, always with videos right on point. Also thanks for your guide on next-auth, I'm almost done with it.. 1 or 2 hours left xD. Learning a lot
@filthynirvana5553
@filthynirvana5553 3 ай бұрын
hey there ! just wanted to tell you that your videos are amazing. thank you for your efforts, keep UP the good work
@masaratech
@masaratech 3 ай бұрын
@codewithantonio thank you for your efforts, your work is admirable and helped me alot.
@rig-xf6or
@rig-xf6or 3 ай бұрын
Antonio the goat of web tutorials. Really enjoyed your next-auth v5 tutorial.
@Pra2wins
@Pra2wins 3 ай бұрын
Thanks Antonio for your auth tutorial
@franknguyen8396
@franknguyen8396 3 ай бұрын
Nice and concise tutorial on a subject matter that tend to be very tedious and confusing. Great job Lee!
@Leo-dx6uc
@Leo-dx6uc 3 ай бұрын
Looking for this tutorial for months. So nice to have a official tutorial to follow. Thanks!
@WebDevEducation
@WebDevEducation 3 ай бұрын
Awesome stuff! And really appreciate how the Next docs are being filled out to cover these things ❤
@williamschaefermeyer7007
@williamschaefermeyer7007 3 ай бұрын
Please keep uploading these videos how you have been the last bit I've been really enjoying them and finding them useful
@skverskk
@skverskk 3 ай бұрын
Finally, an easy tutorial explaining Next Authentication using Jose. Well done. I;m a new subscriber.
@daytatech-youtube
@daytatech-youtube Ай бұрын
I think authentication is a super important topic for web development and next.js and I think you guys should expand more on this. Security is the most important thing for modern web applications and I think you guys should keep talking about it. Great work.
@Adrian_Galilea
@Adrian_Galilea 3 ай бұрын
This was incredibly insightful, thanks Lee
@RaulHernandez-to3ce
@RaulHernandez-to3ce 3 ай бұрын
You have no idea how helpfull is this video to me. Thanks a lot for an insightful explanation and for the amazing content
@user-nk6ih7uh1h
@user-nk6ih7uh1h 3 ай бұрын
Great video! Can't wait to see the full guide on the updated next-auth lib!
@DominikSipowicz
@DominikSipowicz 3 ай бұрын
The way this video explains Auth in Next.js reminds me of how Dan explained React Redux. Next.js App Router next-auth changes are also super exciting!
@user-ty5tg2ji1x
@user-ty5tg2ji1x 3 ай бұрын
look at this how awesome. giving lightweith version of topic is really good. thanks man
@iqbalmuhtadin5614
@iqbalmuhtadin5614 2 ай бұрын
I just finished this feature tonight. after that I watched KZfaq and saw that you had made the tutorial. this is such a coincidence. keep up the spirit, Bro. 😁
@6099x
@6099x 3 ай бұрын
awesome to see attention to auth* - its such a crucial topic! Would love to see ways to work with open source solutions like keycloak or Ory + Next. They solve nearly anything a large scale product might need while being completely open source
@etsonrap9867
@etsonrap9867 Ай бұрын
Awesome! I was looking for this explanation, thanks!!
@alexg7282
@alexg7282 3 ай бұрын
Thanks ! we need more content about authentification. Very usefull topic.
@TechCode50
@TechCode50 3 ай бұрын
Thank you !! I've been banging my head against the wall on this for the past 2 hours! More on authentication with auth.js/App/RSC/Google Login please !
@ryanbell5779
@ryanbell5779 19 күн бұрын
Wow finally, thank you for this video. This really helped my understanding of how to implement my auth flow!
@damalo
@damalo 2 ай бұрын
Great video, would love to learn more about auth!
@randomforest_dev
@randomforest_dev 3 ай бұрын
This is what I have been waiting for. thanks!
@UmairSadaqat
@UmairSadaqat 3 ай бұрын
I love to watch videos where the focus is on proper documentation
@user-nt8pn2dg1k
@user-nt8pn2dg1k 3 ай бұрын
Спасибо! В документации не нашел примера нужного, а тут стало понятнее.
@yanmoenaing7248
@yanmoenaing7248 3 ай бұрын
Exactly what I've been waiting for
@mhmmdrezalif
@mhmmdrezalif 3 ай бұрын
this tutorial is my life saver, thanks a lot lee!
@stefanomazziotta1270
@stefanomazziotta1270 3 ай бұрын
The guide is so useful. Thanks a lot!
@zykloprt3391
@zykloprt3391 2 ай бұрын
Great tutorial on Next.js authentication, very clear and straightforward! Quick note, though: using both "expires" and the official "exp" claim for JWT expiration seems redundant, as most libraries handle expiration with "exp" directly. This could simplify things: - Stick to "exp" and drop the custom "expires" claim. - Use `setExpirationTime` for consistency across your session and JWT. This keeps your code clean and in line with standard practices. Keep up the great work! 👍
@ilyaaron
@ilyaaron 2 ай бұрын
Great addition! 🙂
@TheRcfrias
@TheRcfrias 2 ай бұрын
Awesome video, congrats! Specially due to explanation of the missing sign in part that is not in the Next.js docs. Thank you.
@farookquisar1
@farookquisar1 3 ай бұрын
good session. yes we need more detail session on this. As this is related to auth or security we don't need to learn this from anywhere else.
@mohamedaminebouguerra1514
@mohamedaminebouguerra1514 3 ай бұрын
Thanks Lee, always helpful!
@vincentjohnflorio
@vincentjohnflorio Ай бұрын
Just saw the news about the promotion ( a few months after it happened ) -- congrats!
@mekelilyasa9561
@mekelilyasa9561 Ай бұрын
Next js is getting more and more unclear regarding the authentication/authorization process
@Daddyjs
@Daddyjs 10 күн бұрын
R u serious?
@haiffy
@haiffy 4 күн бұрын
Yeah... Even next-auth has a half-assed documentation. I ended up searching tons of tutorial vids and github project examples just to implement email & password authentication with mongodb... Most of them are still on next-auth v4 too
@wayslow
@wayslow 3 ай бұрын
Thanks for Lucia shout out, I've integrated the V3 recently and it was a breeze.
@Santiego
@Santiego 3 ай бұрын
Yup, Lucia is great
@Oxygen.O2
@Oxygen.O2 Ай бұрын
Sweet Jesus, where were you the last couple of weeks when I was trying to implement it the correct way? Your solution is so simple yet powerful and God thanks you did it in less thans 12 minutes, thanks man!
@thedelanyo
@thedelanyo 3 ай бұрын
This is more informative beyond nextjs and React... well the first example 😊😊
@shakti_pattanaik01
@shakti_pattanaik01 3 ай бұрын
Great video.. a deep dive using supabase auth will be helpful
@typesafeui
@typesafeui 3 ай бұрын
Love that you did this without libs 🙌
@shilohgeorge1078
@shilohgeorge1078 22 күн бұрын
Thanks a lot Lee, This was really helpfull
@user-eb4jr3qr5h
@user-eb4jr3qr5h 3 ай бұрын
Thanks for the most needed content ❤
@yunglee.
@yunglee. 3 ай бұрын
Would love a video about using OAuth to login with a custom backend and how to refresh a session with your own issued JWT!
@juanpabloaddeo4197
@juanpabloaddeo4197 3 ай бұрын
Thanks for this Lee!
@justusadams2770
@justusadams2770 3 ай бұрын
This is very helpful, Great !!!
@danielmajer1648
@danielmajer1648 Ай бұрын
Bravo Lee and Balázs! I just copied the code, liked it so much!😅
@thepromisebenard
@thepromisebenard 3 ай бұрын
Nice Video. I think authentication and authorization is not really talked about often. It will be nice to see more indepth videos on rolling out custom auth and using libraries like auth js and clerk.
@aberba
@aberba 3 ай бұрын
That's what I expected. Next-auth is already well documented
@night23412
@night23412 3 ай бұрын
@@aberba lol
@user-nb7xd5gz4j
@user-nb7xd5gz4j 3 ай бұрын
Pretty good video, as usual!
@pistolplasma
@pistolplasma 3 ай бұрын
Lee great job. If you could create a video on how Next.JS handles “authentication” -vs- “authorization” that would be awesome. Thanks Lee….😁👍🏿✨
@maddogshwa
@maddogshwa 3 ай бұрын
I have to say the canonical approach (authorization middleware) seems a little too basic but if it works it works.
@raphauy
@raphauy 2 ай бұрын
Thank you Lee, very helpfull!
@nilskaspersson
@nilskaspersson 2 ай бұрын
This is great, but what I hoped to get is information about was how authN and authZ intersects with the caches of server components and other server-side functions, as well as how and when to authorize server actions
@DVSK1
@DVSK1 3 ай бұрын
Lovely & smooth explanation, auth its a excellent topic, could you bring a video about next-auth with user information management updating a profile like profile image using server actions?
@setasan
@setasan 3 ай бұрын
Nice, server components are great for websites or when you don't have much interactivity in a component in a application. Having the option of using them is really helpful althogh I much prefered if they didn't had put them as default in next.js.
@kevinbatdorf
@kevinbatdorf 3 ай бұрын
Great video. Someone asked me why 10 seconds, so figured I'd comment here. Correct me if I have something wrong. Setting it to 10 seconds was just to demo it (although maybe some app has a need for it). Typically you would have a longer (7 days, 30 days, forever) "refresh token" as the cookie that continuously updates a short-lived "access token" that you would put in memory. That token could be 10 seconds, although I think 5 minutes is more common. Depends on the application though. But to anyone reading this, just use NextAuth! Don't play with fire.
@aw4534324
@aw4534324 2 ай бұрын
Hey there, what you've described is how I'm currently handling my auth process. However, I'm looking to move toward server components and I'm not sure how to store a token in memory, it turns up undefined. Can you shed some light on that? Or, do both tokens have to be stored in cookies/storage when using RSC?
@diegomonterodesign
@diegomonterodesign Ай бұрын
As I see it, when you use JWT you can’t invalidate token. So if you change user roles or simply disable user in database, user session will keep alive as long as JWT is valid. Giving a 10 seconds expiration time you can be sure to keep user data in token allways in sync
@poulticegeist
@poulticegeist 2 ай бұрын
I've been able to run the nextauth version just fine in dev mode, but when building in standalone mode, I'm having all sorts of issues. It would be awesome if a version of that in standalone mode were released. thank you, Lee!
@27sosite73
@27sosite73 2 ай бұрын
thank you for the repo, mate
@Daddyjs
@Daddyjs 3 ай бұрын
What a awesome tutorial
@user-ld8cf3ed9j
@user-ld8cf3ed9j 3 ай бұрын
I would like to see a video on the topic of authorization/authentication for cases when a third-party server(node/nest/etc...) is used and also how it should work for "use client" components/pages
@saadowain3511
@saadowain3511 3 ай бұрын
Yes we would like to talk more . Authorization
@Pierrot24382
@Pierrot24382 3 ай бұрын
Thank you, Lee, this is very helpful! I started working on an app using Auth.js but seeing how easy it it to implement authentication with Next.js, I'm wondering if it is worth using Auth.js. What's the added value compared to just implementing our own auth with Next.js?
@Adrian_Galilea
@Adrian_Galilea 3 ай бұрын
Lee, can you do one about GDPR? I was worried when I learned that google fonts was not compliant, and then gladly surprised when I learned that next/font does self-hosting automatically. I would love to know more on how small projects can comply without it being a headache.
@eulersson
@eulersson 3 ай бұрын
Very useful video :D One minor point: shouldn't the encrypt/decrypt really be `encode_and_sign` and `decode_and_verify_signature`? I don't believe you are encrypting unless I am missing something.
@david.thomas.108
@david.thomas.108 3 ай бұрын
You are correct. The JWT isn’t encrypted. It is signed and the signature is verified. The JWT payload is base64 encoded and visible after decode. JWT has a different spec for encryption, known as JWE.
@SteveDotNet
@SteveDotNet 3 ай бұрын
Great walkthrough as always. And for those who noticed the null email, I see someone opened a PR on the linked repo to fix it.
@leerob
@leerob 3 ай бұрын
Thank you! Smol bug :)
@guilhermedavid3232
@guilhermedavid3232 3 ай бұрын
Lee, I have two questions about authentication in Next js. Can I use node js apis in middleware? Or do middleware necessarily run on the edge? The next-auth auth function is not memoized on the server, can I use the react cache function to memo the auth function?
@JohnWeland
@JohnWeland 3 ай бұрын
I would love to see a deep dive on this. Admittedly I need handholding or a follow along a few time before I get things. I'd like to do something where there is a Username/Email and Password OR Google OR Github. Smurf the actual user lookup initially but then be able to plugin a database or something like AWS cognito, after the fact.
@Chillihero
@Chillihero 3 ай бұрын
Nextjs & discord auth would be awesome, extending the Session, modify the callbacks etc
@farhan-app
@farhan-app 3 ай бұрын
Great video! Can you do some on design? I love the Vercel design ethos!
@John-hz8si
@John-hz8si Ай бұрын
finally an official guide!!!
@madhusudhansubedi
@madhusudhansubedi 2 ай бұрын
Very informative, Can you please make a more detail article on how to implement client side and server side validations on the server components during login process?
@HigherStudyAspirant
@HigherStudyAspirant 3 ай бұрын
Perfect. I always look for the custom way as next-auth is very abstract and I don't know what is going behind. Now my question is do we need to check getSession in each page, if yes, then will it work for Server and Client in the same way? and second query is how to handle callback url, I know if I check the session in each page, then I need to redirect and put the callback of each page, but if there is any way where I can define these in central/one place instead of checking in all pages. P.S: I am not using library (auth.js, clerk etc.,)
@bartesler5262
@bartesler5262 3 ай бұрын
Thanks for this awesome video! Assuming you have a server that is returning a JWT in an API call, and you’re using the pages router, whhat is the right place for the login, logout functions? Using Next api handlers? Also, in this scenario would you still set the JWT in cookies in the same way?
@rayhanislam7518
@rayhanislam7518 3 ай бұрын
Can I access the token or session from client side component. because I think httponly cookie don't access from client side.
@splodys
@splodys 3 ай бұрын
Great video as always! Are you able to explain why do we need auth.config.ts and auth.ts in nextjs new tutorial? One spreads the other, coulnd't we just have one?
@RuslanGonzalez-ox6vz
@RuslanGonzalez-ox6vz 3 ай бұрын
Great Video!
@Edgar-pu1lc
@Edgar-pu1lc 3 ай бұрын
Authentication in next js is the only reason why I don't use next, but if I have implemented authentication and authorization process on backend(Nest Js), what should I do in that case ? Where to save access token after successful authentication ? How to send access token along with header on each request ? In normal react this process is done very easily with axios or state manager(redux).
@GLINCKERO
@GLINCKERO 2 ай бұрын
Love the video, Can you make more video on integration for app router with next auth showing server side loading user data on page , and server side check for authenticated pages. it will be really helpfull, couldn't find any resources out there.
@MrJettann
@MrJettann 3 ай бұрын
Alright, so you set the session on frontend, but what to do if i should do it on backend with refresh and access tokens? Can you make a video about server authentication with these tokens? I can't find any valuable info about this :(
@chrisfaux3769
@chrisfaux3769 Ай бұрын
For those getting user { email: null } in the session output, remember to add a name attribute `name='email'` in the email input in the `page.tsx` file
@paramaggarwal
@paramaggarwal 3 ай бұрын
On the input element name="email" was missed, hence the formData read was failing and hence email was getting set as null in the JWT cookie.
@DanielAzubuine
@DanielAzubuine 3 ай бұрын
Nice one.
@milesrykerodazie171
@milesrykerodazie171 Ай бұрын
This is great.Please can you do a video on how to use nextjs and an external cookie based authentcation api (e.g nodejs express) and how to persist the cookies in deployed nextjs.Once again thank you
@AhmadAwais
@AhmadAwais 3 ай бұрын
Worth its weight in gold!! Nice one, Lee!!
@ravendelarama426
@ravendelarama426 3 ай бұрын
I have concerns, how do you authorize dynamic routes do you use regex how do you impelemtn it in middleware? Just starting out
@jrnxf
@jrnxf 3 ай бұрын
This is a really well done video, Lee! However, as I've mentioned before, the issues here is not reading the user data off the session, but the inability to use the updated session user to set client-side state immediately (without relying on a useEffect or a hard refresh) due to the router cache. Any update on when this can be fixed?
@alexiglesias5166
@alexiglesias5166 Ай бұрын
I'm having the same problem ... Did you fix it? Fucking nextjs cache, it's a pain in the ass and is incredible how difficult is to deal with it, there is no information about it, not even in the documentation
@Sus-nn8sv
@Sus-nn8sv 3 ай бұрын
Small question, suppose I login and wait for more than 10 seconds, and suppose I have a button that console.log the session variable, would it still console.log or do I need to make a hook using useState and useEffect instead?
@nmdpa3
@nmdpa3 26 күн бұрын
In the authjs overview toward the end, one of the added security checks shown via the devtools / applications display was a CSRF token. Is the "role your own" auth in this video (using JWT and the session cookie) also in need of a CSRF token, and if so, any examples of how that would be added to the existing code example?
@Edwinil
@Edwinil 2 ай бұрын
I tryed next-auth, authjs, but this satisfied what I was looking for. thanks
@wuffgang5333
@wuffgang5333 3 ай бұрын
with rsc there is only cookies possible? or would it just be more work to send auth header explicitly and verify in middleware but possible?
@joshuasingh854
@joshuasingh854 3 ай бұрын
Can this be done as easily on the pages router? Does anyone have a video or example of this? Thanks
@KristianTheDesigner
@KristianTheDesigner 3 ай бұрын
More of this you ask? Yes, please 🧠👍
@nikako1889
@nikako1889 3 ай бұрын
which vscode theme is this?
@heismyke
@heismyke 8 күн бұрын
what theme do you use please
@user-vz4zs2tk1n
@user-vz4zs2tk1n 3 ай бұрын
Hello Lee, I am trying to implement the Github provider as you have stated, but facing issues with the handlers GET and POST we receive from NextAuth showing the error: Error: Cannot read properties of undefined (reading 'GET'). Can you guide me here please?
@mosharafhossain2521
@mosharafhossain2521 3 күн бұрын
Great job. When destroying session after jwt expired or deleted jwt session from browser for test purposes, is it redirected after clicking logout in the server action?
@EvHaus
@EvHaus 3 ай бұрын
Thanks for the video. Biggest issue I've run into with this flow is that it seems nearly impossible to kick users out when using JWTs. Would love a video on that. ie. A bad actor signs up for my app and I need to kick them out immediately (faster than the JWT expiry date). How do I do that?
@mernfa_ir
@mernfa_ir Ай бұрын
Hello. thanks for your good video. I have a question. Do we have Next js 15 in this year or Next js 14 is the end version for for example 2 or 3 years?
@GhulamRasool-kr4ld
@GhulamRasool-kr4ld 3 ай бұрын
Can you create a video on how to build and deploy a production-ready application on AWS, including how to export output data? I've been struggling with this for the past few days. #nextjs #production #build
@carloschavezlucero9142
@carloschavezlucero9142 3 ай бұрын
Best video ever
@TenzDelek
@TenzDelek 18 күн бұрын
on point
@saskirakosyan5268
@saskirakosyan5268 3 ай бұрын
As i anderstand we does not have barear token anymore, that is we use to keep in localstorage? (Access token)It only session? (Refresh token).
@UwU-dx5hu
@UwU-dx5hu 3 ай бұрын
Next auth has the worst documentation in the history of documentations! It took me weeks to get used to it. Everything is scattered here and there. Come on people! Dont just make great software!, Make minimum descent documentation first!
@darrenpierre9903
@darrenpierre9903 3 ай бұрын
I feel your pain
@leerob
@leerob 3 ай бұрын
I believe they're working on a new version!
@shakapaker
@shakapaker 3 ай бұрын
So true
@TechCode50
@TechCode50 3 ай бұрын
Good to know - it is absolutely overdue - hope it comes soon !@@leerob
@A03L
@A03L 3 ай бұрын
Yeah I feel your pain
@Mata00616
@Mata00616 3 ай бұрын
I really enjoyed the video; it explains things very clearly. However, I've always wondered about something. Using tools like NextAuth means you bundle your authentication logic with your entire application. While this isn't necessarily a problem, I've been seeking ways to employ tools like auth.js to create a separate auth server, then using NextJS solely for the frontend (including both client and server rendering). Is it possible to construct this authentication server with NextAuth and NextJS, specifically utilizing the 'app/api' folder? I believe understanding how to achieve this could be beneficial, particularly when working with large applications that incorporate some authentication logic at the API Gateway level. This would also help when using authentication tools like Google Identity Platform.
@drewhjava
@drewhjava 3 ай бұрын
Thanks for doing this as I think a lot of developers are new. The JWT piece seems unnecessary. You could easily just sign (not encrypt) a user_id or 1 off session value from the server (stored in database)
@leerob
@leerob 3 ай бұрын
You don't need to use JWTs but it's something I get asked about frequently since many people do!
@aberba
@aberba 3 ай бұрын
That's just your opinion.
@warisaremou8754
@warisaremou8754 3 ай бұрын
NextAuth is good when developing fullstack app with Nextjs (ORM to interact with DB) but with external api OAuth providers are not working. Is there a solution for that ?
React Native Bridgeless Mode for Dummies
6:43
Oscar Franco
Рет қаралды 3,1 М.
Sam Altman New statement On GPT-5 Is Surprising!
12:56
TheAIGRID
Рет қаралды 57 М.
Зомби Апокалипсис  часть 1 🤯#shorts
00:29
INNA SERG
Рет қаралды 7 МЛН
НЕОБЫЧНЫЙ ЛЕДЕНЕЦ
00:49
Sveta Sollar
Рет қаралды 8 МЛН
Como ela fez isso? 😲
00:12
Los Wagners
Рет қаралды 11 МЛН
10 common mistakes with the Next.js App Router
20:37
Vercel
Рет қаралды 170 М.
Next.js App Router: Routing, Data Fetching, Caching
14:32
Vercel
Рет қаралды 285 М.
The New ‘AI Windows’ Will Change How We Use Computers Forever
14:12
Oh, Auth Doesn't Have to Suck?
7:16
Josh tried coding
Рет қаралды 50 М.
Why is JWT popular?
5:14
ByteByteGo
Рет қаралды 257 М.
🤖Вернулись в ПРОШЛОЕ🤪
0:28
Demin's Lounge
Рет қаралды 99 М.
Apple. 10 Интересных Фактов
24:26
Dameoz
Рет қаралды 114 М.
Save Work Efficiently on Your Computer 18/05/2024
0:51
UNIQUE PHOTO EDITING
Рет қаралды 308 М.
Introducing GPT-4o
26:13
OpenAI
Рет қаралды 4,3 МЛН
Why spend $10.000 on a flashlight when these are $200🗿
0:12
NIGHTOPERATOR
Рет қаралды 18 МЛН