Next Auth V5 - Advanced Guide (2024)

⭐ Source code: https://cwa.run/next-auth Auth.js: https://authjs.dev/ Middleware config: https://dub.sh/Apr6dvD Resend: https://resend.com/ Node.js: https://nodejs.org/en ShadcnUI: https://ui.shadcn.com/ Clerk: https://dub.sh/SdVFxFU Learn how to add advanced authentication to your NextJS App. Key Features: - 🔐 Next-auth v5 (Auth.js) - 🚀 Next.js 14 with server actions - 🔑 Credentials Provider - 🌐 OAuth Provider (Social login with Google & GitHub) - 🔒 Forgot password functionality - ✉️ Email verification - 📱 Two factor verification (2FA) - 👥 User roles (Admin & User) - 🔓 Login component (Opens in redirect or modal) - 📝 Register component - 🤔 Forgot password component - ✅ Verification component - ⚠️ Error component - 🔘 Login button - 🚪 Logout button - 🚧 Role Gate - 🔍 Exploring next.js middleware - 📈 Extending & Exploring next-auth session - 🔄 Exploring next-auth callbacks - 👤 useCurrentUser hook - 🛂 useRole hook - 🧑 currentUser utility - 👮 currentRole utility - 🖥️ Example with server component - 💻 Example with client component - 👑 Render content for admins using RoleGate component - 🛡️ Protect API Routes for admins only - 🔐 Protect Server Actions for admins only - 📧 Change email with new verification in Settings page - 🔑 Change password with old password confirmation in Settings page - 🔔 Enable/disable two-factor auth in Settings page - 🔄 Change user role in Settings page (for development purposes only) Timestamps 00:00 Intro & Demo 02:05 Project setup 15:19 Routing crash course 38:06 Home page 48:40 Card wrapper 01:04:51 Login form 01:23:08 Register form 01:40:16 Database & Prisma setup 01:57:14 Create user 02:06:30 Middleware & Login 02:50:52 Callbacks 03:20:34 OAuth (Google & Github) 03:47:58 Resend (Sending emails) 04:19:27 Email verification 04:48:12 Reset password email 05:08:11 Reset password form 05:22:48 Two factor authentication 05:55:28 User button 06:15:02 Server & Client example 06:30:06 Admin example 06:47:25 Settings page 07:33:09 Sponsor demo 07:38:14 Deployment