You know that **dev** and **UAT** link you sent to a stakeholder… and then search engines found it, or a curious user started poking around? Let’s stop that. A neat, low-friction way is to add **HTTP Basic Auth** in front of your app—*in addition* to your normal application login (NextAuth/Auth0/Amplify/etc.). This post shows a production-friendly pattern with **Next.js Middleware**. We’ll cover: - Why to use Basic Auth on **non-production** environments - A tiny middleware that asks for a username/password (configurable via `.env`) - Excluding health/monitoring and public API routes - How to layer **app auth** (e.g., Amplify/NextAuth) on top for protected routes - Testing and gotchas > TL;DR: In lower envs, you’ll see a browser popup before your app even renders. In prod, this is disabled. --- ## Why protect dev/UAT with Basic Auth? - **Keep staging private** — no accidental indexing, random sign-ups, or screenshots floating around. - **Zero ceremony for guests** — share one username/password for the whole env (no account creation). - **Defense in depth** — this sits *in front of* your app auth. Even if app login has gaps, the env isn’t public. --- ## Step 1 — Feature flag via .env Define a single env var. If it exists, Basic Auth is ON.