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.
Jack could you make a video about adding context in tRPC and app directory? I did you prev video and stuck on creating trpc for RSC, serverClinet = appRouter.createCaller, because createCaller expect from as also a context
Yes I am also facing the issues where the createCaller takes the context as db and session. I am able to pass the db but facing an issue while passing the session because createCaller is not a rsc or a route handler to get the session 🥲
It's just a matter of types, if you implement the context whether it is from the trpc middleware or the route. You will get access to the ctx... maybe with a bit of hack you infer the types definition so to get type safety and autocompletions.
@@RuslanGonzalez-ox6vz Could you show that? The only solution I found is to use next adapter, but if we do that we need to create app/pages/api dir and we lose ability to call trpc in server components, I wonder if you mange to have both working types and context everywhere
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.
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 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.
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.
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.
@@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.
tbh in js land is so much configuraiton needed. nothing works out of the box, and i just wished i could get back to C#. Because the DX is HORRENDOUS. They really need to get their shit together and have a proper definition of done. bc what they're putting out as done is hot garbage...
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!
Love your videos, but today's thumbnail looks like it says, "App Router 5, Auth In Minutes" but it looks like it's meant to read "App Router, Auth In 5 Minutes"
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.
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 :)
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 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.
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 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
@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!
thanks so much for this content, authentication in Next.js has always been a mystery but now i understand everything. But what can i do if i'm trying to persist users in something like a database, how can i handle that registration process ?
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.
@@jherr Thanks for the super quick response. I agree. I was just wondering what are the negative consequences if I wrap my application in that SessionProvider and don't pass the session. It seems I could still use useSession on client components and getServerSession on server components.
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? 🤔
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!
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.
Completely bloated with providers you'll never ever use. Providers should be opt-in with a separate install. I needed simple self-hosted auth for an in-house management console, but the Credentials provider would NOT work or even load after literally HOURS of failing and using their very extensive, but ultimately unhelpful documentation (the same docs have loads of conflicting information). I built my own auth logic in an hour.
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?
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.
I have a problem when I implement the fetch from serverActions, and it is that I have several serverActions where I use revalidatePath, and I don't understand why doing this gives me an error in the fetch, Please help!!!
thanks for the video - although i believe in not reinventing the wheel, i'm interested in knowing / learning how to implement all this without the already done package....if someone could point me to the right direction 🙏
Has anybody ever had next-auth server session and client side session not match? I have all the data i need on client side, but if i access, via the method laid out in this video, in a server action, i have different fields. "name" "email" "image". and the "image" field isnt even anywhere in my config, i use "avatar". id, and many other fields are not there and i cant figure out how to change that.
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/
Hello Jack, firstly I want to say that many others have expressed their admiration for your work, teaching style, and enthusiasm for programming. I am working on a full-stack application using Next 13 and Next Auth, and I encountered an issue when making an API call from a RSC component. I added the necessary headers according to your example, but upon deploying my project to production on my own machine, it threw this error: TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11118:11) { cause: InvalidArgumentError: invalid connection header at processHeader (node:internal/deps/undici/undici:6504:15) at new Request (node:internal/deps/undici/undici:6387:13) at [dispatch] (node:internal/deps/undici/undici:7359:25) at Intercept (node:internal/deps/undici/undici:7119:20) at [Intercepted Dispatch] (node:internal/deps/undici/undici:413:16) at Client.dispatch (node:internal/deps/undici/undici:429:44) at [dispatch] (node:internal/deps/undici/undici:648:32) at [Intercepted Dispatch] (node:internal/deps/undici/undici:406:33) at Pool.dispatch (node:internal/deps/undici/undici:429:44) at [dispatch] (node:internal/deps/undici/undici:8649:27) { code: 'UND_ERR_INVALID_ARG' } } It seems to be related to the headers and authorization, but despite extensive research, including reading articles, watching tutorials, checking GitHub, Stack Overflow, etc., I couldn't find what was causing the problem. Could you assist me?
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.
It would be awesome if you could show auth0 authentication but using their login screen. Also add sign out method etc cuz it’s not available out of the box. Graphql would be super awesome to include.
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.
with the default middleware from next auth, you can protect routes inside a match array, so you don't have to redirect from every single page. If you have multiple routes to protect that's for sure the best strategy and the implementation is really easy
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.
Great tutorial
Jack could you make a video about adding context in tRPC and app directory? I did you prev video and stuck on creating trpc for RSC,
serverClinet = appRouter.createCaller, because createCaller expect from as also a context
Yes I am also facing the issues where the createCaller takes the context as db and session. I am able to pass the db but facing an issue while passing the session because createCaller is not a rsc or a route handler to get the session 🥲
It's just a matter of types, if you implement the context whether it is from the trpc middleware or the route. You will get access to the ctx... maybe with a bit of hack you infer the types definition so to get type safety and autocompletions.
@@RuslanGonzalez-ox6vz Could you show that? The only solution I found is to use next adapter, but if we do that we need to create app/pages/api dir and we lose ability to call trpc in server components, I wonder if you mange to have both working types and context everywhere
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.
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 !
Awesome video Jack, maybe take it to next level with role based access and saving session and user info in database
YES
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 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.
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.
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.
Hey! You leaked your credentials! 🤣
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.
tbh in js land is so much configuraiton needed. nothing works out of the box, and i just wished i could get back to C#. Because the DX is HORRENDOUS. They really need to get their shit together and have a proper definition of done. bc what they're putting out as done is hot garbage...
*heavy breathing* YOU FREAKIN' LEAKED THE CREDENTIALS!!!!
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!
Please don't say that you're going to "wrap our children" (minute 08:10)... that's so cruel.
somehow i was already subbed : thx for being in my autistic echochamber, i feel at home here.
how to custom terminal like your terminal
thank you Jack, this is helping me getting started with the auth
after 10 tutorials and 9999 hours of tuto next.js. I feel of you and just "magique" . An 10 min, I fully understand SessionProvider
the only easy here is the way that you says "easy" 😅🙈 just kidding, thanks for everything!
Love your videos, but today's thumbnail looks like it says, "App Router 5, Auth In Minutes" but it looks like it's meant to read "App Router, Auth In 5 Minutes"
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
Thanks for the job. Really apreciate it a lot!
Thanks mate for the setup I was literally stuck on this problem for over 2 days then I found this video
omg, Jack is such a great explainer! I feel embraced by his tutorials, he's a fantastic teacher!!
Cheers from Brasil! \o/
I can't believe how easy next-auth makes this painful process for me, thanks for teaching !
and some bros are doing it to clean the streets for good, W
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 :)
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'd wish to have a similar quick tutorial on how to do localization (i18n) with Next.js - App Router.
Awesome video!
Can you cover how to use next auth with bearer tokens. And is it possible to style the component of the provider?
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.
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 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
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.
!!! It didnt work for me until I switched from version '4.24.7' to the *beta* version!!!!
Thanks for the awesome tutorial!!
Thank you very much Jack!
Quality videos as usual!
That pro course sounds interesting 🧐
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)
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!
in it for the food thought tho.
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!
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 so much for this content, authentication in Next.js has always been a mystery but now i understand everything. But what can i do if i'm trying to persist users in something like a database, how can i handle that registration process ?
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.
Thanks a lot Jack. I love you explications.!!! Excelent video! I wait the course!!
Thank you so much! Love your style of teaching! And a huge thanks from a beginner for the detailed explanation!
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?
Yes yes yes!!! I needed this! How is it that the next-auth docs have such horrible instructions for the new app router?!
I think adding session={} to provider is optional
Depends on if you want SSR or not. If you don't specify it then it's client loaded only.
@@jherr Asked myself the same question. Why does it affect SSR?
@@Luxster89 Because it's a client component and a client component can't get access to getServerSession.
@@jherr Thanks for the super quick response. I agree. I was just wondering what are the negative consequences if I wrap my application in that SessionProvider and don't pass the session. It seems I could still use useSession on client components and getServerSession on server components.
You saved me. I love you.
It would be nice if you explained how to use Next Auth with an external Backend with JWT
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? 🤔
Note that "[...nextauth]" needs to be all lowercase. If you write "[...nextAuth]" it causes an error.
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!
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.
Completely bloated with providers you'll never ever use. Providers should be opt-in with a separate install. I needed simple self-hosted auth for an in-house management console, but the Credentials provider would NOT work or even load after literally HOURS of failing and using their very extensive, but ultimately unhelpful documentation (the same docs have loads of conflicting information). I built my own auth logic in an hour.
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?
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.
What about using Next.js's middleware file to locked down the entire app?
how does your terminal print in color? or it's just a Zsh thing? Can the same happen with the normal VS Code terminal in windows?
Everything I've been reading online says NextAuth is a complete mess. No thank you!
I have a problem when I implement the fetch from serverActions, and it is that I have several serverActions where I use revalidatePath, and I don't understand why doing this gives me an error in the fetch, Please help!!!
thanks for the video - although i believe in not reinventing the wheel, i'm interested in knowing / learning how to implement all this without the already done package....if someone could point me to the right direction 🙏
Awezome 😂😂 , thanks alot Jak informative as usual
Just the video I needed! Thank you!
Thanks alot for this video :D, It was very helpful
The most thing confused me is how to use the next-auth with authorized API's when i have a seperated back-end?
Has anybody ever had next-auth server session and client side session not match? I have all the data i need on client side, but if i access, via the method laid out in this video, in a server action, i have different fields. "name" "email" "image". and the "image" field isnt even anywhere in my config, i use "avatar". id, and many other fields are not there and i cant figure out how to change that.
Bloody love this guy! Thanks for everything Jack
How long do these server sessions last? Do you have to code in refresh token logic, or is this handled by NextAuth?
I like this a lot, and I noticed you were having a nice time too, regards and thanks !!!
Thank you so much. This was so much clearer than all other resources I found for nextauth
Really solid how to tutorial. Well done and thank you.
Great stuff. Thank you very much!
damn, Jack. You've got the best content. Thank you so much.
Best tutorial
Thanks for the great content you provide MJack
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!!
you have to make a lot of videos on youtube , you are the best teacher ❤
thank you
I love you.
not feasible in production if you have that big ugly github button you get redirected to.
Hello Jack, firstly I want to say that many others have expressed their admiration for your work, teaching style, and enthusiasm for programming. I am working on a full-stack application using Next 13 and Next Auth, and I encountered an issue when making an API call from a RSC component. I added the necessary headers according to your example, but upon deploying my project to production on my own machine, it threw this error:
TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11118:11) {
cause: InvalidArgumentError: invalid connection header
at processHeader (node:internal/deps/undici/undici:6504:15)
at new Request (node:internal/deps/undici/undici:6387:13)
at [dispatch] (node:internal/deps/undici/undici:7359:25)
at Intercept (node:internal/deps/undici/undici:7119:20)
at [Intercepted Dispatch] (node:internal/deps/undici/undici:413:16)
at Client.dispatch (node:internal/deps/undici/undici:429:44)
at [dispatch] (node:internal/deps/undici/undici:648:32)
at [Intercepted Dispatch] (node:internal/deps/undici/undici:406:33)
at Pool.dispatch (node:internal/deps/undici/undici:429:44)
at [dispatch] (node:internal/deps/undici/undici:8649:27) {
code: 'UND_ERR_INVALID_ARG'
}
}
It seems to be related to the headers and authorization, but despite extensive research, including reading articles, watching tutorials, checking GitHub, Stack Overflow, etc., I couldn't find what was causing the problem. Could you assist me?
thanks man, didn't knew auth was that simple to implement
thank you
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!
It would be awesome if you could show auth0 authentication but using their login screen. Also add sign out method etc cuz it’s not available out of the box. Graphql would be super awesome to include.
can you make a more detailed video? It has everything but it seems a bit rushed.
and is there any way to customize the login page ????
Just cloned the repo to test it.
Lol, the project fails to build ?
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.
thank you dude you saved my life
Hi guys, what is "dlx" in this command at 1:55 ?
You are awsome Jack, Thanks
thanks ! The doc is not very clear fot the app router
How much do you suggest using the middleware pattern to validate whether a user is authenticated or not?
with the default middleware from next auth, you can protect routes inside a match array, so you don't have to redirect from every single page. If you have multiple routes to protect that's for sure the best strategy and the implementation is really easy
Great Tutorial. Thanks
Thanks a lot. Perfect like ever.