FYGS.dev - Homepagefygs.dev \_ยฐ<
Next Auth v5 App

Next Auth v5 App

Next.js 14
NextAuth v5 (Auth.js)
Resend (Email service)
Google Auth
GitHub Auth
Node.js
Shadcn UI
Prisma
PostgreSQL
TailwindCSS

Project Overview

A Next.js application that implements authentication using NextAuth v5, featuring user registration, login, logout functionalities, and Multi-Factor Authentication (MFA) with email code verification.

Project Gallery

Next Auth v5 App Admin Only dashboard

Project Overview

A Next.js application that implements authentication using NextAuth v5, featuring user registration, login, logout functionalities, and Multi-Factor Authentication (MFA) with email code verification.

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)

Technical Details

Implements NextAuth v5 with custom authentication flows, including email verification and MFA. Uses Prisma with PostgreSQL for user data management.

Challenges & Solutions

Implementing secure authentication flows while maintaining a smooth user experience, especially for the MFA implementation.

Next Auth v5 App - Project Details | Fernand SOUALO