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
Yeeeeahhh , I really needed this, I've been stuck trying to update a project from v4 for 2 weeks
The best channel I ever had. I appreciate you for the special work you are doing. Thank you.
You literally read my mind!! I really needed this tutorial and you are the best person for this
This is why i love this channel. Thank you so much for your work, you deserve more subscription
Bigman, this is incredible. Thank you for this. Learnt a lot.
Your channel is like one stop solution for everything Next.js💖💖
@codinginflow
Ай бұрын
Makes me happy to hear
You are always the best .. appreciate your time and efforts making these great videos ❤
What an incredible tutorial!
I kept having wow moments while watching this tutorial. Remarkable resource. Keep it up and Thank you
@codinginflow
3 күн бұрын
Happy to hear that!
i really like how you not only explained it all extremely well, but also emphasised on the optimisation techniques
@codinginflow
6 күн бұрын
😊
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
Ай бұрын
thank you very much
best video on Next Auth BY FAR 🔥 well done bro
@codinginflow
17 күн бұрын
Appreciate it
really appreciate your work , great tutorial😍😍
Amazing tutorial! Tks to share.
thankyou for this really helpful tutorial for my journey to master next js! 34:41 caught me off guard 😂😂😂
Great I was looking to use Next Auth in my new project maybe
@codinginflow
Ай бұрын
It's a good choice
Project with Next js, mongoDB with or without prisma,next auth,files upload using uploadthing ,and so on ❤
My legend ❤️❤
Good one, thanks.
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🙌
Excellent
@codinginflow
4 күн бұрын
Thank you so much 😀
awesome!
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!
Would love to see a Next.js project which utilizes BLOB storage, maybe like a simple video/audio sharing platform!
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.
Thanks
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
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
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?
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?
Thank you for the great content , i got problems with next auth and keycloack , could you please do a video in this context?
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.
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
Ай бұрын
I don't use JWT for auth
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.
now with supabase :D ty
Hi, I have a small question, does this work with Pages Router? Thanks in advance.
Great Explaination, One question does the request gets duplicated if we switch to client side authentication when using SessionProvider?
@codinginflow
Ай бұрын
The server and client requests are separate
what if I wanted to use a custom email provider for magic links e.g AWS SES?
Hi, great video. Just one question. What happened with your Android's Studio tutorials?
@codinginflow
Ай бұрын
There will be no more Android content on this channel (or any of my social media channels)
Im getting MissingAdapter when trying to use Resend (I use DrizzleAdapter ) any help?
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...
Amazing tutorial! "My pronouns are actually async and await" 😂
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 😊
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
Ай бұрын
No I was confused by this myself lol. I think it doesn't matter.
@ts3798
Ай бұрын
@@codinginflow Ok, thanks.
How to implement access token and refresh token
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
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 ?
I love this. Hey can you do a project with web sockets
@codinginflow
Ай бұрын
What do you wanna see exactly?
@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
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
oh I saw u on tiktok
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
Ай бұрын
Lucia has username + password login with session. I would use that.
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🙌
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
6 күн бұрын
Rename the middleware.ts to something else and let me know if the problem still persists
@nomxxn
3 күн бұрын
@@codinginflow I didn't even have the middleware setup lol, appreciate that mate!
Why do you use prisma instead mongoose ?
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.
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
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
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. 😞
İ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.
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
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.
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
Ай бұрын
It's probably not the right place to store something n your DB
can you do the same for Mongoose ?
34:41 caught me off guard
it does not work for me unless i specify google client id and secret in auth config
@mDHARYL
Ай бұрын
Of course you need to add your own Google client id
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
25 күн бұрын
use zustand
@codinginflow
25 күн бұрын
SWR and React query can refetch on focus if that's what you need
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
Ай бұрын
Yes because the user data is retrieved on every request when you use sessions
@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?
why are u using neon adapter with vercel db?
@codinginflow
Ай бұрын
To make it edge-compatible so it works in middleware. I explain that in the video.
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
3 күн бұрын
Which part do yo you mean exactly? If it's rendered on the server, it should be safe.
@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.
Can you do a authentication and authorization without any auth library
@codinginflow
27 күн бұрын
That's not recommended because there are 1000 things you can do wrong. Also, it's very boilerplaty.
Do they have a date as to when they're gonna release a stable version?
@codinginflow
Ай бұрын
I don't think so
Payment integratation please in your ecommerce app
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
toast is not working
Make a project on Nextjs and Prisma and Mongodb for beginners
@codinginflow
Ай бұрын
We use that stack in my Next.js e commerce tutorial
❤plase crendintial provider
Bro add an example.env please
@codinginflow
28 күн бұрын
That's a good idea
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
Ай бұрын
That's highly insecure
@2kceltics
Ай бұрын
@@codinginflowOk thanks for the advice.
Extra thumbs up for the pronouns :')
async/await 💀💀