For example, if you decide to protect example.com/private* with a password, it will protect all the following routes.

• example.com/private
• example.com/private/child
• example.com/private/child/grandchild

For now, Octauthent doesn’t provide a native way to protect everything except one specific route (AKA whitelisting).

In this tutorial, you’ll learn how to whitelist a route directly from your Cloudflare dashboard!

The first thing to do is to open the home page of your Cloudflare dashboard. Just click here: https://dash.cloudflare.com/

You’ll see a list of domains, click on the one that is protected by Octauthent

In the left menu, click on “Workers Routes”.

In the right part, you’ll see a list of routes already protected by Octauthent.

Click on the “Add route” button

Enter the URL of the route to whitelist, and keep “None” in the worker field.
N.B: you can use wildcards (*) if you want!

Congratulations! You’ll now see the whitelisted route in the routes list!

In the screenshot below, “Workers are disabled on this route” means that Octauthent will not protect it.

If you change your mind, just click on “Edit” to change or remove it!

That’s it!

Whitelisting routes directly from Cloudflare is a safe way to protect everything except specific URLs

N.B: You can still edit the protected routes directly from your Octauthent dashboard, it won’t affect your whitelisted routes!

A common one is the ERR_TOO_MANY_REDIRECTS error. Most of the time, you just need to change a setting in your Cloudflare dashboard to fix it, here is how:

Open your Cloudflare dashboard, click on your domain name, and open the SSL/TLS tab.

In the “SSL/TLS encryption” card, click on the “Configure” button.

If the “Automatic SSL/TLS” encryption mode is selected, and check if it is set to either Full or Full (strict)

If it’s not Full or Full (strict), it’s probably the source of your problem ! Select the “Custom SSL/TLS” option below and choose the “Full” option

Don’t forget to save your settings

Your problem should now be fixed

Hope it helps, have a nice day! 👍

Once installed on your site, Octauthent provides a dashboard where you can manage users, settings, analytics…

Password protection made easy

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

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!

To make it very simple, imagine that instead of linking your domain name to your website, you link your domain to a third-party service (in our case, Cloudflare), which then redirects all your traffic to your website.

Not only it makes your website faster (because the Cloudflare network is available on hundreds of locations all around the globe), but it can also protect your website from attackers.

If you’re not familiar with Cloudflare, here’s a quick list of some benefits you’ll get:

• CDN — Cloudflare’s content delivery network helps speed up your site by serving your static content from a huge network of global servers. Cloudflare is the most popular free CDN service.
• SSL — if your site doesn’t already have an SSL certificate, Cloudflare can help you use HTTPS on your site to get the green padlock in visitors’ browsers
• DNS — Cloudflare is one of the fastest DNS providers, which can speed up your site’s time to first byte (TTFB)
• DDoS protection — Cloudflare can help you protect against distributed denial of service (DDoS) attacks. It can also help you just generally filter out malicious traffic
• Other performance benefits — Cloudflare can help you minify your code, enable Brotli compression, and implement other performance best practices

1. Cloudflare setup

For my example, I’ll use a WordPress blog, which is already working with my custom domain name: example-blog.ml. You can follow the exact same steps with your own domain.

First, create a Cloudflare account. As soon as you have signed up, Cloudflare will start the installation process.

Enter your website domain, then choose the free plan (on the bottom). The free plan is more than enough for most website owners, including me.

Cloudflare will now perform a quick scan to detect your current domain configuration. Accept the recommended settings (unless you know what you’re doing), and click on Continue.

In order to use the Cloudflare proxy your on a domain or a subdomain, you must have the orange cloud in the “Proxy status” column. In the screenshot below, all the traffic on example-blog.ml and www.example-blog.com will go through the Cloudflare network

In order to finish the installation, Cloudflare will now give you clear instructions about what to do from your registrar account (where you bought your domain name!)

In my case, I log into my registrar account, look for the DNS / nameservers settings, and change them as I’m told. Please note that the user interface may be completely different in your case because we probably don’t have the same registrar.

2. Waiting!

After the setup is finished, there is one last step: waiting. DNS is a complex matter and there are lots of cache levels, so be patient. You probably need to wait only a few minutes, but in some cases, it can be several hours.

To know if the installation process is finished, refresh the “Overview” tab of your Cloudflare dashboard. If you still see the setup instructions, wait a little bit more. If the installation is finished, you’ll see the following message

Please note that even after you see this message, you may have to wait a little bit more until your visitors (including you) are actually passing through the Cloudflare network.

To confirm that Cloudflare is effectively protecting your site, go to:

https://[your-domain]/cdn-cgi/trace using your web browser. In my example: https://example-blog.ml/cdn-cgi/trace

• If you see a black text with your domain in the second line, you’re done!
• If you see a 404 Not found error, a ERR_SSL_PROTOCOL_ERROR, or any other result, wait a little bit more. DNS propagation can take up to 24 hours.
• If you see a ERR_TOO_MANY_REDIRECTS, you just need to change a setting in your Cloudflare dashboard. Follow this short guide to fix it.

3. Next steps

Now that Cloudflare runs on your site, you can add a login form on all pages you want to protect using Octauthent.

Password protection made easy

I’ve made another step-by-step tutorial to explain this part, 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

Here is the tutorial if you need more details:

How to password-protect your website with Octauthent

Have a good day 👋

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

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

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

How to password-protect your website with Octauthent

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 👍

Creating a website or an app has never been so easy. There are so many tools and platforms to help you in this journey, with or without code, paid or free, with lots of features to make your life easier.

With these tools, you can create blogs, e-commerce websites and portfolios in less than a day! However, most of the time, adding a login form to your website quickly becomes a nightmare:

• If you have access to all the code of the website (including the back-end), and if you’re an experienced developer, you can try to code this feature yourself, which will probably take a few weeks, or you can try to integrate an authentication platform, which can be quite complex if it is your first time.
• If you created and deployed your website on a no-code platform, maybe this platform offers a password protection feature, maybe not!

Whatever your case may be, Octauthent can probably help you!

Octauthent is a simple 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

Octauthent can be installed on almost every site or platform, even the most limited ones. In fact, there is only one requirement to use Octauthent on your website: You need to own the domain name of this website.

If that’s the case, congratulations! Follow the tutorial below, and you’ll have a login form on your website in a few minutes 🎉

Before we start, how does it work?

To make it very simple, imagine that instead of linking your domain name to your website, you link your domain to a third-party service (in our case, Cloudflare), which then redirects all your traffic to your website.

Not only it makes your website faster (because the Cloudflare network is available on hundreds of locations all around the globe), but it can also protect your website from attackers.

Now, imagine that the third party service not only redirects traffic, but can also block requests and show them a login form instead of your site.

That’s exactly what Octauthent does!

Every request to your website domain is intercepted by Cloudflare and analyzed by Octauthent, which acts as a bouncer. Unauthorized requests are blocked, allowed ones are routed to your site through Cloudflare’s intelligent global network

Now that you have a better understanding of how it works, let me show you how to set up Cloudflare and Octauthent on your site.

1. Setup Cloudflare

As explained above, Cloudflare is a company that provides web performance and security services, and is completely free for most users! If you’re not familiar with Cloudflare, here’s a quick list of some benefits you’ll get:

• CDN — Cloudflare’s content delivery network helps speed up your site by serving your static content from a huge network of global servers. Cloudflare is the most popular free CDN service.
• SSL — if your site doesn’t already have an SSL certificate, Cloudflare can help you use HTTPS on your site to get the green padlock in visitors’ browsers
• DNS — Cloudflare is one of the fastest DNS providers, which can speed up your site’s time to first byte (TTFB)
• DDoS protection — Cloudflare can help you protect against distributed denial of service (DDoS) attacks. It can also help you just generally filter out malicious traffic
• Other performance benefits — Cloudflare can help you minify your code, enable Brotli compression, and implement other performance best practices

Let’s start

For my example, I’ll use a WordPress blog, which is already working with my custom domain name: example-blog.ml. You can follow the exact same steps with your own domain.

First, create a Cloudflare account. As soon as you have signed up, Cloudflare will start the installation process.

Enter your website domain, then choose the free plan (on the bottom). The free plan is more than enough for most website owners, including me.

Cloudflare will now perform a quick scan to detect your current domain configuration. Accept the recommended settings (unless you know what you’re doing), and click on Continue.

In order to use Octauthent on a domain or a subdomain, you must have the orange cloud in the “Proxy status” column. In the screenshot below, I’ll be able to install Octauthent on example-blog.ml and www.example-blog.com

In order to finish the installation, Cloudflare will now give you clear instructions about what to do from your registrar account (where you bought your domain name!)

In my case, I log into my registrar account, look for the DNS / nameservers settings, and change them as I’m told. Please note that the user interface may be completely different in your case because we probably don’t have the same registrar.

After that, there is one last step: waiting. DNS is a complex matter and there are lots of cache levels, so be patient. You probably need to wait only a few minutes, but in some cases, it can be several hours.

To know if the installation process is finished, refresh the “Overview” tab of your Cloudflare dashboard. If you still see the setup instructions, wait a little bit more. If the installation is finished, you’ll see the following message

Please note that even after you see this message, you may have to wait a little bit more until your visitors (including you) are actually passing through the Cloudflare network.

To confirm that Cloudflare is effectively protecting your site, go to:

https://[your-domain]/cdn-cgi/trace using your web browser. In my example: https://example-blog.ml/cdn-cgi/trace

• If you see a black text with your domain in the second line, you’re good to go to the next step!
• If you see a 404 Not found error, a ERR_SSL_PROTOCOL_ERROR, or any other result, wait a little bit more. DNS propagation can take up to 24 hours.
• If you see a ERR_TOO_MANY_REDIRECTS, you just need to change a setting in your Cloudflare dashboard. Follow this short guide to fix it.

2. Install Octauthent

Now that all your traffic is passing through Cloudflare, let’s install Octauthent on it.

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!

I hope you enjoyed this tutorial, don’t hesitate to comment if you think it can be improved

Also, Octauthent is still very new and in active development. Don’t hesitate to tell me what you think about it and how it could be improved.

Have a nice day 👍