Basic Auth Password Protection

Basic Auth Password Protection is a Next.js template from Vercel that uses Edge Middleware to gate pages behind a username and password, with a live demo and one-click deployment to Vercel.

What is Basic Auth Password Protection?

Basic Auth Password Protection is a minimal Next.js example that demonstrates how to password-protect pages using Edge Middleware. It runs the authentication check on Vercel's Edge Network before a request reaches the page, so requests without valid credentials are blocked from the start. The template is part of the official Vercel examples repository and includes a live demo with the credentials: username 4dmin and password testpwd123.

Key Features

• Edge Middleware protection — Uses Edge Middleware to check credentials for every request, so only authenticated users can access protected pages.
• Next.js framework — Built with Next.js, the template works with the modern App Router or Pages Router.
• Tailwind CSS styling — The example uses Tailwind CSS for its user interface, as indicated in its metadata.
• One-click Vercel deploy — Deploy the template directly to Vercel with a single click via the provided deploy URL.
• Local development — Clone the repository and run pnpm dev to start a development server, or use pnpm create next-app to bootstrap.
• Live demo — A public demo is available at https://edge-functions-basic-auth-password.vercel.app with the demo credentials provided.

Who is it for?

Next.js developers who need to add simple HTTP Basic Auth to a page, route, or entire application without building a full authentication system. It is also a learning resource for anyone wanting to understand how Edge Middleware works on Vercel. Teams that want to protect staging or preview deployments behind a shared login can use this pattern.

What can you do with it?

• Protect preview deployments: Add a shared username and password to a Vercel preview URL so only stakeholders can access the deployed site.
• Gate internal tools: Lock down an admin section or internal dashboard until a real auth system is integrated.
• Learn Edge Middleware: Study a minimal, working example of how to inspect request headers and enforce authentication at the edge.

How does it work?

The template ships an Edge Middleware function that runs on Vercel's Edge Network. When a request arrives, the middleware checks whether the Authorization header contains the correct Basic Auth credentials. If the credentials match, the request continues to the page; otherwise, the middleware returns a 401 Unauthorized response. The included demo credentials are 4dmin and testpwd123.

FAQ

Is the demo still available?

Yes, the live demo is hosted at the URL listed in the repository. You can test it with the provided username and password.

How do I deploy this template?

You can either use the one-click deploy button on the repository page or run pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/basic-auth-password basic-auth-password locally and then push to Vercel.

What framework does it use?

The template is built with Next.js and uses Tailwind CSS for styling. The authentication logic runs in Edge Middleware, which is a Vercel feature.

Where are the credentials defined?

In the repository, the demo credentials are given for testing. In a real deployment, you would replace them with your own username and password.