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: https://github.com/codinginflow/next-...
schema.prisma: https://github.com/codinginflow/next-...
⭐ Get my full-stack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs
✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbes...
💌 Join my newsletter for regular web dev tips: https://codinginflow.com/newsletter
💬 Join our developer community on Discord: https://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)