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 -I

If the result is a 404error, you’re good to go. However, if you receive a 3XX code, here is what you can try:

  1. 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:

  1. Sign up to Octauthent
  2. Create a new site, choose one or multiple user/password combos
  3. 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 👍

--

--

--

Password protection made easy

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Cloud Orchestration!

Top Interview Questions & Answers for Automation Engineer

System Design — Distributed Job Scheduler — Part 3

My Experience as a Project Admin of my 4 Open-Source Projects in Let’s Grow More Summer of Code &…

Coding Tricks: Git Reset — hard + Git Push — force in CLI

Python Data Science: How To Write Algorithm That Solve Problems Faster

data science python

PrintCSS: Counter and Cross References

The result of the above HTML and CSS code

Display Kafka record headers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Octauthent

Octauthent

Password protection made easy

More from Medium

Static Libraries vs Dynamic Libraries

Shared (dynamic) Libraries vs. Static Libraries —Differences in  performance. | LaptrinhX

Building a full-stack web application — A Calendar Scheduling App in React, NodeJS, and MongoDB

Interact with smart contracts via React and a Node.js API — LogRocket Blog

Create an API for Self-Driving Cars with NodeJS