Next-Auth v5 is Almost Here! Learn it Fast on the NextJS App Router TODAY!
Vložit
- čas přidán 25. 06. 2024
- 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 - Věda a technologie
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.
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!
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?
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.
Very very clear tutorial that answers all questions I had + nice job linking the code
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".
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
Amazing 🔥🔥
Man, this is too much, it's magic
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 😅
Amazing. I would love to see an example using auth.js with an database.
Thanks, could you elaborate more about refresh token in app dir + next auth v5?
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.
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?
thnx
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?
can you create an extend tutorial about refresh token?
Do they allow the database strategy using the credentials provider now ?
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 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.
Thanks, is Next-Auth v5 support mobile login(react native)?
Hi @jherr ,
How to add webpack config.expernals in nextjs app?
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?
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.
Is this coming soon like Turbopack is, or like... actually soon?
What is everyone using for Mobile (i.e. Expo/React Native)?
How can i add a custom signIn page to this?
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
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 am getting error in production as i deployed it on gcp
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 😉
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
AFAIK the default base path is already api/auth
Getting error while adding prisma adapter with Auth.js
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.
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
we herr
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.
Course update??
Working on it every day. I am genuinely getting close to the first release.
Are you related to Sean Carroll
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.
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