How to password-protect your website 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, 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…
In this tutorial, I’m going to show you how to setup Octauthent on your website. In the end, you’ll have a customized login form on all the pages you want to password-protect, like this:
1. Setup Cloudflare on your site
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.
2. Install Octauthent
Now that all your traffic is passing through Cloudflare, let’s install Octauthent on it.
Note: For all my examples below, I’ll use my example WordPress blog, which is already working with Cloudflare: example-blog.ml.
Sign up to Octauthent, then click on the New Site button. For each step, answer the questions, and click Next.
The last step to create your site will be to choose users and passwords. In my case, I’ll start with only one user: “demo”, and I’ll set the password to “octauthent”.
Once your site is created, go to the Install tab.
You will first see a tutorial to create an API Token on your Cloudflare account, just follow the instructions.
Then, you’ll be asked to choose on which Cloudflare site you want to install Octauthent.
In my case, I choose the “example-blog.ml” site, which is my example site.
Finally, configure which pages will be protected by Octauthent, and which pages will stay public.
For my example, let’s say I want to protect:
- All the wp-admin pages, which contain the admin part of my WordPress
- A very private page where I can write private things. I created a page that can be accessed at example-blog.ml/private-page/ (in my case, there is a trailing slash, but maybe not in yours!)
Here is my config:
Click on the install button, wait a few seconds and the Octauthent login form should appear on your website in the next minute! That’s it!