Auth.js Mastery

Learn advance authentication with Auth.js

       

 See it in Action  »

Introduction · Features · Tech Stack · Development Setup · Contributing

❄️ Introduction

Welcome Auth.js Mastery, your ultimate guide to implementing robust authentication in Next.js using Auth.js. This advance guide provides you with everything you need to authenticate modern web apps. Delve into the codebase to explore more.

🔋  Features

•  🗃️   Organized File and Folder Structure

•   ▲   Next.js 15 with Server Actions

•  🔑   Credentials & OAuth Providers (Google & GitHub)

•  🔒   Forgot Password & Email Verification

•  📱   Two-Factor Authentication

•  👥   User Roles (Admin & User)

•  🔓   Login Component (Redirect or Modal)

•  📝   Registration & Forgot Password Components

•  ✅   Verification & Error Components

•  🚧   Role-Based Access Gate

•  🖥️   Server & Client Component Examples

•  🛡️   Protect API Routes & Server Actions for Admins

•  📧   Change Email & Password with Verification in Settings

•  🔔   Enable/Disable 2FA in Settings

⚙️  Tech Stack

• Auth.js – Open Source Authentication Solution

• Next.Js – React Framework

• Prisma – ORM

• Postgres - Database

• Resend – Email API For Developers

• Shadcn UI – Component library

• Tailwind CSS – CSS

• TypeScript - TypeSafe JavaScript

• Zod - Schema Declaration & Validation Library

• React Hook Form - Forms Library for React

• Git – Versioning

• Vercel – Deployments

🖥️   Local Development

0. Prerequisites
   Make sure you have the following installed on your machine:

   • Git
   • Node.js
   • pnpm (Package Manager)

1. Clone the repository:

   git clone https://github.com/yntpdotme/authjs-mastery.git

2. Navigate to the project directory:

   cd authjs-msatery

3. Install dependencies:

   pnpm install

4. Add Environment Variables:

   Create .env file in the root folder and copy paste the content of .env.sample

   cp .env.sample .env

   Update credentials in .env with your credentials.

5. Setup Prisma

   pnpm prisma generate
   pnpm dlx prisma db push

6. Start the App:

   pnpm dev

   Visit  https://localhost:3000  to access your app.

7. Start Prisma Studio:

   pnpm prisma studio

   Visit  https://localhost:5555  to access prisma studio.

🤝  Contributing

Contributions are always welcome! See CONTRIBUTING.md for ways to get started.

🪪   License

Auth.js Mastery is open-source under the MIT License. Feel free to learn, add upon, and share!