How To Use HTTP Basic Authentication With Nginx

Nginx Web Server is among the popular web servers and widely-used to host websites. We can password protect either the complete site or specific sections of a site using the HTTP Basic Authentication with the Nginx Web Server. This tutorial provides the steps to generate the username and password pairs using the htpasswd utility and store the password in the .htpasswd file. It also shows how to password protect or restrict access to the complete site or specific sections of the site by updating the server block. All the examples provided in this tutorial are tested using the Nginx 1.17.10 installed on Ubuntu 20.04 LTS. The steps should be the same for the other versions of Ubuntu and Linux systems.

Prerequisites

This tutorial assumes that you have already installed Ubuntu 20.04 LTS desktop or server version either for local or production usage. You can follow Install Ubuntu 20.04 LTS Desktop, Install Ubuntu 20.04 LTS On Windows Using VMware, and Spin Up Ubuntu 20.04 LTS Server On Amazon EC2 to install Ubuntu 20.04 LTS. It also assumes that you have either root privileges or a regular user with sudo privileges.

It also assumes that the Nginx Web Server is already installed. You may follow How To Install And Configure Nginx on Ubuntu 20.04 LTS,  Configure Virtual Host Or Server Block On Nginx, and How To Install Let's Encrypt For Nginx On Ubuntu.

In the case of production usage, it assumes that you have access to the remote server.

Generate Password

This section provides the steps to generate and store the password using the htpasswd utility. Use the below-mentioned commands to create and store the password using the htpasswd utility.

# Install Apache Utils
sudo apt install apache2-utils

# Create Password File
sudo htpasswd -c /<path to .htpasswd>/.htpasswd username

# Example 1
sudo htpasswd -c /etc/secure/.htpasswd nick

# Output
New password: <strong password>
Re-type new password: <strong password>
Adding password for user nick

This will generate the password and stores the username and password pair on a separate line in the .htpasswd file. We can add more users using the same file without the -c argument as shown below.

# Example 2
sudo htpasswd -c /etc/secure/.htpasswd roy

# Output
New password: <strong password>
Re-type new password: <strong password>
Adding password for user roy

We can also verify the htpasswd file as shown below.

# Echo File Content
cat /etc/secure/.htpasswd

# .htpasswd File Content
nick:1$pr1$C9tqmsDt$ztcUda2bK12BC1brVYtv00
joy:$apr1$TAgZlVu1$Vil6BFu75PsErb3tnxv12/

Configure Server Block

This section provides the configurations required to password protect the site by updating the virtual host. The virtual host of a site hosted by the Nginx Web Server should have similar configurations as shown below.

# Content
server {
	listen       80;
	server_name  example.com www.example.com;
        root /var/www/example.com/html;
        index index.html index.htm;
        location / {
                try_files $uri $uri/ =404;
        }
        location ~ /\.ht {
                deny all;
        }
}

The above configuration does not block any resource of the site example.com. We can update the server block or the virtual host to completely password protect the site by implementing HTTP Basic Authentication as shown below.

# Server Block
sudo nano /etc/nginx/sites-available/example.com

# Content
server {
    listen       80;
    server_name  example.com www.example.com;
        root /var/www/example.com/html;
        index index.html index.htm;
        location / {
                try_files $uri $uri/ =404;
		auth_basic           "Restricted";
		auth_basic_user_file /etc/secure/.htpasswd;
        }
        location ~ /\.ht {
                deny all;
        }
}

Now reload the Nginx Web Server and try to access the site.

# Reload Nginx
sudo systemctl reload nginx

The auth dialog should be similar to Fig 1.

Fig 1

It will allow access to the site by providing the valid User Name and Password. In case of wrong username or password, after pressing the Cancel Button it shows the 401 error as shown in Fig 2.

Fig 2

We can also restrict the specific subdirectory of a site as shown below.

# Server Block
sudo nano /etc/nginx/sites-available/example.com

# Content
server {
    listen       80;
    server_name  example.com www.example.com;
        root /var/www/example.com/html;
        index index.html index.htm;
        location / {
                try_files $uri $uri/ =404;
        }
        location /admin {
		auth_basic           "Restricted";
		auth_basic_user_file /etc/secure/.htpasswd;
        }
        location ~ /\.ht {
                deny all;
        }
}

# Reload Nginx
sudo systemctl reload nginx

The above configuration will show the Auth Dialog only when someone tries to access the admin i.e. http://www.example.com/admin. The rest of the site will be publicly accessible.

Allow/Deny IP

We can also allow or deny either a single IP or a block by further updating the server block as shown below.

# Server Block
sudo nano /etc/nginx/sites-available/example.com

# Content
server {
    listen       80;
    server_name  example.com www.example.com;
        root /var/www/example.com/html;
        index index.html index.htm;
        location / {
                try_files $uri $uri/ =404;
		deny  192.168.1.2;
		allow 192.168.1.1/24;
		allow 127.0.0.1;
		deny  all;

		auth_basic           "Restricted";
		auth_basic_user_file /etc/secure/.htpasswd;
        }

        location ~ /\.ht {
                deny all;
        }
}

# Reload Nginx
sudo systemctl reload nginx

Summary

This tutorial provided the steps required to generate the password file using htpasswd utility and configure the server block or virtual host to password-protect and restrict access to the whole website by implementing HTTP Basic Authentication. It also showed how to password protect the site either completely or parts of it by updating the server block.