Authentication

A production-ready, plug-and-play authentication module built with Next.js 14 App Router and Supabase SSR. Drop it into any Next.js project to get a fully working auth system in minutes — no boilerplate needed.

What's included:

Core Authentication

Email/password sign up & sign in with server actions
Google OAuth sign in (one-click setup)
Secure session management using @supabase/ssr (no deprecated helpers)
Protected routes via middleware with smart redirect logic
Logout with session cleanup

Two-Factor Authentication (TOTP) — Optional per user

Per-user opt-in 2FA using Supabase's built-in MFA API
QR code enrollment flow compatible with Google Authenticator, Authy, and any TOTP app
Manual secret key fallback for users who can't scan QR codes
Session AAL2 enforcement in middleware — protects all routes automatically
Enable/disable 2FA from the profile security panel at any time

UI Components (Tailwind CSS)

Login form with OAuth button
Signup form with validation
6-digit OTP verification screen
2FA security settings panel with status badge, QR code display, and disable flow

API Routes (App Router)

/api/auth/mfa/status — check enrollment status
/api/auth/mfa/enroll — start TOTP enrollment, returns QR code
/api/auth/mfa/verify — verify TOTP code
/api/auth/mfa/unenroll — disable 2FA

How to use:

Copy the files into your Next.js 14 project
Add your Supabase credentials to .env.local
Enable TOTP in your Supabase Dashboard → Authentication → MFA
Done — login, signup, OAuth, and 2FA are all working

🛠 Tech Stack

Technology	Version / Details
Next.js	14 (App Router)
TypeScript	5+
Supabase	`@supabase/ssr` ^0.5
Supabase Auth	Email/Password + Google OAuth + TOTP MFA
Tailwind CSS	3.x
React	18 (Server + Client Components)

📋 Required Environment Variables

env

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
NEXT_PUBLIC_SITE_URL=http://localhost:3000

Hafsa Ather Khan

Professional Summary

Education

BS in Software Engineering

Certifications

Technical Skills

Devmarketplace Profile

Hafsa Ather Khan

More like this View all

Skills

Skills

Skills