Full Stack Authentication With Next.JS | Next Auth | Nest.JS

Full Stack Authentication With Next.JS | Next Auth | Nest.JS

---

Summary of Technological Concepts, Features, and Tutorial Highlights

This comprehensive tutorial covers implementing full stack authentication using Next.js (v13) on the frontend integrated with Next Auth and NestJS on the backend, without relying on abstract third-party libraries like Passport.js. It teaches authentication fundamentals by building everything from scratch, providing a deep understanding of JWT-based authentication flows.

---

Backend (NestJS) Key Concepts & Implementation

• Project Setup:

  • Uses NestJS CLI to scaffold the backend.
  • Uses Prisma ORM with SQLite database for simplicity (alternative ORM Drizzle mentioned for future).
  • Configures environment variables with NestJS ConfigModule.

• User Module:

  • Implements user registration API.
  • Uses DTOs with class-validator for input validation.
  • Passwords are hashed using bcrypt before saving to the database.
  • Checks for duplicate users and throws conflict exceptions.

• Authentication (Auth) Module:

  • Implements login API that validates user credentials manually (no Passport.js).
  • Uses bcrypt’s compare function to verify password hashes.
  • Generates JWT access tokens (expires in 1 hour, later shortened to 20 seconds for testing) and JWT refresh tokens (expires in 7 days).
  • JWT secrets are securely generated using OpenSSL and stored in environment variables.
  • Implements a JWT Guard (custom NestJS guard) to protect API endpoints by validating JWT access tokens from the Authorization header.
  • Implements a Refresh JWT Guard to protect refresh token endpoint, validating refresh tokens.
  • Provides a refresh token API endpoint to issue new access and refresh tokens when access token expires.
  • Demonstrates error handling for unauthorized access and token validation failures.

---

Frontend (Next.js + Next Auth) Key Concepts & Implementation

• Next Auth Integration:

  • Uses Next.js v13 app directory structure.
  • Sets up Next Auth route handler with Credentials Provider for username/password login.
  • Implements authorize function in Credentials Provider to call backend NestJS login API.
  • Handles authentication errors and user sessions.

• Session Management:

  • Uses useSession React hook in client components.
  • Uses getServerSession in server components to access session data.
  • Wraps the entire app in a SessionProvider (React context) to provide session state.
  • Customizes Next Auth session and JWT types to include backend user data and tokens.
  • Implements Next Auth callbacks (jwt and session) to persist user and token info properly.

• UI Components:

  • Sign-in button component that conditionally renders user info or sign-in/sign-up links based on session state.
  • Sign-up page that calls backend registration API.
  • Dashboard and dynamic user profile pages protected by session checks.
  • Middleware to protect routes (e.g., dashboard) and redirect unauthenticated users to sign-in page.

• Token Refresh Logic:

  • Access tokens expire quickly (20 seconds for demo).
  • Implements automatic token refresh inside Next Auth jwt callback:
    • Checks token expiry time.
    • Calls backend refresh token API using stored refresh token when access token expired.
    • Updates session and token with new tokens and expiry times.
  • Ensures seamless user experience with automatic token renewal on both client and server components.

---

Key Features & Learnings

1. Full manual implementation of authentication without Passport.js, enhancing understanding of JWT and auth flows.
2. Using Prisma ORM with NestJS for database operations and migrations.
3. Custom NestJS Guards for protecting routes with JWT validation.
4. Next Auth Credentials Provider integration with custom backend login API.
5. TypeScript type augmentation for Next Auth session and JWT to handle custom user/token data.
6. Middleware in Next.js for protecting pages based on authentication state.
7. Robust token refresh mechanism working both on client and server components.
8. Practical use of bcrypt for password hashing and verification.
9. Use of environment variables and secure JWT secret management.
10. Hands-on demonstration of error handling and validation in both backend and frontend.

---

Tutorials / Guides Covered

• Setting up NestJS project with Prisma and SQLite.
• Creating user registration and login APIs with password hashing.
• Implementing JWT access and refresh tokens manually.
• Creating NestJS guards for JWT validation.
• Setting up Next.js 13 with Next Auth Credentials Provider.
• Managing Next Auth sessions and customizing types.
• Creating sign-in, sign-up, dashboard, and dynamic user profile pages.
• Protecting Next.js routes with middleware.
• Implementing token refresh logic in Next Auth callbacks.
• Debugging common issues with token types and authorization headers.

---

Main Speakers / Sources

• The tutorial is presented by a single instructor (name not specified) who guides through the entire full stack authentication implementation step-by-step.
• References official NestJS, Prisma, Next.js, and Next Auth documentation and best practices.
• Mentions additional related tutorials by the same author on Prisma and Passport.js for NestJS.

---

In summary, this video is a detailed, practical guide to building a secure full stack authentication system from scratch using Next.js with Next Auth on the frontend and NestJS with Prisma on the backend, focusing on JWT handling, token refresh, and session management without relying on abstract libraries.