Next-Auth v5 is Almost Here! Learn it Fast on the NextJS App Router TODAY!

Рет қаралды 21,771

Күн бұрын

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

Пікірлер: 83

@jordymaryns4945 Ай бұрын

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 Ай бұрын

really anyone use that built in login from ? it is same as the social cred and github tutorials

@sammavrs Ай бұрын

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

@jackn Ай бұрын

I've used Nextauth a lot but curious about Lucia as well. Thanks for another great video!

@codernerd7076 Ай бұрын

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 Ай бұрын

Correct. Especially Credentials provider. They nerfed it hard and don’t even respond to issues on GitHub.

@IsraelHernandez-ov6lo Ай бұрын

firebase adapter for example

@fakolyfakoly476 21 күн бұрын

@@IsraelHernandez-ov6lo exactly, I'm currently stuck on implementing it

@IsraelHernandez-ov6lo 8 күн бұрын

@@fakolyfakoly476 same here, I switch to use server actions and firebase-admin, I am using for sessiontsegure cookies

@chaitanyayadavalli6180 6 күн бұрын

Same for Next auth beta. Unknowingly started new project with this and it sucks. Can't have custom login page.

@manomancan Ай бұрын

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".

@connorchen3937 17 күн бұрын

Very very clear tutorial that answers all questions I had + nice job linking the code

@lathryx Ай бұрын

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 21 күн бұрын

school? how old are you?

@realbigsquid Ай бұрын

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.

@mahfoudh_arous 14 күн бұрын

thanks a lot, very helpful! and thanks for sharing the code!

@dominikkarbowski6027 5 күн бұрын

Amazing. I would love to see an example using auth.js with an database.

@brikka 18 күн бұрын

thanks! your to the point tutorials are perfect! :D

@eliuddyn Ай бұрын

Amazing 🔥🔥

@sealuke2724 Ай бұрын

Thanks, could you elaborate more about refresh token in app dir + next auth v5?

@LaLoses Ай бұрын

Man, this is too much, it's magic

@_hugo_cruz Ай бұрын

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 Ай бұрын

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 😅

@theoniemann8042 27 күн бұрын

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

@yiannis_p 28 күн бұрын

Do they allow the database strategy using the credentials provider now ?

@lala-wb7gi 12 күн бұрын

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?

@PhilipAlexanderHassialis Ай бұрын

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 Ай бұрын

I feel like your setting up for a "my service does this" type deal.

@nilanga89 Ай бұрын

Thanks, is Next-Auth v5 support mobile login(react native)?

@prakashk8984 26 күн бұрын

Hi @jherr , How to add webpack config.expernals in nextjs app?

@NikosMitselos-wg9ks Ай бұрын

can you create an extend tutorial about refresh token?

@alfredmadere9030 5 күн бұрын

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?

@RegalWK Ай бұрын

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 Ай бұрын

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.

@sushieatingcobra Ай бұрын

thnx

@FitimBytyqi-mb1pn Ай бұрын

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 Ай бұрын

Tell me more about that what does that mean to you?

@columkelly99 Ай бұрын

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 Ай бұрын

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 Ай бұрын

@@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 Ай бұрын

@@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?

@milisstudio9931 Күн бұрын

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

@psyferinc.3573 12 күн бұрын

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.

@mattburgess5697 Ай бұрын

Is this coming soon like Turbopack is, or like... actually soon?

@leonardor.8632 5 күн бұрын

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 :(

@jherr 5 күн бұрын

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).

@im_sieta 5 күн бұрын

❤❤❤

@kirylchetyrbak6542 Ай бұрын

could you please create video how to implements multi organization app with permissions and roles using next auth?

@jherr Ай бұрын

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 Ай бұрын

@@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 Ай бұрын

@@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 Ай бұрын

@@jherr waiting for relevant workos tutorial 😉

@_bestbeast 19 күн бұрын

I am getting error in production as i deployed it on gcp

@Anonimbus 24 күн бұрын

How can i add a custom signIn page to this?

@Shubham-yc6nz 15 күн бұрын

Getting error while adding prisma adapter with Auth.js

@kettenbach Ай бұрын

How to decide between next-auth, clerk, kind? 🤔

@ParasBansal10 Ай бұрын

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 Ай бұрын

@@ParasBansal10 good point

@juviess Ай бұрын

AFAIK the default base path is already api/auth

@StingSting844 20 сағат бұрын

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

@mattwooddc Ай бұрын

we herr

@gabrielbianchi2246 Ай бұрын

I do not recommend to use fetch for an api handler on a RSC.

@jherr Ай бұрын

Agreed.

@TheDMHP Ай бұрын

@@jherr Could you guys elaborate on this? Seems like an intereting note would like to hear why

@sammavrs Ай бұрын

1+ on the elaborating Please. With NextAuth's SIGNOUT it auto deletes the jwt token. Im TOTALLY lost...? 😅

@jherr Ай бұрын

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 Ай бұрын

@@jherr you’re the bomb jack. Great explanation, love your work as always.

@avishekdas4947 Ай бұрын

Course update??

@jherr Ай бұрын

Working on it every day. I am genuinely getting close to the first release.

@alaskandonut 22 күн бұрын

Are you related to Sean Carroll

@jherr 22 күн бұрын

Nope. Seems like a cool person though.

@schmellmafeet Ай бұрын

Don't leak email

@bobbyboxer2664 Ай бұрын

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

@Toulkun 15 күн бұрын

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 15 күн бұрын

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.