Next-Auth V5 Tutorial (OAuth, Email, Server Actions, Server-Side Auth, Client-Side Auth, Roles)

Learn authentication with Next-auth/Auth.js 5.0 for Next.js in this one tutorial. You will learn:
-How to set up Next-auth 5 in a Next.js project (auth.ts, middleware, Prisma)
-How to implement Google and GitHub login via OAuth2
-How to create email magic links with Resend
-How to add an admin role
-How to protect server components, client components (via useSession), server actions, and API route handlers
-The difference between server-side and client-side session retrieval
-The pros and cons of session vs JWT authentication
-How to achieve static caching on pages that contain auth
-How to make your Prisma client work on the Edge runtime (middleware)
-How to cache your session requests between server components
-How to update user data from the frontend
-And more
Project files:
Starting code: github.com/codinginflow/next-...
schema.prisma: github.com/codinginflow/next-...
⭐ Get my full-stack Next.js with Express & TypeScript course: codinginflow.com/nextjs
✅ Get my free React Best Practices course: www.codinginflow.com/reactbes...
💌 Join my newsletter for regular web dev tips: codinginflow.com/newsletter
💬 Join our developer community on Discord: codinginflow.com/discord
📣 Follow Coding in Flow on social media:
Twitter: / codinginflow
Instagram: / codinginflow
TikTok: / codinginflow
Facebook: / codinginflow
Timestamps:
0:00 - What we will cover
3:37 - Project setup + Vercel Postgres database
9:51 - Next-auth setup + Prisma adapter
25:53 - Google & GitHub login (OAuth2)
40:46 - Authentication in server components
55:31 - Protecting pages
1:00:35 - Authentication in server actions (& API route handlers), updating user data
1:05:09 - Admin role & TypeScript module augmentation (next-auth.d.ts)
1:13:51 - Deduplicating auth requests with React cache
1:17:23 - Client-side authentication (SessionProvider, useSession), vs Partial Prerendering
1:29:05 - Session callback (adding more data to user object)
1:34:56 - Email magic links (Resend)
1:40:36 - Deployment (Vercel)

Пікірлер: 117

  • @davidmuturi2078
    @davidmuturi2078Ай бұрын

    Yeeeeahhh , I really needed this, I've been stuck trying to update a project from v4 for 2 weeks

  • @Leesdjo
    @LeesdjoАй бұрын

    The best channel I ever had. I appreciate you for the special work you are doing. Thank you.

  • @zyncc
    @zynccАй бұрын

    You literally read my mind!! I really needed this tutorial and you are the best person for this

  • @dm-bn4nq
    @dm-bn4nqАй бұрын

    This is why i love this channel. Thank you so much for your work, you deserve more subscription

  • @2pacrapempire866
    @2pacrapempire866Ай бұрын

    Bigman, this is incredible. Thank you for this. Learnt a lot.

  • @bhargavkumar
    @bhargavkumarАй бұрын

    Your channel is like one stop solution for everything Next.js💖💖

  • @codinginflow

    @codinginflow

    Ай бұрын

    Makes me happy to hear

  • @abdelrahmanmagdy3706
    @abdelrahmanmagdy3706Ай бұрын

    You are always the best .. appreciate your time and efforts making these great videos ❤

  • @BlueHat1
    @BlueHat112 күн бұрын

    What an incredible tutorial!

  • @henryokeke1858
    @henryokeke18583 күн бұрын

    I kept having wow moments while watching this tutorial. Remarkable resource. Keep it up and Thank you

  • @codinginflow

    @codinginflow

    3 күн бұрын

    Happy to hear that!

  • @tabishnaqvi5748
    @tabishnaqvi57487 күн бұрын

    i really like how you not only explained it all extremely well, but also emphasised on the optimisation techniques

  • @codinginflow

    @codinginflow

    6 күн бұрын

    😊

  • @mnhtada12
    @mnhtada12Ай бұрын

    You know I was stuck in next auth , and I was hoping you to make a video about it , now u did it 😍😍😍 Thank you sooo much u deserve more support 👏🌹

  • @codinginflow

    @codinginflow

    Ай бұрын

    thank you very much

  • @thewiseowlclub8602
    @thewiseowlclub860217 күн бұрын

    best video on Next Auth BY FAR 🔥 well done bro

  • @codinginflow

    @codinginflow

    17 күн бұрын

    Appreciate it

  • @SamyIsaac-md8go
    @SamyIsaac-md8go25 күн бұрын

    really appreciate your work , great tutorial😍😍

  • @markus_dev_cwb
    @markus_dev_cwbАй бұрын

    Amazing tutorial! Tks to share.

  • @user-lq1cs
    @user-lq1csАй бұрын

    thankyou for this really helpful tutorial for my journey to master next js! 34:41 caught me off guard 😂😂😂

  • @jeanmax1me
    @jeanmax1meАй бұрын

    Great I was looking to use Next Auth in my new project maybe

  • @codinginflow

    @codinginflow

    Ай бұрын

    It's a good choice

  • @senselessplays
    @senselessplaysАй бұрын

    Project with Next js, mongoDB with or without prisma,next auth,files upload using uploadthing ,and so on ❤

  • @yousefsaeed732
    @yousefsaeed732Ай бұрын

    My legend ❤️❤

  • @ugurdev
    @ugurdevАй бұрын

    Good one, thanks.

  • @rifky8966
    @rifky896617 күн бұрын

    The video tutorials are great because they are structured based on the official documentation. In the future, if you are willing, can you create a next-auth-v5 that connects to the dashboard to do CRUD? Thanks in advance🙌

  • @adarshrathi8265
    @adarshrathi82654 күн бұрын

    Excellent

  • @codinginflow

    @codinginflow

    4 күн бұрын

    Thank you so much 😀

  • @Alex.Shalda
    @Alex.ShaldaАй бұрын

    awesome!

  • @carlosraxon8062
    @carlosraxon806212 күн бұрын

    Your videos are really useful, could you do one about production environment, of how to set domains, subdomains (for example, to an api built on express, nestjs, etc.) and custom business emails, connect the email addresses to gmail, resend and so on? It’ll be appreciated!

  • @dan327
    @dan327Ай бұрын

    Would love to see a Next.js project which utilizes BLOB storage, maybe like a simple video/audio sharing platform!

  • @martintembo2355
    @martintembo23558 сағат бұрын

    Great video! What's the best approach when nestJS/ExpressJS or any other separate server with NextJS? I want to maintain the same authentication architecture.

  • @anonymous12478
    @anonymous12478Ай бұрын

    Thanks

  • @perspectivelevel7969
    @perspectivelevel79695 күн бұрын

    First of all, excellent video and excellent explanation, very clarifying... I consult, I am currently using drizzle with pg which does not allow me to use the middleware due to the edge runtime, is it possible to use the node runtime to be able to deploy the proyect and db on local or private vps? thank you

  • @kemmouneismail3087
    @kemmouneismail308722 күн бұрын

    can you please make a video about adding scopes to the Oauth providers to get access to more user data? I tried some old next-auth solutions, but it seems they don't work

  • @xxxkadal2162
    @xxxkadal2162Ай бұрын

    Great tutorials! anyway is there a plan for you to make an tutorial about making a dashboard page that use many library like 'Highchart' for displaying analytical data?

  • @developedbynick
    @developedbynickАй бұрын

    Hey. I'm fairly new to nextJS. However in a traditional express server with Mongoose, you could specify the data to be passed to the create method on the Model, but with next-auth, I see that auth js interacts with the database itself, but I'd like my data to follow a specific shape. Is it possible to do this with next-auth?

  • @MrPivario
    @MrPivarioАй бұрын

    Thank you for the great content , i got problems with next auth and keycloack , could you please do a video in this context?

  • @darksitopx
    @darksitopxАй бұрын

    Your content is quite an experience, I know that what I will say next may not be correct, because your content is free, I am from LATAM and the English language is not my thing so I use an extension to translate your videos, but This translator or the subtitles on KZread are only available until 3 or 4 hours into the video, then I can no longer translate and I have difficulty following the video, perhaps cutting the videos into sections would be good.

  • @ElohimCode
    @ElohimCodeАй бұрын

    Thanks for this tutorial, although I've been looking for a hands on refreshtoken. If perhaps you can do a part 2 on this feature.

  • @codinginflow

    @codinginflow

    Ай бұрын

    I don't use JWT for auth

  • @_hugo_cruz
    @_hugo_cruzАй бұрын

    Thanks for this Florian, it has been very interesting, it would be great when everything is stable to update it and could also add the login with email and traditional password. Also I would like you to show at some point how you do the migrations from Prisma to Vercel, I have not been able to make it work. Blessings to the channel and I always recommend it for the quality content it has.

  • @devdariill
    @devdariillАй бұрын

    now with supabase :D ty

  • @SachiAkira
    @SachiAkira6 күн бұрын

    Hi, I have a small question, does this work with Pages Router? Thanks in advance.

  • @marishwarannadar5323
    @marishwarannadar5323Ай бұрын

    Great Explaination, One question does the request gets duplicated if we switch to client side authentication when using SessionProvider?

  • @codinginflow

    @codinginflow

    Ай бұрын

    The server and client requests are separate

  • @benemma5602
    @benemma5602Ай бұрын

    what if I wanted to use a custom email provider for magic links e.g AWS SES?

  • @fismael21
    @fismael21Ай бұрын

    Hi, great video. Just one question. What happened with your Android's Studio tutorials?

  • @codinginflow

    @codinginflow

    Ай бұрын

    There will be no more Android content on this channel (or any of my social media channels)

  • @kosmo7757
    @kosmo7757Ай бұрын

    Im getting MissingAdapter when trying to use Resend (I use DrizzleAdapter ) any help?

  • @codernerd7076
    @codernerd7076Ай бұрын

    What about "onboarding" like sometimes I need more info about my users. Also what happened people use Google and GitHub accounts that got the same emails in that case it would be great if they had an option to connect those accounts... inplace of getting a error...

  • @drdonice
    @drdonice18 күн бұрын

    Amazing tutorial! "My pronouns are actually async and await" 😂

  • @user-nm6nw5kp8u
    @user-nm6nw5kp8u28 күн бұрын

    Hi developer i have qst , i made a external api with Laravel for Oauth providers and it give me the data user I want to know is i can set session to server from client or not , thanks advanced 😊

  • @ts3798
    @ts3798Ай бұрын

    Thank you very much for the tutorial. One question, is there a reason that you use uppercase String for the role in the declaration file?

  • @codinginflow

    @codinginflow

    Ай бұрын

    No I was confused by this myself lol. I think it doesn't matter.

  • @ts3798

    @ts3798

    Ай бұрын

    @@codinginflow Ok, thanks.

  • @syedbilalchand1766
    @syedbilalchand1766Ай бұрын

    How to implement access token and refresh token

  • @Tej_Dev
    @Tej_Dev11 күн бұрын

    I've seen a new error (This is only in Production), if i authenticate through Google OAuth on server side using signIn() from "@/auth", i'm redirected but i see a 404 error page , but when i reload it works. This is only in Production. But when i get the session from client side and signIn() from "next-auth/react", i don't see this happening. Does anyone know why

  • @kartavyabagga
    @kartavyabagga24 күн бұрын

    bro i get WEBPACK_EXPORT_DEFAULT error ...authconfig before initialization .when i write const session = await auth(); in any server action What can be done ?

  • @joe_j
    @joe_jАй бұрын

    I love this. Hey can you do a project with web sockets

  • @codinginflow

    @codinginflow

    Ай бұрын

    What do you wanna see exactly?

  • @joe_j

    @joe_j

    Ай бұрын

    @@codinginflow realtime update of data without having to refresh the page, where it keeps track of the current data in the database after I update. I hope this is more clear

  • @Tej_Dev
    @Tej_Dev13 күн бұрын

    The Edge Function "middleware" size is 1 MB and your plan size limit is 1 MB. why am i getting this error while deploying the project in Vercel? Can anyone help me

  • @kaedien
    @kaedienАй бұрын

    oh I saw u on tiktok

  • @Prag1974
    @Prag1974Ай бұрын

    Hi Man. Great content. Thanks. But I have a problem: I want to use session based authentication strategy (as you know jwt is little bit unsafe) and I also credentials provider. When I adjust credentials provider in auth.ts and other files, next auth throwing error something like " 'session': 'database' strategy doesn't support credentials provider" is there any way to fix it? if not, can you suggest me a library that allow users credentials login and uses session based strategy. What should I do? Thanks.

  • @codinginflow

    @codinginflow

    Ай бұрын

    Lucia has username + password login with session. I would use that.

  • @theintjengineer
    @theintjengineerАй бұрын

    Please, add credentials provider. Also, can you refactor the project to use drizzle ORM, so that there's a project version using Drizzle? You could even have it as another Github branch. Cheers🙌

  • @nomxxn
    @nomxxn6 күн бұрын

    In production, the server actions seem to be quite slow for me, for example my login action takes a whole 3 seconds to login the user lol, even after using redis, I'm clearly doing something wrong or maybe credentials login is just slow overall with auth.js, what do you think Florian? btw, appreciate all these tutorials mate, keep it up!

  • @codinginflow

    @codinginflow

    6 күн бұрын

    Rename the middleware.ts to something else and let me know if the problem still persists

  • @nomxxn

    @nomxxn

    3 күн бұрын

    @@codinginflow I didn't even have the middleware setup lol, appreciate that mate!

  • @2kceltics
    @2kcelticsАй бұрын

    Why do you use prisma instead mongoose ?

  • @robinkantyadav3344
    @robinkantyadav3344Ай бұрын

    Hello this is my request to you that can you tell me how can i make my css folder of next js project accessable to googlebot. Actully problem is that when i make project static build the css file is saved under a private folder and so google bot ignore that file when taking screenshot of my webpage (caching) google bot only take only html file so can you pls help me that what should i do.

  • @2kceltics
    @2kcelticsАй бұрын

    Ive been working on your tutorial but I only use mongodb, I created mongoose models compatible with auth.js docs and I had to create a mongoclient adapter and extend globals type for mongoose compatibility, everything are running well after all... If you want I could fork my final project in a new branch into your repo.

  • @jish194

    @jish194

    23 күн бұрын

    Hey man, I have been having issues on a separate project . I see you have been using adapters for auth js. I am trying to run an adapter for a login in and register form. The form allows users to sign in with google but this will not work. Any ideas?

  • @2kceltics

    @2kceltics

    22 күн бұрын

    @@jish194 this is Florian channel not mine I can't help you unless he allow me to upload my project to his repo in github. 😞

  • @kubilaybzk
    @kubilaybzkАй бұрын

    İf we want to set a jwt token ( which comes on the backend api request ) How we can do that ? I mean how we can set expire time and token with nextAuth? I want to expired the token backend's token expired.

  • @user-qx5yd3uw9z
    @user-qx5yd3uw9z25 күн бұрын

    i have the problem, if you run the build productions in local computer, the session speed is lightning fast, but in vercel this is take like about 4-5s to get session in every page

  • @codinginflow

    @codinginflow

    25 күн бұрын

    This might be caused by the middleware bug I was talking about. Delete the middleware (or rename it) and let me know if it's still slow.

  • @mleite1
    @mleite1Ай бұрын

    Im having a problem with the session callback.. it runs multiple times. So if i want to save something at database there, it's doing 4x times. Couldn't find a solution to this

  • @codinginflow

    @codinginflow

    Ай бұрын

    It's probably not the right place to store something n your DB

  • @AbdallahMoubarak
    @AbdallahMoubarakАй бұрын

    can you do the same for Mongoose ?

  • @owdx8984
    @owdx8984Ай бұрын

    34:41 caught me off guard

  • @Aekaay
    @AekaayАй бұрын

    it does not work for me unless i specify google client id and secret in auth config

  • @mDHARYL

    @mDHARYL

    Ай бұрын

    Of course you need to add your own Google client id

  • @jjoksa
    @jjoksa25 күн бұрын

    How to handle this problem: Adding an item to the cart on the server side and reFetching cart items number on the client side without need to check every for example 5 seconds or so? I made Navbar client-side component and showed the number of cart items on client side component, how to automatically re-fetch the number after adding a new item?

  • @user-qx5yd3uw9z

    @user-qx5yd3uw9z

    25 күн бұрын

    use zustand

  • @codinginflow

    @codinginflow

    25 күн бұрын

    SWR and React query can refetch on focus if that's what you need

  • @whoooooo
    @whooooooАй бұрын

    Will the user be updated if, for example, another user changes their role by removing admin status, in case one user is already logged into the site and another changes their role? Will the user whose role was changed be automatically updated?

  • @codinginflow

    @codinginflow

    Ай бұрын

    Yes because the user data is retrieved on every request when you use sessions

  • @whoooooo

    @whoooooo

    Ай бұрын

    @@codinginflow Wouldn't it be a strain on the server if, as I understand, every user updates their data with any interaction with the system? That's a request to the server, and when there are many users, it means a lot of requests, doesn't it?

  • @timothylee3203
    @timothylee3203Ай бұрын

    why are u using neon adapter with vercel db?

  • @codinginflow

    @codinginflow

    Ай бұрын

    To make it edge-compatible so it works in middleware. I explain that in the video.

  • @ilan117
    @ilan1173 күн бұрын

    I would not use “if (!user) ...". to protect the user page because one could still reach out to the user page giving the user id and access the user data. I would use "if (!session?.user) ..." or add it as a 1st condition. What do you think ?

  • @codinginflow

    @codinginflow

    3 күн бұрын

    Which part do yo you mean exactly? If it's rendered on the server, it should be safe.

  • @ilan117

    @ilan117

    3 күн бұрын

    sorry my bad … if anyone can access the user page without being logged in then it’s fine. I was heading to allow the access to this page only if a user is logged in.

  • @ozdadev
    @ozdadev27 күн бұрын

    Can you do a authentication and authorization without any auth library

  • @codinginflow

    @codinginflow

    27 күн бұрын

    That's not recommended because there are 1000 things you can do wrong. Also, it's very boilerplaty.

  • @bandekhoda7801
    @bandekhoda7801Ай бұрын

    Do they have a date as to when they're gonna release a stable version?

  • @codinginflow

    @codinginflow

    Ай бұрын

    I don't think so

  • @RishabhSingh-oc6vw
    @RishabhSingh-oc6vwАй бұрын

    Payment integratation please in your ecommerce app

  • @ZeeshanElia
    @ZeeshanElia20 күн бұрын

    I have suggestions for you i u wanna grow up your channel then Trying to make live streaming at react animate series It high demanding topic now days

  • @mDHARYL
    @mDHARYLАй бұрын

    toast is not working

  • @Devaratha2313
    @Devaratha2313Ай бұрын

    Make a project on Nextjs and Prisma and Mongodb for beginners

  • @codinginflow

    @codinginflow

    Ай бұрын

    We use that stack in my Next.js e commerce tutorial

  • @OmarFaruk-bz4gw
    @OmarFaruk-bz4gwАй бұрын

    ❤plase crendintial provider

  • @davidmuturi2078
    @davidmuturi207828 күн бұрын

    Bro add an example.env please

  • @codinginflow

    @codinginflow

    28 күн бұрын

    That's a good idea

  • @2kceltics
    @2kcelticsАй бұрын

    Wait a minute... I could save the users data in localstorage and give him access to the main app while the cookie isn't outaged... I'll save a lot of callings to database every time the user navigate to a new server route...

  • @codinginflow

    @codinginflow

    Ай бұрын

    That's highly insecure

  • @2kceltics

    @2kceltics

    Ай бұрын

    ​@@codinginflowOk thanks for the advice.

  • @herozero777
    @herozero7778 күн бұрын

    Extra thumbs up for the pronouns :')

  • @litDevYT
    @litDevYTАй бұрын

    async/await 💀💀