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

  • @codernerd7076
    @codernerd707624 күн бұрын

    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

    @shgrth

    24 күн бұрын

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

  • @IsraelHernandez-ov6lo

    @IsraelHernandez-ov6lo

    18 күн бұрын

    firebase adapter for example

  • @fakolyfakoly476

    @fakolyfakoly476

    9 күн бұрын

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

  • @sammavrs
    @sammavrs23 күн бұрын

    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

  • @jordymaryns4945
    @jordymaryns494524 күн бұрын

    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

    @tmabid3259

    23 күн бұрын

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

  • @jackn
    @jackn23 күн бұрын

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

  • @manomancan
    @manomancan24 күн бұрын

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

  • @lathryx
    @lathryx23 күн бұрын

    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

    @aurelianspodarec2629

    9 күн бұрын

    school? how old are you?

  • @connorchen3937
    @connorchen39375 күн бұрын

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

  • @realbigsquid
    @realbigsquid22 күн бұрын

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

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

  • @brikka
    @brikka6 күн бұрын

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

  • @_hugo_cruz
    @_hugo_cruz21 күн бұрын

    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

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

  • @LaLoses
    @LaLoses24 күн бұрын

    Man, this is too much, it's magic

  • @sealuke2724
    @sealuke272424 күн бұрын

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

  • @eliuddyn
    @eliuddyn24 күн бұрын

    Amazing 🔥🔥

  • @theoniemann8042
    @theoniemann804215 күн бұрын

    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

  • @FitimBytyqi-mb1pn
    @FitimBytyqi-mb1pn23 күн бұрын

    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

    @jherr

    23 күн бұрын

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

  • @columkelly99

    @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

    @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

    @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

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

  • @sushieatingcobra
    @sushieatingcobra24 күн бұрын

    thnx

  • @RegalWK
    @RegalWK24 күн бұрын

    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

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

  • @NikosMitselos-wg9ks
    @NikosMitselos-wg9ks22 күн бұрын

    can you create an extend tutorial about refresh token?

  • @prakashk8984
    @prakashk898414 күн бұрын

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

  • @yiannis_p
    @yiannis_p16 күн бұрын

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

  • @lala-wb7gi
    @lala-wb7gi16 сағат бұрын

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

    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

    @jherr

    24 күн бұрын

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

  • @psyferinc.3573
    @psyferinc.35736 сағат бұрын

    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.

  • @nilanga89
    @nilanga8922 күн бұрын

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

  • @mattburgess5697
    @mattburgess569718 күн бұрын

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

  • @kirylchetyrbak6542
    @kirylchetyrbak654224 күн бұрын

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

  • @jherr

    @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

    @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

    @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

    @kirylchetyrbak6542

    23 күн бұрын

    @@jherr waiting for relevant workos tutorial 😉

  • @Anonimbus
    @Anonimbus12 күн бұрын

    How can i add a custom signIn page to this?

  • @_bestbeast
    @_bestbeast7 күн бұрын

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

  • @kettenbach
    @kettenbach24 күн бұрын

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

  • @ParasBansal10

    @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

    @kettenbach

    24 күн бұрын

    @@ParasBansal10 good point

  • @Shubham-yc6nz
    @Shubham-yc6nz3 күн бұрын

    Getting error while adding prisma adapter with Auth.js

  • @juviess
    @juviess23 күн бұрын

    AFAIK the default base path is already api/auth

  • @mattwooddc
    @mattwooddc23 күн бұрын

    we herr

  • @avishekdas4947
    @avishekdas494719 күн бұрын

    Course update??

  • @jherr

    @jherr

    18 күн бұрын

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

  • @gabrielbianchi2246
    @gabrielbianchi224624 күн бұрын

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

  • @jherr

    @jherr

    24 күн бұрын

    Agreed.

  • @TheDMHP

    @TheDMHP

    23 күн бұрын

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

  • @sammavrs

    @sammavrs

    23 күн бұрын

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

  • @jherr

    @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

    @TheDMHP

    23 күн бұрын

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

  • @alaskandonut
    @alaskandonut10 күн бұрын

    Are you related to Sean Carroll

  • @jherr

    @jherr

    10 күн бұрын

    Nope. Seems like a cool person though.

  • @schmellmafeet
    @schmellmafeet23 күн бұрын

    Don't leak email

  • @Toulkun
    @Toulkun3 күн бұрын

    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

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

  • @bobbyboxer2664
    @bobbyboxer266422 күн бұрын

    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

Келесі