Next Auth V5 – Advanced Guide (2024)

Source code: https://dub.sh/N31z2Qp
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