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)
Watch video Next-Auth V5 Tutorial (OAuth, Email, Server Actions, Server-Side Auth, Client-Side Auth, Roles) online without registration, duration hours minute second in high quality. This video was added by user Coding in Flow 22 April 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 49,87 once and liked it 1.4 thousand people.