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
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.
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!
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.
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
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!
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.
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!
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.
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.
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
@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 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!
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!
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!
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.
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.
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
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 like to see a video that uses next-auth for email authentication and shows how best to handle JWTs using a refresh token in NextJS middleware so you're not hitting your database on every request to validate the session.
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.
One piece of information I am missing is what 3rd party software would need to provide in API calls in order to authenticate? an auth token? where it would get it?
My man Jack, thank god you made this as I have a burning question about context at the app root. From what I understand by allowing children to be passed into the context, we can use server components inside the client boundary? I am a bit confused by how the client boundary interlinks with child server components! Any good pointers?!
Client components can contain async server components as children or as element props, but they cannot invoke them. This "donut compenent" article is really helpful in trying to understand the concept. frontendatscale.com/blog/donut-components/
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.
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
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
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.
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!
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.
Everything you need to know to get started with authorisation in 17 minutes, still with code examples! Thank you!
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 :)
I can't believe how easy next-auth makes this painful process for me, thanks for teaching !
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
Thanks!
Thank you!
Thanks mate for the setup I was literally stuck on this problem for over 2 days then I found this video
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!
Awesome video Jack, maybe take it to next level with role based access and saving session and user info in database
YES
after 10 tutorials and 9999 hours of tuto next.js. I feel of you and just "magique" . An 10 min, I fully understand SessionProvider
!!! It didnt work for me until I switched from version '4.24.7' to the *beta* version!!!!
Thanks for the awesome tutorial!!
Great stuff. This helped me grasp the semi-magical approach NextJS takes to auth architecture. Thanks!
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.
thanks man, didn't knew auth was that simple to implement
straight to the point!! My first video from your channel and loved it!!
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!
thank you Jack, this is helping me getting started with the auth
This is the greatest authentication video ever made. React server actions are the best.
Thank you so much. This was so much clearer than all other resources I found for nextauth
Bloody love this guy! Thanks for everything Jack
Thankyou. Looking for a while . Finally next-auth is here
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!
you have to make a lot of videos on youtube , you are the best teacher ❤
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.
Thank you very much Jack!
Quality videos as usual!
That pro course sounds interesting 🧐
omg, Jack is such a great explainer! I feel embraced by his tutorials, he's a fantastic teacher!!
Cheers from Brasil! \o/
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.
Really solid how to tutorial. Well done and thank you.
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.
damn, Jack. You've got the best content. Thank you so much.
Thank you so much! Love your style of teaching! And a huge thanks from a beginner for the detailed explanation!
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
@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 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!
Another fascinating video from Jack (the Codefather) 🤩
Just the video I needed! Thank you!
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.
I like this a lot, and I noticed you were having a nice time too, regards and thanks !!!
Thanks for the great content you provide MJack
Thanks for the job. Really apreciate it a lot!
Awezome 😂😂 , thanks alot Jak informative as usual
Yes yes yes!!! I needed this! How is it that the next-auth docs have such horrible instructions for the new app router?!
Amazing, love your style, love the way you talk. Keep it up!
Awesome tutorial Jack! Loved it. Thank you
Hoping the family is doing well... thank you for the tech contribution....
Happy to see a confirmation I am doing it right. Thanks
Thanks a lot Jack. I love you explications.!!! Excelent video! I wait the course!!
Fantastic tutorial! Thank you very much.
You are awsome Jack, Thanks
Another great vid!
This is solid gold, thank you!!
I'd wish to have a similar quick tutorial on how to do localization (i18n) with Next.js - App Router.
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!
You are the best, man!
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.
*heavy breathing* YOU FREAKIN' LEAKED THE CREDENTIALS!!!!
i love the way u explain me and i love to see more educational videos thank you so much and have a great day
Jack the tutorial slayer
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.
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.
Thank you so much Jack!
Great stuff. Thank you very much!
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
wow this video makes it so easy to understand.
detailed, much appreciated !
You are awesome! Thanks for teaching me so much! :)
thank you dude you saved my life
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 Tutorial. Thanks
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.
Great, I appreciate you.
You saved me. I love you.
Hey! You leaked your credentials! 🤣
Hi guys, what is "dlx" in this command at 1:55 ?
Thank you very much! Exactly what I wanted
I'd like to see a video that uses next-auth for email authentication and shows how best to handle JWTs using a refresh token in NextJS middleware so you're not hitting your database on every request to validate the session.
It would be nice if you explained how to use Next Auth with an external Backend with JWT
how to custom terminal like your terminal
Really nice video, appreciate it!
Thanks for all
Note that "[...nextauth]" needs to be all lowercase. If you write "[...nextAuth]" it causes an error.
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.
Thanks a lot. Perfect like ever.
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
17:19 that text html structure is making my skin crawl. It's meant to be text
Sorry about that. My bad on that one.
One piece of information I am missing is what 3rd party software would need to provide in API calls in order to authenticate? an auth token? where it would get it?
The most thing confused me is how to use the next-auth with authorized API's when i have a seperated back-end?
Thanks alot for this video :D, It was very helpful
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?
Great tutorial
The teaching really excellent, congratulations, I just think a protected page is unnecessary, it makes more sense to use middleware
My man Jack, thank god you made this as I have a burning question about context at the app root. From what I understand by allowing children to be passed into the context, we can use server components inside the client boundary? I am a bit confused by how the client boundary interlinks with child server components! Any good pointers?!
This video was very helpful though, so we *can* still use RSCs in client context wrapped route
love you jack!
Client components can contain async server components as children or as element props, but they cannot invoke them. This "donut compenent" article is really helpful in trying to understand the concept. frontendatscale.com/blog/donut-components/
@@jherr Appreciated, super duper helpful!! I didn't know what to search for more insight so much love!!
i have issue can you help me? after 15 minutes session losted nextauth
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!