Next-Auth v5 is Almost Here! Learn it Fast on the NextJS App Router TODAY!
Ғылым және технология
Next-auth is an easy way to get started with authentication in your NextJS App Router application. Let's get it set up, and see how to secure routes, server actions, API routes and client and server API requests!
Code: github.com/jherr/next-auth-v5
👉 Upcoming NextJS course: pronextjs.dev
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
00:00 Introduction
00:20 Installation And Configuration
02:35 Adding A Provider
03:46 Signin And Signout
06:07 Building An Auth Button
08:38 Auth Middleware
10:34 Auth In Server Actions
11:37 Auth In API Routes
12:13 Authenticated Client Calls
13:03 Authenticated Server Calls
14:14 Outroduction
Пікірлер: 73
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)! 😅
@shgrth
24 күн бұрын
Correct. Especially Credentials provider. They nerfed it hard and don’t even respond to issues on GitHub.
@IsraelHernandez-ov6lo
18 күн бұрын
firebase adapter for example
@fakolyfakoly476
9 күн бұрын
@@IsraelHernandez-ov6lo exactly, I'm currently stuck on implementing it
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
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.
@tmabid3259
23 күн бұрын
really anyone use that built in login from ? it is same as the social cred and github tutorials
I've used Nextauth a lot but curious about Lucia as well. Thanks for another great video!
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".
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.
@aurelianspodarec2629
9 күн бұрын
school? how old are you?
Very very clear tutorial that answers all questions I had + nice job linking the code
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.
thanks a lot, very helpful! and thanks for sharing the code!
thanks! your to the point tutorials are perfect! :D
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.
@gabrielcarrizo1310
18 күн бұрын
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 😅
Man, this is too much, it's magic
Thanks, could you elaborate more about refresh token in app dir + next auth v5?
Amazing 🔥🔥
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
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.
@jherr
23 күн бұрын
Tell me more about that what does that mean to you?
@columkelly99
22 күн бұрын
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.
@fitimbytyci345
21 күн бұрын
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
@jherr
21 күн бұрын
@@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.
@fitimbytyci345
21 күн бұрын
@@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?
thnx
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.
@jherr
23 күн бұрын
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.
can you create an extend tutorial about refresh token?
Hi @jherr , How to add webpack config.expernals in nextjs app?
Do they allow the database strategy using the credentials provider now ?
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?
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?
@jherr
24 күн бұрын
I feel like your setting up for a "my service does this" type deal.
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.
Thanks, is Next-Auth v5 support mobile login(react native)?
Is this coming soon like Turbopack is, or like... actually soon?
could you please create video how to implements multi organization app with permissions and roles using next auth?
@jherr
24 күн бұрын
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.
@kirylchetyrbak6542
24 күн бұрын
@@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
@jherr
23 күн бұрын
@@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.
@kirylchetyrbak6542
23 күн бұрын
@@jherr waiting for relevant workos tutorial 😉
How can i add a custom signIn page to this?
I am getting error in production as i deployed it on gcp
How to decide between next-auth, clerk, kind? 🤔
@ParasBansal10
24 күн бұрын
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.
@kettenbach
24 күн бұрын
@@ParasBansal10 good point
Getting error while adding prisma adapter with Auth.js
AFAIK the default base path is already api/auth
we herr
Course update??
@jherr
18 күн бұрын
Working on it every day. I am genuinely getting close to the first release.
I do not recommend to use fetch for an api handler on a RSC.
@jherr
24 күн бұрын
Agreed.
@TheDMHP
23 күн бұрын
@@jherr Could you guys elaborate on this? Seems like an intereting note would like to hear why
@sammavrs
23 күн бұрын
1+ on the elaborating Please. With NextAuth's SIGNOUT it auto deletes the jwt token. Im TOTALLY lost...? 😅
@jherr
23 күн бұрын
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.
@TheDMHP
23 күн бұрын
@@jherr you’re the bomb jack. Great explanation, love your work as always.
Are you related to Sean Carroll
@jherr
10 күн бұрын
Nope. Seems like a cool person though.
Don't leak email
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.
@jherr
3 күн бұрын
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.
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