Don't use betas in production, especially libraries that have a history of app breaking bugs that tend to have awful documentation (they rewrote them but the docs are still not great)! 😅
The best nextauth tutorial I have seen. Explaining it with all the NextJS features and explaining it with real auth. Other tuturials always use social cred and github. This is a major step up from that.
Thanks so much Jack! I feel like trying it just for the work you put in, but my goodness was it a nightmare when I recently tried the current version. I had to go with Auth0; next-auth docs are the definition of "the road to hell is paved with good intentions".
Incredibly helpful video! One thing I wanted to point out is it seems the session data is still accessible from the AuthButton.Client component after the first render. I'm pretty sure this is due to the session object being stored upon validation so the data passed to the SessionProvider by AuthButtonServer is only used in that render cycle... I was able to add a session callback in the nextAuth config to modify the initial session object sent to the client instead and the values aside from name and email are now unavailable. I may be mistaken but I wanted to leave this for anyone else! Immense thanks Jack!
Been really struggling to understand the purpose and use-case of API/ROUTE with Next. This video single handedly has gotten me to rethink my entire DB architecture. MASSIVE thank you
"almost here". yea nah. 7 months and still in beta. I expect two more years of beta, then few more years of release candidate, then v5 in the next century.
TBH, I'd use a vendor for that (WorkOS, Auth0, Clerk, etc.) because if you are going to do that then most likely you are doing B2B and eventually you'll need features like SSO and SOC 2.
@@jherr thank you for the reply! What would be your vendor of choice for such case? and why? I know you have video on clerk but maybe you have something else in mind
@@kirylchetyrbak6542 Obviously I'm just one source among many but I've had experience with WorkOS, Clerk and Auth0 in the multi-tenancy B2B space and IMHO WorkOS is currently best in class. SSO onboarding is a huge issue in production and WorkOS has an admin section for your B2B clients to allow them to SSO onboard themselves. That's not something that Clerk or Auth0 had the last time I worked with those products.
I've been working on a project for school and I've recently been trying to find a simple auth solution. It just so happens that this video comes out today! 14 hours ago!! I'm amazed and pleased to say the least. This is perfect. Thank you so much.
The biggest difference is next-auth gives you the control to save the user's data on your database, so there is no charge other than managing you own database. While the other applications like clerk and kinde will save them for you and charge accordingly.
I appreciate the suggestion, but I'm not planning to use it in production yet. There seems to be an issue with the session not being updated after login and logout. I couldn't find a clear explanation in the documentation on how to fix this. Can you clarify?
I have a navbar with signIn/signOut. After signing out the session does not update. Can you make an example that toggles between signIn and signOut button without going to signin dialog automatically. P.S. Great work as usual.
my solution was that you have to import signIn/signOut from different locations depending on client/server component. server: import from auth, client: import from next-auth/react
Good stuff but i really want people to double think before touching Next. Especially if your app is behind a login then seriously consider other frameworks. Next has been a nightmare and it's annoying because the fans keep calling us dumb for running into issues
Kind of exciting! I wrestled with v5 for a bit a few months ago, and it had a ways to go. I was trying to work with the token and providers and had to do some hacky stuff to get it working.
Thank you very much my dear professor. Necessary this update, a few days ago I had tested the next-auth: "5.0.0-beta.16" and there was some problem with the middleware.
Awesome, thanks a lot! I would be interested in setting roles for users (by connecting with an own database) and allowing only certain paths for admins or other users. I have dug through the auth v5 docs and played around with prisma but eventually made it worse lol.
when he was working on the middleware, what was the point of him actually stating that if its not favicon... i couldnt understand why this makes sense. to choose those as a middle ware authentication.
I understand that you can secure each individual server action by checking the auth before doing the action but is there a middleware equivalent that will protect server actions from being called when the client is not authenticated? If not, if you forget to check for authentication in an important server action you could get screwed. Does anyone know how to get around this?
This video was more about filling in the details of how to connect Next-Auth v5 to the App Router because the docs don't cover that. The way to connect next-auth to a local db is the same as it was before and is covered by the documentation.
hi great video, i would have loved to see how you can do custom pages signin and signout and especially mix in with signUP when it s the first time the user tries to create an account what we should do
They keep ruining Nextjs and its extensions including this auth one, constant unnecessary changes for nothing. No wonder big companies dont like Next and wont even bother using it, but instead just use React and already known stable 0auth and other's that dont give you headache. I believe in future even Svelte will crush Nextjs, or better even if React becomes hybrid for both client and server. This hell with Next needs to go away or just remove it from existence.
React is never going to do the server part. It's a rendering library that is meant to be used in combination with a framework. Thus the listed set of recommended frameworks in the docs. "No wonder big companies dont like Next and wont even bother using it..." Nice hyperbole there. What's your sample size? Because of the "big companies" I've worked with, the vast majority use Next.
I didn't get the "headers: headers()" part. Is it something related to the Credentials Provider? Cause I'm using a different Provider and my Headers function doesn't return any authorization atrr :(
The `headers: headers()` part is about taking the cookie from the incoming request and routing it on to another service (I don't recall exactly what I was doing).
I'm not sure what this has to do with the JWT. The issue is in the last example of the app calling back to itself. The reason to NOT do it is that it simply adds latency. The API runs on the server, and the fetch in the RSC runs in the server, so whatever the API is returning could just be gotten directly. Best to just remove the code from the API and put it in a shared function and just call it from both the API and the RSC directly. If security is required, then add it to the function and both the RSC and the API get symmetrical security. This specific anti-pattern was mentioned by Lee Robinson (VP of Next) in his video on top ten App Router anti-patterns.
Quick question tho: when you are signing out, are *all* of the auth cookies cleared browser side? Also also, when using the Link component to go to an authenticated route, does it forego the traditional caching that Next has (even with prefetch="false") and force the redirection through the middleware to check if the route is authenticated? Because e.g. a user may be authenticated to go to a page, they go there, they move somewhere else, meanwhile the admin unauthorizes the page route for the user but within the next 30 seconds, the user can still go in the page because its within the 30 seconds of caching. Does NextAuth5 allow for total granularity of user interactivity with the server?
Hey Jack, great video as always, I wished you added an implementation on how to update the session both client & server side at once, I would love to see how you handle this one.
In V4 the jwt function takes an optional parameter trigger which you can use to check what triggered the function (if (trigger === 'update')) and then add the new values from session to the token in that conditional. Updates can be triggered on the client from the update function which is destructured from the useSession hook.
Yeah I am aware of that but if we have a server component calling the session via auth() and as a children we have a client component calling useSession. If we trigger update via update fn from useSession and update the session in jwt callback you will notice only the client component being updated and not the server component (I don’t know why is that). In order to solve the issue I had to call router.refresh but I hoped theres a better approach. P.S Im talking about the latest version and not v4
@@fitimbytyci345 There is no live connection between the client and the server. Once the server sends the page to the client it heads off to handle another request from a different client. The client actually has to make a request back to the server to get data, initiate server actions, or perform a refresh in this case. You could do something like websockets to have a live connection. But NextJS doesn't do that for you since very few sites require that functionality and there is significant overhead.
@@jherr Thanks a lot for the explanation, it makes sense. Can you elaborate more on how would I use server actions in case to get the fresh updated data?
@@jherr I was thinking something more like JWT tokens, where only the API is protected. This way it could be an SSG, where all the auth features are only available on the frontend via apis.Basically, for auth users it would mostly use CSR, guests would get the SSG version.
@@DavidSmith-ef4eh You can select static/dynamic per route. So you could have un-authenticated static routes for guests and authenticated dynamic routes for folks who are logged in.
@@jherr the problem is, it would be the same routes for our frontend app. Since they Top menu bar changes based on user login state and is shared in all pages/layouts. Also, a bit afraid of using SSR anywhere. We had ddos attacks, and nextjs is very vulnerable to it, since it uses lots of cpu in SSR. Even cloudflare couldn't protect us, since the attackers have large numbers of different IPs. Only solution I could think of, was SSG and serving static files and CSR for logged in users.
@@DavidSmith-ef4eh You know your situation better than I do. I'm just saying, you could have SSG pages that have client components that can trigger the login sequence. And then have SSR based authed routes. And you could put in cloudfront rules in front of the SSR pages to check for the JWT. So unauthenticated requests wouldn't get to origin.
@jherr I downloaded it but I notice the toolbar style is so minimal than yours, do I need to edit it ? It missing alot of icons and also I have url on the middle
@@ahmedahmedx9600 You mean the icons below the URL input? You just drag a page up below the URL and drop it and it makes a toolbar item. And the URL in the middle, do you mean pages pop-up in the middle of the window? That's by design.
This is too advanced for me. Pace is way too fast and got lost in the sauce way too quickly. Based on the comments it seems its well explained but ... yeah 😪 I feel l understand better when I see things built in real time rather than this highlight method... gives my mind some space to process things up as they appear on screen rather than being shocked by a snippet of code on screen and have it being explained real time without me having any type of context prior even if I stop the video to read the code first... anyway... I guess I'm not at this level yet womp womp
I read all over the reddit that its impossible to do tenant app with NextAuth, but tenant app have nothing to do with auth provider, its done with RBAC and its handled by architecture and code.
They might be talking about having no native support for organizations. It's not impossible, it just means that you'd have to do the organizations work for yourself.
Don't use betas in production, especially libraries that have a history of app breaking bugs that tend to have awful documentation (they rewrote them but the docs are still not great)! 😅
Correct. Especially Credentials provider. They nerfed it hard and don’t even respond to issues on GitHub.
firebase adapter for example
@@IsraelHernandez-ov6lo exactly, I'm currently stuck on implementing it
@@fakolyfakoly476 same here, I switch to use server actions and firebase-admin, I am using for sessiontsegure cookies
Same for Next auth beta.
Unknowingly started new project with this and it sucks.
Can't have custom login page.
The best nextauth tutorial I have seen. Explaining it with all the NextJS features and explaining it with real auth. Other tuturials always use social cred and github. This is a major step up from that.
really anyone use that built in login from ? it is same as the social cred and github tutorials
Thanks so much Jack! I feel like trying it just for the work you put in, but my goodness was it a nightmare when I recently tried the current version. I had to go with Auth0; next-auth docs are the definition of "the road to hell is paved with good intentions".
Incredibly helpful video! One thing I wanted to point out is it seems the session data is still accessible from the AuthButton.Client component after the first render. I'm pretty sure this is due to the session object being stored upon validation so the data passed to the SessionProvider by AuthButtonServer is only used in that render cycle... I was able to add a session callback in the nextAuth config to modify the initial session object sent to the client instead and the values aside from name and email are now unavailable.
I may be mistaken but I wanted to leave this for anyone else! Immense thanks Jack!
Been really struggling to understand the purpose and use-case of API/ROUTE with Next. This video single handedly has gotten me to rethink my entire DB architecture.
MASSIVE thank you
can you share the repo where this project uses a db?
"almost here". yea nah. 7 months and still in beta. I expect two more years of beta, then few more years of release candidate, then v5 in the next century.
could you please create video how to implements multi organization app with permissions and roles using next auth?
TBH, I'd use a vendor for that (WorkOS, Auth0, Clerk, etc.) because if you are going to do that then most likely you are doing B2B and eventually you'll need features like SSO and SOC 2.
@@jherr thank you for the reply! What would be your vendor of choice for such case? and why? I know you have video on clerk but maybe you have something else in mind
@@kirylchetyrbak6542 Obviously I'm just one source among many but I've had experience with WorkOS, Clerk and Auth0 in the multi-tenancy B2B space and IMHO WorkOS is currently best in class. SSO onboarding is a huge issue in production and WorkOS has an admin section for your B2B clients to allow them to SSO onboard themselves. That's not something that Clerk or Auth0 had the last time I worked with those products.
@@jherr waiting for relevant workos tutorial 😉
What is everyone using for Mobile (i.e. Expo/React Native)?
I've been working on a project for school and I've recently been trying to find a simple auth solution. It just so happens that this video comes out today! 14 hours ago!! I'm amazed and pleased to say the least. This is perfect. Thank you so much.
school? how old are you?
I've used Nextauth a lot but curious about Lucia as well. Thanks for another great video!
can you create an extend tutorial about refresh token?
How to decide between next-auth, clerk, kind? 🤔
The biggest difference is next-auth gives you the control to save the user's data on your database, so there is no charge other than managing you own database. While the other applications like clerk and kinde will save them for you and charge accordingly.
@@ParasBansal10 good point
Amazing. I would love to see an example using auth.js with an database.
I appreciate the suggestion, but I'm not planning to use it in production yet. There seems to be an issue with the session not being updated after login and logout. I couldn't find a clear explanation in the documentation on how to fix this. Can you clarify?
I have a navbar with signIn/signOut. After signing out the session does not update.
Can you make an example that toggles between signIn and signOut button without going to signin dialog automatically.
P.S. Great work as usual.
my solution was that you have to import signIn/signOut from different locations depending on client/server component. server: import from auth, client: import from next-auth/react
Thanks, could you elaborate more about refresh token in app dir + next auth v5?
Awesome! What's that font you're using in you editor? Thanks in advance
I followed the NextAuth docs and still had issues, this video is more concise and effective than the official Auth js v5 documentation
What about refresh token axios interceptors 401 handling?
Good stuff but i really want people to double think before touching Next. Especially if your app is behind a login then seriously consider other frameworks.
Next has been a nightmare and it's annoying because the fans keep calling us dumb for running into issues
Kind of exciting! I wrestled with v5 for a bit a few months ago, and it had a ways to go. I was trying to work with the token and providers and had to do some hacky stuff to get it working.
Naming a page component "TestRoute" is not the best of practices... as Nextjs has clear distinctions on what a page and route components are.
Very very clear tutorial that answers all questions I had + nice job linking the code
thanks a lot, very helpful! and thanks for sharing the code!
Don't leak email
Jack, thank you lot! You're a real Master!
Thank you very much my dear professor. Necessary this update, a few days ago I had tested the next-auth: "5.0.0-beta.16" and there was some problem with the middleware.
I also tested with that version and can confirm that there were some import errors when using middleware. I hope it's resolved in the latest version 😅
5.0.0-beta.20, The API changed, the code isn't working.
Auth.js is in beta mode for long time. So many bugs
Thanks @jherr. Quick question: Why use the SessionProvider, instead of just passing the session object into the client component as props?
What VSCode theme you are using?
Can we use next auth with output: export in next config?
how set basePath in nextjs 14 and next auth beta v5? I have add basePath in next.config.mjs and add basePath in sessionProvider but still error
Awesome, thanks a lot! I would be interested in setting roles for users (by connecting with an own database) and allowing only certain paths for admins or other users. I have dug through the auth v5 docs and played around with prisma but eventually made it worse lol.
when he was working on the middleware, what was the point of him actually stating that if its not favicon... i couldnt understand why this makes sense. to choose those as a middle ware authentication.
I understand that you can secure each individual server action by checking the auth before doing the action but is there a middleware equivalent that will protect server actions from being called when the client is not authenticated? If not, if you forget to check for authentication in an important server action you could get screwed. Does anyone know how to get around this?
Hi @jherr ,
How to add webpack config.expernals in nextjs app?
❤❤❤
Man, this is too much, it's magic
Thanks, is Next-Auth v5 support mobile login(react native)?
why my button looks that is not have css
Is this coming soon like Turbopack is, or like... actually soon?
this is just a worthless piece of code honestly.
how do i put the users and passwords into a db and use authjs? that's the real question
This video was more about filling in the details of how to connect Next-Auth v5 to the App Router because the docs don't cover that. The way to connect next-auth to a local db is the same as it was before and is covered by the documentation.
Getting error while adding prisma adapter with Auth.js
hi great video, i would have loved to see how you can do custom pages signin and signout and especially mix in with signUP when it s the first time the user tries to create an account what we should do
we herr
Do they allow the database strategy using the credentials provider now ?
Amazing 🔥🔥
They keep ruining Nextjs and its extensions including this auth one, constant unnecessary changes for nothing. No wonder big companies dont like Next and wont even bother using it, but instead just use React and already known stable 0auth and other's that dont give you headache. I believe in future even Svelte will crush Nextjs, or better even if React becomes hybrid for both client and server. This hell with Next needs to go away or just remove it from existence.
React is never going to do the server part. It's a rendering library that is meant to be used in combination with a framework. Thus the listed set of recommended frameworks in the docs.
"No wonder big companies dont like Next and wont even bother using it..." Nice hyperbole there. What's your sample size? Because of the "big companies" I've worked with, the vast majority use Next.
I didn't get the "headers: headers()" part. Is it something related to the Credentials Provider? Cause I'm using a different Provider and my Headers function doesn't return any authorization atrr :(
The `headers: headers()` part is about taking the cookie from the incoming request and routing it on to another service (I don't recall exactly what I was doing).
Best
thanks for tutorial, and i can't wait for the course :)
I do not recommend to use fetch for an api handler on a RSC.
Agreed.
@@jherr Could you guys elaborate on this? Seems like an intereting note would like to hear why
1+ on the elaborating Please.
With NextAuth's SIGNOUT it auto deletes the jwt token. Im TOTALLY lost...? 😅
I'm not sure what this has to do with the JWT. The issue is in the last example of the app calling back to itself. The reason to NOT do it is that it simply adds latency. The API runs on the server, and the fetch in the RSC runs in the server, so whatever the API is returning could just be gotten directly. Best to just remove the code from the API and put it in a shared function and just call it from both the API and the RSC directly. If security is required, then add it to the function and both the RSC and the API get symmetrical security. This specific anti-pattern was mentioned by Lee Robinson (VP of Next) in his video on top ten App Router anti-patterns.
@@jherr you’re the bomb jack. Great explanation, love your work as always.
How can i add a custom signIn page to this?
Quick question tho: when you are signing out, are *all* of the auth cookies cleared browser side? Also also, when using the Link component to go to an authenticated route, does it forego the traditional caching that Next has (even with prefetch="false") and force the redirection through the middleware to check if the route is authenticated? Because e.g. a user may be authenticated to go to a page, they go there, they move somewhere else, meanwhile the admin unauthorizes the page route for the user but within the next 30 seconds, the user can still go in the page because its within the 30 seconds of caching. Does NextAuth5 allow for total granularity of user interactivity with the server?
I feel like your setting up for a "my service does this" type deal.
I am getting error in production as i deployed it on gcp
AFAIK the default base path is already api/auth
thnx
thanks! your to the point tutorials are perfect! :D
Hey Jack, great video as always, I wished you added an implementation on how to update the session both client & server side at once,
I would love to see how you handle this one.
Tell me more about that what does that mean to you?
In V4 the jwt function takes an optional parameter trigger which you can use to check what triggered the function (if (trigger === 'update')) and then add the new values from session to the token in that conditional.
Updates can be triggered on the client from the update function which is destructured from the useSession hook.
Yeah I am aware of that but if we have a server component calling the session via auth() and as a children we have a client component calling useSession.
If we trigger update via update fn from useSession and update the session in jwt callback you will notice only the client component being updated and not the server component (I don’t know why is that).
In order to solve the issue I had to call router.refresh but I hoped theres a better approach.
P.S Im talking about the latest version and not v4
@@fitimbytyci345 There is no live connection between the client and the server. Once the server sends the page to the client it heads off to handle another request from a different client. The client actually has to make a request back to the server to get data, initiate server actions, or perform a refresh in this case.
You could do something like websockets to have a live connection. But NextJS doesn't do that for you since very few sites require that functionality and there is significant overhead.
@@jherr Thanks a lot for the explanation, it makes sense.
Can you elaborate more on how would I use server actions in case to get the fresh updated data?
This would only work if the nextjs app is hosted on one server? Also, it wouldn't be able to create an SSG build for the routes using it?
Yeah, AFAIK this won't work with SSG. The idea is to have the session on both the client and the server for safe API access.
@@jherr I was thinking something more like JWT tokens, where only the API is protected. This way it could be an SSG, where all the auth features are only available on the frontend via apis.Basically, for auth users it would mostly use CSR, guests would get the SSG version.
@@DavidSmith-ef4eh You can select static/dynamic per route. So you could have un-authenticated static routes for guests and authenticated dynamic routes for folks who are logged in.
@@jherr the problem is, it would be the same routes for our frontend app. Since they Top menu bar changes based on user login state and is shared in all pages/layouts. Also, a bit afraid of using SSR anywhere. We had ddos attacks, and nextjs is very vulnerable to it, since it uses lots of cpu in SSR. Even cloudflare couldn't protect us, since the attackers have large numbers of different IPs. Only solution I could think of, was SSG and serving static files and CSR for logged in users.
@@DavidSmith-ef4eh You know your situation better than I do. I'm just saying, you could have SSG pages that have client components that can trigger the login sequence. And then have SSR based authed routes. And you could put in cloudfront rules in front of the SSR pages to check for the JWT. So unauthenticated requests wouldn't get to origin.
Great tutorial
Please what browser you are using ?
Arc
@jherr I downloaded it but I notice the toolbar style is so minimal than yours, do I need to edit it ? It missing alot of icons and also I have url on the middle
@@ahmedahmedx9600 You mean the icons below the URL input? You just drag a page up below the URL and drop it and it makes a toolbar item. And the URL in the middle, do you mean pages pop-up in the middle of the window? That's by design.
@jherr the top toolbar where url placed there is icons in the left, I only have icon for translation only
@jherr you have url on the right and icons on the left, I only have url in the middle and only transition icon and how you change color to blue
Course update??
Working on it every day. I am genuinely getting close to the first release.
This is too advanced for me. Pace is way too fast and got lost in the sauce way too quickly. Based on the comments it seems its well explained but ... yeah 😪
I feel l understand better when I see things built in real time rather than this highlight method... gives my mind some space to process things up as they appear on screen rather than being shocked by a snippet of code on screen and have it being explained real time without me having any type of context prior even if I stop the video to read the code first... anyway... I guess I'm not at this level yet womp womp
I read all over the reddit that its impossible to do tenant app with NextAuth, but tenant app have nothing to do with auth provider, its done with RBAC and its handled by architecture and code.
They might be talking about having no native support for organizations. It's not impossible, it just means that you'd have to do the organizations work for yourself.