If you’re working on a project that is deployed on Vercel, maybe you’d like to protect the access with a password.
Vercel offers this option, but you need to have the Pro plan that costs 20$ per month.
Well, that’s not cheap, but it’s alright I guess. Wait, why is there a small info icon next to password protection? 🤔
Woah, that’s definitely not cheap, especially for a personal project. Just for comparison, Netlify offers password protection too, but they have it included in the Pro plan for 19$ / month and no additional costs...
If you happen to encounter this problem, don’t worry, I have a solution for you!
Let’s protect our site with Octauthent!
Octauthent is a simple and free service that adds login forms to your website
Once installed on your site, Octauthent provides a dashboard where you can manage users, settings, and analytics.
Password protection made easy
Create a login form in less than a minute Integrate it to your site without a single line of code Manage your users…
1. Use Cloudflare with Vercel
First of all, your domain needs to be managed by Cloudflare to make it work with Octauthent.
If you already use Cloudflare on your site, it is just a matter of minutes to have your site protected, you can jump to the next step. If you don’t, I wrote a step-by-step tutorial where I explain how to install Cloudflare on your site.
How to install Cloudflare on your site
In this tutorial, I’m going to show you how to setup Cloudflare with your domain name.
If you follow this tutorial, please note that there are a few more steps to make Cloudflare work nicely with Vercel.
The first thing we check is on the SSL/TLS tab in Cloudflare. Make sure you have it set to Full or Full (strict), otherwise you will get a Too many redirects error and can’t access your site.
Another thing to check is if the route
/.well-known/* can be accessed with HTTP instead of HTTPs. This is used by Vercel to create a Let's Encrypt certificate.
To verify if that is possible with your domain, you can run the following command (notice the
http:// part in the URL):
If the result is a
404error, you’re good to go. However, if you receive a
3XX code, here is what you can try:
- Go to the SSL/TLS tab on Cloudflare, then Edge Certificates, and disable the Always Use HTTPS option
2. If after option 1, the
curl command still returns a
3XX error code, go to the Rules tab on Cloudflare and create a new Page Rule.
Enter in the first input field
/.well-known/* and select in the select field SSL and Off. With Save and Deploy, your rule will be applied.
2. Install Octauthent on your site
Once again, you can check out one of my step-by-step tutorial on Medium, but the steps are really basic:
- Sign up to Octauthent
- Create a new site, choose one or multiple user/password combos
- Go the install tab and follow the instructions
How to password-protect your website with Octauthent
Octauthent is a simple and free service that adds login forms to your website, and integrates without a single line of code
3. Extra security measures
One specific issue that exists with Vercel is that you are forced to have a
.vercel.app domain, and this domain cannot be removed (there is a Remove button but it doesn’t really work).
If a visitor guessed and visited this domain, it would completely bypass Cloudflare and Octauthent, which would be a huge flaw in your site’s security.
A good way to prevent this is to go to your Vercel Project Settings, go to Domains, and redirect your
.vercel.app domain to your protected domain.
That’s the end of the tutorial! I hope you enjoyed it
As you can see on the screenshot above, I actually deployed a demo project on Vercel just to write my tutorial.
You can check out the result at vercel.octauthent.com. Everything is public except the “Private Post”.
By the way, here are the credentials:
Have a nice day 👍