Learn how to protect a directory or a domain with a password from the server
Blocking a website with a server-side password is the best way to prevent the crawling and indexing of a page.
This is also extremely useful for websites under development or their testing/staging versions.
The big question here is usually how to implement this. So here are several ways to do it.
Many websites that use a control panel such as Plesk or cPanel already have this option built in, so the effort or complexity required to implement it is minimal. You simply add the directory you want to protect (the entire project if needed) and then add the users.
In Apache, the recommended approach is to do this via the .htaccess file in the project ROOT folder to protect the entire website, or within the specific directory you want to protect, although it can also be done using location/locationmatch.
You must then add the following lines:
AuthUserFile /home/stage/web/domain/public_html/.htpasswd
AuthType Basic
AuthName "Try to access"
Require valid-user
Once these lines are in place, you have the foundation, but it’s still incomplete. Access to the website will not be possible because no valid users exist yet. The next step is to create them, which means generating the user list.
The user list must be created in a file called .htpasswd. For those who are not fans of encryption, I recommend generating users with this htpasswd generator, which also allows different encryption methods.
To set it up correctly, follow these steps:
Now you have the list of valid users, but you still need to link it to the AuthUserFile.
To do this, you need to know the exact path to your .htpasswd file. If your website runs on PHP (otherwise, do the same using the corresponding language), create an index.php file in the same folder as the .htpasswd file and add the following code:
<?php echo dirname(__FILE__) . '/.htpasswd';?>
Access that folder via its URL, and it will output a path:
Copy this path and paste it into the AuthUserFile directive, and everything will work perfectly.
Apply the same steps as in Apache using the .htpasswd file, but add the following code inside the server{} block in the nginx.conf file:
location /path/to/your/page {
auth_basic "Restricted access";
auth_basic_user_file /path/to/file/.htpasswd;
}
The other difference is that for this implementation to work, you must reload the Nginx configuration (or, in extreme cases, restart it).
Azure Static Web Apps work slightly differently from traditional servers. Let’s see how to do this by working with the following JSON files.
In Azure Static Web Apps, functions are used to implement custom logic within the web application. To create an authentication function, follow these steps:
module.exports = async function (context, req) {
const username = req.body.username;
const password = req.body.password;
if (username === 'username' && password === 'password') {
context.res = {
status: 200,
body: "Authenticated"
};
} else {
context.res = {
status: 401,
body: "Unauthorized"
};
}
};
This code simply checks whether the provided credentials match a specific username and password and returns either an authenticated or unauthorized status.
To configure the authentication function, you need to specify the route that the function will protect. To do this, create a routes.json file in the root of your project and add the following code:
{
"routes": [
{
"route": "/subdomain/*",
"allowedRoles": ["anonymous"],
"methods": ["GET", "POST"],
"authLevel": "function",
"functionName": "your-authentication-function-name"
}
]
}
This file configures the authentication function to protect all routes under the subdomain subdomain and allows any user with the role "anonymous" to access them. It also specifies that authentication will be handled through the function you created earlier.
To specify the users and passwords that will have access to the protected subdomain, create an access configuration file. You can do this directly in the routes.json file or by using a storage service such as Azure Blob Storage. For this example, we’ll create an access.json file directly in the project.
Add the following code to the file:
{
"users": [
{
"username": "user1",
"password": "password1"
},
{
"username": "user2",
"password": "password2"
}
]
}
This file defines two users, each with a username and password. You can add as many users as needed. It is the equivalent of an htpasswd file.
Finally, you need to modify the authentication function to check user credentials against the access configuration file. To do this, replace the code in the authentication function accordingly.
Once these steps are completed, your subdomain will be password-protected, and only authorized users will be able to access it. Keep in mind that these steps may vary depending on the version of Azure Static Web Apps you are using.
For more detailed guidance, I recommend consulting the official Azure Static Web Apps documentation.
If you want to learn this in a more advanced way or have someone guide you step by step, you can explore this and much more in the SEO Master's program. A truly hands-on training where you implement all changes on a website and are supervised.
I currently offer advanced SEO training in Spanish. Would you like me to create an English version? Let me know!
Tell me you're interestedIf you liked this post, you can always show your appreciation by liking this LinkedIn post about this same article.
