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-auth-v5/tree/0-Starting-Point
schema.prisma: https://github.com/codinginflow/next-auth-v5/blob/Final-Project/prisma/schema.prisma

⭐ 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/reactbestpractices
💌 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: https://twitter.com/codinginflow
Instagram: https://instagram.com/codinginflow
TikTok: https://tiktok.com/@codinginflow
Facebook: https://facebook.com/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)