Password protect your Vercel site with Octauthent
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.
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.
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):
curl http://YOUR-DOMAIN/.well-known/acme-challenge -IIf 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
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:
username: demo
password: octauthent
Have a nice day 👍
