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)