next14-auth Tailwind Templates

Next14 Auth

Advanced authentication system, focusing on security and usability. I implemented features like two-factor authentication, password recovery via email, and seamless session management. The project also differentiates between client and server components, ensuring optimal performance and security.

Next-auth v5 (Auth.js) 🔐

Key Features:

  • 🚀 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)

Desktop (screenshot):

Login Create Account
auth1 1 auth2 2
Sign in Settings
auth1 auth2
Admin Server Component
auth3 auth4
Forgot Password New Password
auth5 auth7
Two Factor
auth6

Top categories

Loading Svelte Themes