Simple Page Password Protection: How?

[amaaljuffry]

Summary

I'd like to secure a page with a password. Without user registration or email requirements, I simply want to ensure that only individuals with the password can access the page. There will be just one password, which I'll provide to authorized users. It's a small website, so additional security measures aren't necessary. I understand that users might share the password, but that's not a concern. Essentially, when someone navigates to the page, they'll encounter a password input field. Upon entering the correct password, they'll gain access to the page. What's the easiest way to accomplish this? I'm using react, Nextjs, and Typescript.

I'm looking for a simple way to safeguard a webpage using just one password. I want to avoid making people register or verify their email. My aim is to limit access to only those who know the password. Since my website is basic and doesn't need high security measures, my main focus is on adding a password field that lets in users who enter the correct password.

Additional information

No response

Example

No response

[mutasim77]

Hey, since there's only one password for users to access the website, it's straightforward. First, create a .env file and store the password there. Then, create a protected route that checks if process.env.YOUR_PASSWORD === userPassword. If it matches, allow the user to continue; otherwise, return to the login page each time.

However, a better approach would be to use middleware for this. Grab the user input, check it with your password from .env, and if it matches, proceed with .next(). Otherwise, redirect to the login page.

Personally, I don't recommend this approach of using only one password for authentication. It might be better to choose ready-made backend services like Supabase or Firebase and implement simple authentication for users.

[asmath-akbar-ali]

Thanks! That helped me solve a similar problem

[wwwdepot]

Use Auth.js with Local Credentials. https://authjs.dev/getting-started/authentication/credentials

[ra2dev]

Easiest and quickest solution would be to use WWW-Authenticate + middleware

At least in some cases it work a charm, you can check more details here:

• Simple password protection for a Next.js app