My Portfolio

Next-Auth Advanced Toolkit

A fully featured authentication toolkit built with Next-Auth v5 (Auth.js). It supports credentials login, Google/GitHub OAuth, email verification, password reset flows, two-factor authentication, and robust role-based access control. Admin-only API routes, server actions, and UI components are protected using RoleGate and custom hooks like useRole and useCurrentUser, delivering a secure, production-ready auth system.

Features

Next-Auth v5 (Auth.js)

Credentials provider for username/password login

OAuth support (Google & GitHub)

Forgot password functionality

Email verification

Two-factor authentication (2FA)

RoleGate component for conditional rendering based on roles

Protect API routes for admins only

Protect server actions for admins only

Render admin-only content securely

RoleGate component for conditional rendering based on roles

Protect API routes for admins only

Protect server actions for admins only

Render admin-only content securely

RoleGate component for conditional rendering based on roles

Protect API routes for admins only

Protect server actions for admins only

User roles: Admin & User

Change user role (for development purposes)

useRole and currentRole utilities

useCurrentUser and currentUser utilities

Render admin-only content securely

and much more ....

Responsive Designs

File & Folder Structure

Production Code

server.tsbefore

import { NextRequest } from 'next/server';

export const middleware = async (req: NextRequest) => {
  let user = undefined;
  let team = undefined;
  const token = req.headers.get('token');

  if(req.nextUrl.pathname.startsWith('/auth')) {
    user = await getUserByToken(token);

    if(!user) {
      return NextResponse.redirect('/login');
    }
  }

  if(req.nextUrl.pathname.startsWith('/team')) {
    user = await getUserByToken(token);

    if(!user) {
      return NextResponse.redirect('/login');
    }

    const slug = req.nextUrl.query.slug;
    team = await getTeamBySlug(slug); // [!code highlight]

    if(!team) { // [!code highlight]
      return NextResponse.redirect('/'); // [!code highlight]
    } // [!code highlight]
  } // [!code highlight]

  return NextResponse.next(); // [!code highlight]
}

export const config = {
  matcher: ['/((?!_next/|_static|_vercel|[\w-]+\.\w+).*)'], // [!code highlight]
};

server.tsafter

import { createMiddleware, type MiddlewareFunctionProps } from '@app/(auth)/auth/_middleware';
import { auth } from '@/app/(auth)/auth/_middleware'; // [!code --]
import { auth } from '@/app/(auth)/auth/_middleware'; // [!code ++]
import { team } from '@/app/(team)/team/_middleware';

const middlewares = {
  '/auth{/:path?}': auth,
  '/team{/:slug?}': [ auth, team ],
};

export const middleware = createMiddleware(middlewares); // [!code focus]

export const config = {
  matcher: ['/((?!_next/|_static|_vercel|[\w-]+\.\w+).*)'],
};

Tech Stack

System Design & Docker