Thank you. The default documentation doesn't provide any app-router examples, leaving a beginner who just used the /api/ routes first time last night a bit stranded. Especially seeing as I don't have the attention span to sit through 40 minutes of video like the others. Straight to the point at the start with all the "example code" I need to understand how to structure it and then extend it with more providers, awesome !
You will not believe the excitement in my eyes when i woke up this morning and seen this post after struggling and failing ALL YESTERDAY to figure out next-auth for the app router! THANK YOU AND GREAT TIMING
You're the best! Dealing with all the changes that NextJS constantly goes through can be a real headache, and often the documentation doesn't provide much help. But you explain things so well!
The most frustrating thing about Next auth is “The functionality provided for credentials based authentication is intentionally limited to discourage use of passwords”. But the email password auth is the most common request from clients, so that’s what I would love to see in this kind of tutorial.
Although as a matter of fact, day by day passwords are becoming a major source of security threats in this era, so it's not long before orgs move towards passwordless solutiions.
@@pranavrajveer3767 Nobody disagrees with that, but "not long before" is a key part of your sentence... we are not quite there yet and it is very frustrating how awkward they make it. In current day, people still want password auth.
As a service user I strongly prefer applications where I can login using auth from a trusted provider. Given the number of folks out there interested in home-brewing their own solutions I, as a user, don't really have much trust in those solutions given the number of high profile breaches.
I think it's a good choice by Next auth. For learning purposes, it's good to know how to handle passwords and whatnot but realistically it's best not actually used.
A bcrypt implementation isn't so difficult, but then you need to do the whole boilerplate as well such as forgot-password, set-new-password-after-forgot, send-email-confirmation, resend-email-confirmation, confirm-email, change-password, change-email, confirm-change-email, etc.
I love how straightforward this tutorial is. For the last three days, I was trying to figure out how to use this library. Documentation is not clear with the use of SessionProvider. But Jack, you are the man.
THIS TUTORIAL SAVED ME after getting frustrated for an entire day of how to implement authentication using cognito in nextjs 13 appRouter. Thank you so much :)
Thank you Jack, I just discovered your channel yesterday, and I'd like to thank you for all great, quick, straight to the point, and up-to-date tutorials. for everyone who's having the type error with building, to fix it move authOptions to it's own file and export the handler from there, then import it and export it again in the route.ts
There is one downside of fetching the session in root layout at 7:55 (as we needed to pass in the SessionProvider). The root layout becomes dynamic route as it uses getServerSession which internally uses next/headers, thus making the root layout route as dynamic. And as root route is dynamic, every nested page by default becomes dynamic(which is not case we would always want, its like running getServerSideProps on every request of any nested page) due to this, no page will be statically generated by Nextjs, which is though the default behaviour provided by Next 13.4+. And also it causes issues running static paths generated by generateStaticParams.
@@tinhoCs Sorry, no. There is a Discord server associated with this channel and you can request help there. Please READ and FOLLOW the #rules BEFORE posting. And the Next Auth folks have support channels as well.
Honestly this video does such a great job at explaining the overarching ideas of auth these days. The fact that it happens to be on app router is the cherry on top. Thanks!
This is the most comprehensive, yet the most accessible nextauth tutorial (using app route ie easy to be adapted on t3stack etc.), I found :). Answered so many questions other treat as "trivial"! THANKS JACK!
Me too, still looking at a blank screen not having a clue. Can't be done without daddy git I guess. This is almost making me want to go back to pounding nails for a living.
Hi Jack, thank you very much for this detailed tutorial. It filled many of the gaps missing from the next-auth documentation. And your voice is smooth as honey
Thank you Jack, you are an amazing teacher and your tuts have the right amount of length and covers the exact amount details that I look for. I was working on the nextauth integration for a side project with credential provider and here was your video, talk of serendipity 😍 If I have to nitpick, I think you could cover the following, 1. nextauth middleware to handle redirection to login page for protected pages 2. attaching the access tokens to external API calls from server and client API requests 3. Customizing the auth pages I know these are advanced topics, may be for another video. Thanks again for making our lives easier.
Wow @catchshyam you nailed exactly the topics I was going to ask for! Excellent tutorial Jack. 1) middleware is important so that one does not have to repeat the same get session and redirect code on EVERY protected page (and open up the door for forgetting to do so) 2) getting the access tokens to APIs is a critical piece... it would be great to initialize a wrapper for that external API ONCE (like a singleton) that takes the access_token once, and make it so every page/route etc has the ability to call that API without individually getting the access token (normally a jwt token) and 3) customizing the auth page is also important, and fairly easy to do in the pages router version of Next.js but have yet to try in app router version.
Thanks a lot bro! Your video was the only thing that cleared my mind. Now, I have a start point to use the other concepts. Sorry for my english and regards from Brazil!
Every time I try to live with Nextjs, it's because of Jack. Jack is such a good tutor. Unfortunately, I always quit Nextjs because of the server's architecture which I really don't like. But then again - Jack released a new video and I am messing with Nextjs over again to find out how unhappy I am with the architecture... And then again, and again... and again... Anyway, I am subscribed to the Pro NextJS and buying the course asap!
You did not cover how one can implement their own provider - let's say I need to use both Github and my own database to authenticate users . Perhaps in a future video ?
Hey! I tried to roll my own back-end with JWT Credentials Auth. As far as I know it's not possible in App Router if you're rolling your own server, because Next.js Server can't set the cookies, only read them. So if you're relying on JWTs, you won't be able to do much, unless you expose your access and refresh tokens from back-end - which you obviously do not want to have. This and other things are to be addressed in NextAuth v5, which is still in development.
@12:42 - small verbal slip :)) should say "enable server actions" , not "server sessions". was a bit confused for a second. (Ty for this wonderful vid)
Great video Jack, thanks for clearing the fog. Tell me would you have an idea how to protect routes by roles? So for example a user visiting with an admin role has read and write permissions on a page compared with users that have just basic view.
@@grant_vine Is it DRY though? because you have the path for the route, which is truth, and then you replicate that path in the middleware to add protection. So if you move the route you'd have to change the middleware. Which doesn't seem DRY to me. Honestly, I'd be ok either way with this, I was just curious if there was a customer requirement that I didn't cover.
I'm struggling with figuring out how to use this next auth with a external backend server with refresh token and access toke. Because as u use next auth it automatically changes your cookies names and their values, so u can't verify the cookie on the backend server. Can you make a video on that?
Yes, would be great to have additional tutorial on how to: 1) refresh your access_token with refresh token 2) make sure access_token (jwt) and next-auth session expiration time are in sync with eachother (using next-auth callbacks) 3) how to get the access_token out of the jwt (again using callbacks) and whether or not it's a good idea to make the access_token available to the Client (I'm assuming that's a pattern many sites use, but with Next.js 13+ with React Server Components I'm assuming that its best to keep the access_token (aka jwt) on the Server only.
I'd really like to see an example of something more enterprise, if you could, such as Keycloak. The token refresh process is messy, and documentation is scarce around this. The general community doesn't seem to have produced a solid solution for enterprise-level authentication. Thanks for the great videos!
The final point of passing headers to the GET request, was super needed I was stuck on it for days, not understanding why my GET requests weren't sending the headers even when I was authenticated
Thanks Jack! I'd love to see a few things: 1) How can I call an external API (securely) by accessing the id token from the cookie (as I understand this to be the most secure way) and having any token refresh handled by next-auth. And then, 2) a rough overview of how a backend api might verify this request. Obviously thats tricky because there are so many languages and libs. so perhaps an express js example would be the simplest for people to translate. In my case to Golang. Finally 3) How can I make sure that any data fetching to external API's can be done after the session is all set up. EG, after a page refresh, I often get that flicker, and multiple call to my backend as the page loads and session initialises asynchronously!
Also been trying to sort this out. The auth approach is different if you are rolling server vs client. It's not as simple as it could be that's for sure.
Great video. Would be interested to see your take on performance with getServerSession? In current Nextjs builds it prevents any SSG and so leads to incredibly long ttfb. Any workaround beyond client side redirects? 🤔
Hi Jack, great video and explanation like always. Wanted to ask can we how would you use middleware with NextAuth for protected routes? I'd imagine you would what to do that session check in all protected routes.
For the nav... when you click on Server Action... if you see "Who Am I" but you don't see your name? that's because you have to actually click on "who Am I" in order to see your name. "Who Am I" is a button not just text.
Hey Jack! Thanks for the tutorial, appreciate the time you took to teach us. Love the compact teaching style. Just one thing, I had to use /pages/api/auth/[...nextauth].ts as I was getting an error when building the server. Also, I had to update the export at the bottom of the file to export default NextAuth(authOptions)
Awesome video - I have a quick question. By converting the SessionProvider into a client component and placing it in the layout - doesn' t this mean that all other components by default become client components? To avoid this I instead implemented the middleware pattern which would still allow me to use server components.
Client components can take RSCs as children and they are still RSCs. Client components cannot _invoke_ RSCs. But they can take them as children. So you didn't need the middleware. Also, to get the user identity on the client you need the provider.
Thank you. The default documentation doesn't provide any app-router examples, leaving a beginner who just used the /api/ routes first time last night a bit stranded. Especially seeing as I don't have the attention span to sit through 40 minutes of video like the others.
Straight to the point at the start with all the "example code" I need to understand how to structure it and then extend it with more providers, awesome !
You will not believe the excitement in my eyes when i woke up this morning and seen this post after struggling and failing ALL YESTERDAY to figure out next-auth for the app router! THANK YOU AND GREAT TIMING
Use clerk way easier
@@skyhappy I'm def considering it.
also kinde@@skyhappy
You're the best! Dealing with all the changes that NextJS constantly goes through can be a real headache, and often the documentation doesn't provide much help. But you explain things so well!
The most frustrating thing about Next auth is “The functionality provided for credentials based authentication is intentionally limited to discourage use of passwords”. But the email password auth is the most common request from clients, so that’s what I would love to see in this kind of tutorial.
Although as a matter of fact, day by day passwords are becoming a major source of security threats in this era, so it's not long before orgs move towards passwordless solutiions.
@@pranavrajveer3767 Nobody disagrees with that, but "not long before" is a key part of your sentence... we are not quite there yet and it is very frustrating how awkward they make it. In current day, people still want password auth.
As a service user I strongly prefer applications where I can login using auth from a trusted provider. Given the number of folks out there interested in home-brewing their own solutions I, as a user, don't really have much trust in those solutions given the number of high profile breaches.
I think it's a good choice by Next auth. For learning purposes, it's good to know how to handle passwords and whatnot but realistically it's best not actually used.
A bcrypt implementation isn't so difficult, but then you need to do the whole boilerplate as well such as forgot-password, set-new-password-after-forgot, send-email-confirmation, resend-email-confirmation, confirm-email, change-password, change-email, confirm-change-email, etc.
I love how straightforward this tutorial is. For the last three days, I was trying to figure out how to use this library. Documentation is not clear with the use of SessionProvider. But Jack, you are the man.
Everything you need to know to get started with authorisation in 17 minutes, still with code examples! Thank you!
THIS TUTORIAL SAVED ME after getting frustrated for an entire day of how to implement authentication using cognito in nextjs 13 appRouter. Thank you so much :)
Thanks!
Thank you!
Thank you Jack, I just discovered your channel yesterday, and I'd like to thank you for all great, quick, straight to the point, and up-to-date tutorials. for everyone who's having the type error with building, to fix it move authOptions to it's own file and export the handler from there, then import it and export it again in the route.ts
There is one downside of fetching the session in root layout at 7:55 (as we needed to pass in the SessionProvider). The root layout becomes dynamic route as it uses getServerSession which internally uses next/headers, thus making the root layout route as dynamic.
And as root route is dynamic, every nested page by default becomes dynamic(which is not case we would always want, its like running getServerSideProps on every request of any nested page) due to this, no page will be statically generated by Nextjs, which is though the default behaviour provided by Next 13.4+.
And also it causes issues running static paths generated by generateStaticParams.
Agreed. You can scope that to either a sub-layout or into the page handler if you want to avoid that.
Good observation. Where would we ideally put it?
@@tinhoCs At the top of the dynamic layout.
@@jherr Thanks for the quick reply Jack. Any way you can paste a short snippet here just so I'm clear?
@@tinhoCs Sorry, no. There is a Discord server associated with this channel and you can request help there. Please READ and FOLLOW the #rules BEFORE posting. And the Next Auth folks have support channels as well.
Thanks mate for the setup I was literally stuck on this problem for over 2 days then I found this video
I can't believe how easy next-auth makes this painful process for me, thanks for teaching !
Honestly this video does such a great job at explaining the overarching ideas of auth these days. The fact that it happens to be on app router is the cherry on top. Thanks!
This is the most comprehensive, yet the most accessible nextauth tutorial (using app route ie easy to be adapted on t3stack etc.), I found :). Answered so many questions other treat as "trivial"! THANKS JACK!
wow, I watch a few tutorials on getting next-auth working but this one is so clear and concise. thanks for teaching us!
Me too, still looking at a blank screen not having a clue. Can't be done without daddy git I guess. This is almost making me want to go back to pounding nails for a living.
Awesome video Jack, maybe take it to next level with role based access and saving session and user info in database
YES
straight to the point!! My first video from your channel and loved it!!
after 10 tutorials and 9999 hours of tuto next.js. I feel of you and just "magique" . An 10 min, I fully understand SessionProvider
Great stuff. This helped me grasp the semi-magical approach NextJS takes to auth architecture. Thanks!
Thank you very much Jack!
Quality videos as usual!
That pro course sounds interesting 🧐
Hi Jack, thank you very much for this detailed tutorial. It filled many of the gaps missing from the next-auth documentation. And your voice is smooth as honey
Still useful, and still relevant. I am extremely thankful for this video, as I was having really hard time implementing all of this. THANK YOU!
Bloody love this guy! Thanks for everything Jack
Thank you so much. This was so much clearer than all other resources I found for nextauth
omg, Jack is such a great explainer! I feel embraced by his tutorials, he's a fantastic teacher!!
Cheers from Brasil! \o/
Thankyou. Looking for a while . Finally next-auth is here
!!! It didnt work for me until I switched from version '4.24.7' to the *beta* version!!!!
Thanks for the awesome tutorial!!
Thank you Jack, you are an amazing teacher and your tuts have the right amount of length and covers the exact amount details that I look for. I was working on the nextauth integration for a side project with credential provider and here was your video, talk of serendipity 😍
If I have to nitpick, I think you could cover the following,
1. nextauth middleware to handle redirection to login page for protected pages
2. attaching the access tokens to external API calls from server and client API requests
3. Customizing the auth pages
I know these are advanced topics, may be for another video. Thanks again for making our lives easier.
Wow @catchshyam you nailed exactly the topics I was going to ask for! Excellent tutorial Jack. 1) middleware is important so that one does not have to repeat the same get session and redirect code on EVERY protected page (and open up the door for forgetting to do so) 2) getting the access tokens to APIs is a critical piece... it would be great to initialize a wrapper for that external API ONCE (like a singleton) that takes the access_token once, and make it so every page/route etc has the ability to call that API without individually getting the access token (normally a jwt token) and 3) customizing the auth page is also important, and fairly easy to do in the pages router version of Next.js but have yet to try in app router version.
thanks man, didn't knew auth was that simple to implement
Thank you so much! Love your style of teaching! And a huge thanks from a beginner for the detailed explanation!
This is the greatest authentication video ever made. React server actions are the best.
thank you Jack, this is helping me getting started with the auth
damn, Jack. You've got the best content. Thank you so much.
Thanks a lot bro! Your video was the only thing that cleared my mind. Now, I have a start point to use the other concepts. Sorry for my english and regards from Brazil!
Really solid how to tutorial. Well done and thank you.
Just the video I needed! Thank you!
Thanks for the great content you provide MJack
Every time I try to live with Nextjs, it's because of Jack. Jack is such a good tutor. Unfortunately, I always quit Nextjs because of the server's architecture which I really don't like. But then again - Jack released a new video and I am messing with Nextjs over again to find out how unhappy I am with the architecture... And then again, and again... and again... Anyway, I am subscribed to the Pro NextJS and buying the course asap!
I like this a lot, and I noticed you were having a nice time too, regards and thanks !!!
you have to make a lot of videos on youtube , you are the best teacher ❤
Awesome tutorial Jack! Loved it. Thank you
Amazing, love your style, love the way you talk. Keep it up!
Awezome 😂😂 , thanks alot Jak informative as usual
Thanks for the job. Really apreciate it a lot!
You did not cover how one can implement their own provider - let's say I need to use both Github and my own database to authenticate users . Perhaps in a future video ?
And how to authorise user on database, like JWT (user from string)
Hey! I tried to roll my own back-end with JWT Credentials Auth.
As far as I know it's not possible in App Router if you're rolling your own server, because Next.js Server can't set the cookies, only read them. So if you're relying on JWTs, you won't be able to do much, unless you expose your access and refresh tokens from back-end - which you obviously do not want to have.
This and other things are to be addressed in NextAuth v5, which is still in development.
The nextAuth is notorious when it comes to custom configuration. Jack help us 🙏
@AmadeusTwi I've managed to set JWT tokens with Next 12. I had troubles with them, but it's possible
@@igogs7095 That is the point. Pages Router (Next.js 12) DOES work. App Router (Next.js 13) - DOESN'T.
This is solid gold, thank you!!
At 8:06 How did you highlight just some code and the rest is dim? Is that an extension of some sort? Is there a keyboard shortcut for that?
That's something we do manually in ScreenFlow to highlight the code I'm talking about.
Fantastic tutorial! Thank you very much.
@12:42 - small verbal slip :)) should say "enable server actions" , not "server sessions". was a bit confused for a second. (Ty for this wonderful vid)
Thanks a lot Jack. I love you explications.!!! Excelent video! I wait the course!!
You are awsome Jack, Thanks
Happy to see a confirmation I am doing it right. Thanks
Another fascinating video from Jack (the Codefather) 🤩
Hoping the family is doing well... thank you for the tech contribution....
Yes yes yes!!! I needed this! How is it that the next-auth docs have such horrible instructions for the new app router?!
i love the way u explain me and i love to see more educational videos thank you so much and have a great day
detailed, much appreciated !
Great stuff. Thank you very much!
Great video Jack, thanks for clearing the fog. Tell me would you have an idea how to protect routes by roles? So for example a user visiting with an admin role has read and write permissions on a page compared with users that have just basic view.
Thank you so much Jack!
wow this video makes it so easy to understand.
thank you dude you saved my life
Great Tutorial. Thanks
Jack the tutorial slayer
Another great vid!
You are awesome! Thanks for teaching me so much! :)
Great, I appreciate you.
Thank you very much! Exactly what I wanted
You are the best, man!
*heavy breathing* YOU FREAKIN' LEAKED THE CREDENTIALS!!!!
Thanks a lot. Perfect like ever.
Really nice video, appreciate it!
You haven’t covered middleware, would be nice to add that 😊
Middleware for?
@@jherr next-auth middleware implemention
@@grant_vine Hahah, yeah, I get it. To do what though? What do you want the middleware to do? Add roles to the headers or something?
@@jherr it’s seems a logical central location for route protection and managing a common “why are you on this page”, so definitely supports DRY
@@grant_vine Is it DRY though? because you have the path for the route, which is truth, and then you replicate that path in the middleware to add protection. So if you move the route you'd have to change the middleware. Which doesn't seem DRY to me. Honestly, I'd be ok either way with this, I was just curious if there was a customer requirement that I didn't cover.
I'd wish to have a similar quick tutorial on how to do localization (i18n) with Next.js - App Router.
Thanks alot for this video :D, It was very helpful
THANK YOU SO MUCH !!!👍👍👍
I'm struggling with figuring out how to use this next auth with a external backend server with refresh token and access toke.
Because as u use next auth it automatically changes your cookies names and their values, so u can't verify the cookie on the backend server.
Can you make a video on that?
Yea, you add to the next auth cookie your backend API token and you're good. :)
Yes, would be great to have additional tutorial on how to:
1) refresh your access_token with refresh token
2) make sure access_token (jwt) and next-auth session expiration time are in sync with eachother (using next-auth callbacks)
3) how to get the access_token out of the jwt (again using callbacks) and whether or not it's a good idea to make the access_token available to the Client (I'm assuming that's a pattern many sites use, but with Next.js 13+ with React Server Components I'm assuming that its best to keep the access_token (aka jwt) on the Server only.
Thanks for all
I'd really like to see an example of something more enterprise, if you could, such as Keycloak. The token refresh process is messy, and documentation is scarce around this. The general community doesn't seem to have produced a solid solution for enterprise-level authentication. Thanks for the great videos!
Awsome video. Thanks.
You saved me. I love you.
The final point of passing headers to the GET request, was super needed I was stuck on it for days, not understanding why my GET requests weren't sending the headers even when I was authenticated
Thanks Jack! I'd love to see a few things: 1) How can I call an external API (securely) by accessing the id token from the cookie (as I understand this to be the most secure way) and having any token refresh handled by next-auth. And then, 2) a rough overview of how a backend api might verify this request. Obviously thats tricky because there are so many languages and libs. so perhaps an express js example would be the simplest for people to translate. In my case to Golang. Finally 3) How can I make sure that any data fetching to external API's can be done after the session is all set up. EG, after a page refresh, I often get that flicker, and multiple call to my backend as the page loads and session initialises asynchronously!
There is a Blue Collar Coder Discord server where you can ask the community for answers to questions like these.
Can you make a video adding nextauth context to trpc? In your last video you had trpc and drizzle, can you make one with trpc,drizzle, nextauth?
Yeah, that would be awesome!!
create-t3-turbo has already done that but it is not compatible with the API calls inside the rsc 😢
Also been trying to sort this out. The auth approach is different if you are rolling server vs client. It's not as simple as it could be that's for sure.
or supabase auth would be awesome too
valeu papai, video ótimo !!!!
Thank you Jack sir, much needed video. what if we need to add multiple protected routes? I mean should we use here route groups?
Put the check in a shared layout.
Hey! You leaked your credentials! 🤣
Best tutorial
thank teacher, good lesson for me
Hey Jack, would you show a tutorial without next-auth how to do projected route? like as custom login system with external API
You mean like Clerk or auth0 or something?
Hey Jack ! When you are launching your course ? Been awaiting for a long time :)
Just doing final reviews on it now. Really excited to finally get it out!
Looking forward to see version two of this video where you guys use the new beta of next-auth v5.0 😀
I wish it was "you guys", it's just me. ;)
@@jherr you're kidding !
Great video. Would be interested to see your take on performance with getServerSession? In current Nextjs builds it prevents any SSG and so leads to incredibly long ttfb. Any workaround beyond client side redirects? 🤔
Hi Jack, great video and explanation like always. Wanted to ask can we how would you use middleware with NextAuth for protected routes? I'd imagine you would what to do that session check in all protected routes.
Yep That's another very valid strategy for protected routes.
how to custom terminal like your terminal
Great tutorial
For the nav... when you click on Server Action... if you see "Who Am I" but you don't see your name? that's because you have to actually click on "who Am I" in order to see your name. "Who Am I" is a button not just text.
Hey Jack! Thanks for the tutorial, appreciate the time you took to teach us. Love the compact teaching style. Just one thing, I had to use /pages/api/auth/[...nextauth].ts as I was getting an error when building the server. Also, I had to update the export at the bottom of the file to export default NextAuth(authOptions)
Awesome video - I have a quick question. By converting the SessionProvider into a client component and placing it in the layout - doesn' t this mean that all other components by default become client components? To avoid this I instead implemented the middleware pattern which would still allow me to use server components.
Client components can take RSCs as children and they are still RSCs. Client components cannot _invoke_ RSCs. But they can take them as children. So you didn't need the middleware. Also, to get the user identity on the client you need the provider.
@@jherr thanks for clearing this up!
and some bros are doing it to clean the streets for good, W