Hey devs! 👋
I just built a robust starter template that solves one of the most common headaches in full-stack development: securely connecting a Next.js App Router frontend with a NestJS backend.
If you’ve ever struggled with where to store JWTs (localStorage vs. cookies), how to handle token refreshing on the server-side, or how to proxy requests without exposing sensitive data, this project is for you.
🌟 The Core Solution: Universal API Proxy
At the heart of this project is a Next.js Route Handler (/api/(api-proxy)/[…path]) that acts as a secure gateway. It intercepts 401s, refreshes access tokens automatically using HTTP-only cookies, and retries requests—all without the client-side code ever knowing.
🛡️ Security First Architecture
<ul>
<li>Zero Client-Side Tokens: Access and Refresh tokens are stored in encrypted, HTTP-only, Secure, SameSite cookies. They never touch the browser’s JavaScript.</li>
<li>Session Encryption: We use jose (JWE) with HS256 to encrypt the entire session payload inside the cookie.</li>
<li>CSRF Protection: By using SameSite=Lax cookies and server-side proxying, we mitigate CSRF risks naturally.</li>
</ul>
🔄 Smart Proxy &amp; Advanced Session Management
<ul>
<li>Multi-Device Support: The backend supports multiple active sessions per user. You can be logged in on your phone, laptop, and tablet simultaneously without one kicking the other out.</li>
<li>Device Tracking: Every session automatically captures and stores the user’s IP Address and User-Agent, giving you full visibility into active sessions for security auditing.</li>
<li>Concurrent Token Rotation: The backend implements a Grace Period mechanism. If multiple requests trigger a refresh simultaneously, the backend temporarily accepts the “old” refresh token to prevent race conditions and “Token Revoked” errors.</li>
<li>Streaming Support: Full support for file uploads (multipart/form-data) and binary downloads through the proxy.</li>
</ul>
🏗️ The Tech Stack Deep Dive
Frontend: Modern &amp; Type-Safe
<ul>
<li>Next.js 16 (App Router): Leveraging React Server Components for performance and SEO.</li>
<li>Shadcn-ui</li>
<li>Zod: Strict schema validation for forms and API responses.</li>
</ul>
Backend: Scalable &amp; Robust
<ul>
<li>NestJS 11: Enterprise-grade architecture with modules, guards, and interceptors.</li>
<li>Drizzle ORM: The new standard for TypeScript ORMs—lightweight, edge-ready, and fully type-safe.</li>
<li>PostgreSQL: Reliable relational data storage.</li>
<li>Passport.js &amp; Argon2: Industry-standard authentication strategies and secure password hashing.</li>
</ul>
🐳 DevOps Ready
<ul>
<li>Docker Compose: Includes a complete setup for the PostgreSQL database, making local development a breeze.</li>
</ul>
Check out the code and let me know what you think!
<a href="https://github.com/kisstamasj/nestjs-nextjs-api-proxy.git" target="_blank" rel="noopener nofollow">[Link to Repository]</a>

Kiss Tamás

A full-stack starter template implementing secure cookie-based authentication between Next.js App Router and NestJS backend. Features include HTTP-only encrypted session cookies using JWE, automatic token refresh with race condition handling, multi-device session support with device tracking, CSRF protection, and streaming capabilities for file uploads and downloads. The architecture uses a Next.js API proxy route handler to intercept 401 errors and refresh tokens server-side, keeping access tokens away from client JavaScript. Built with modern tooling including Drizzle ORM, PostgreSQL, Zod validation, and Docker Compose for local development.

Secure NestJS + Next.js API Proxy Starter: The Ultimate Guide to Cookie-Based Auth