Table of Contents
In this how-to, I will show you how to add HTTP basic auth to your next.js 14 App. Basic Auth is a feature Vercel offers, but only for the Pro Plan. So let’s do it on your own to save some money ;-)
Sometimes you need an easy authentication for small projects or the dev stage. Here basic auth comes into the game and the good thing is ->
All the browsers have native support for HTTP Basic Authentication.
We need an API route and a middleware file. Below is the middleware file
Middleware.ts
the corresponding .env.local file
and the route.ts for the basic auth route
Auth Route
Keep in mind, that here we can see a very simple middleware integration. If you plan to use localization/internationalization or to use data from a headless CMS, then the middleware.ts file will look quite different and more complex.
Github Repo
If you like what you see, then please support me with a clap or follow me on medium.com.