Auth.js (Next Auth) V5 (2024) with Next.js, Tailwind, DrizzleORM, NeonDB | Full Tutorial
Connect with me on LinkedIn: / khurram-ali1
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/giraffer...
Github Repo: https://github.com/giraffereactor/yt-...
Welcome to a tutorial on building an authentication system using Auth.js V5 (next-auth) with Next.js, TypeScript, and Tailwind CSS. In this 9+ hour video, we cover everything from client-side user authentication to server-side credentials management.
Technologies Covered (all 100% free services):
🚀 Next.js + TypeScript
💨 Tailwind + shadcn/ui
🔒 Auth.js
📚 DrizzleORM
🗄️ NeonDB + PostgreSQL
🛠️ Valibot
📩 Nodemailer
🚀 Tutorial Highlights:
User Authentication in Client & Server Components
Integrating Google & GitHub OAuth Providers
Custom Errors Handling and Middleware Implementation
Implementing User Roles & Admin Dashboard
Advanced Features: Email Verification & Password Reset (with nodemailer)
🕓 Timestamps:
00:00:00 - Introduction
00:03:52 - Demo
00:06:43 - PART 1: Setup (Next.js, TypeScript, Tailwind, shadcn/ui)
00:11:00 - Create Navbar
00:16:50 - Auth Pages (Signup, Signin)
00:20:15 - Signup Flow (Valibot, Schema, Form, Server Action, Error Handling)
00:56:04 - Password Hashing (Argon2)
00:58:32 - Signin Flow (Schema, Form, Server Action)
01:05:49 - PART 2: Prettier, DrizzleORM Setup
01:08:15 - Drizzle Config and Schema
01:12:18 - Auth.js and Drizzle Schema Updates
01:18:06 - PostgreSQL Setup with Neon
01:21:04 - Drizzle Scripts (Generate, Migrate, Studio)
01:25:53 - Signup User
01:38:35 - PART 3: Auth Pages Redirection
01:42:57 - AuthJS Config and Environment Variables
01:46:05 - Credentials Provider Setup
01:52:20 - Signin User Server Action (Completion)
02:05:25 - Error Handling for Signin
02:10:53 - Profile Page and Session Info
02:20:10 - Signout Button
02:23:38 - Dynamic Navbar Links Based on Auth Status
02:28:50 - Prevent Dynamic Rendering in Next.js
02:31:25 - Session in Client Components
02:44:05 - PART 4: OAuth Setup (Google, Github)
03:13:15 - Drizzle Adapter with Auth.js
03:20:55 - Extend Session Info
03:25:55 - Update Auth.js and Drizzle Adapter Type Definitions
03:40:00 - Link Account Event
03:52:05 - PART 5: Database User Info
04:09:10 - Update Session Info in Client Components
04:46:28 - SignIn Callback and Custom Errors
05:07:07 - Account Linking
05:16:45 - Page Protection with Auth and Middleware
05:30:55 - Crypto Module Issue
05:46:03 - PART 6: User Roles (USER vs ADMIN)
05:47:54 - Making a User ADMIN (Various Methods)
06:25:21 - Admin User Email Addresses Table
06:45:35 - Admin Panel
07:03:35 - Admin Actions (Verify Email, Toggle Role)
07:31:16 - Sending Emails (Nodemailer, SMTP)
08:41:50 - Password Reset Emails
09:34:30 - Extensions (Try on Your Own)
09:36:36 - Thank You, Outro
🔗 References:
Drizzle Schema for Auth.js - https://authjs.dev/getting-started/ad...
Drizzle Adapter Source Code - https://github.com/nextauthjs/next-au...
Thank you @neondatabase for the creator account!
Check out my Poetry Book: https://a.co/d/54CDa0u
#AuthJS #NextJS #TypeScript #TailwindCSS #shadcnui #DrizzleORM #NeonDB #PostgreSQL #GoogleOAuth #GitHubOAuth #SessionManagement #AdminDashboard #EmailVerification #PasswordReset #nodemailer #nextauth