Adding Password Protection To A Hugo Post

2024-07-07 568 words 3 minutes

Contents

In this post, I’ll show you the simplest way to protect a Hugo page with a password by using front matter and adding a new parameter called “password.” This allows you to set a unique password for each post.

proceed with caution

This method lacks complete security. Anyone with basic computer knowledge can access your post or the repository and view the passwords. Therefore, it’s advisable to avoid sharing sensitive information using this approach. For full password protection, consider using GitHub secrets or variables instead of passwords, though this topic is not covered in this post.

What this post cover

Easy method to assign a password to any Hugo post (not 100% secured)
Users will be prompted to enter a password to access the post.
Unique password for each post

Before we proceed, open the post Top Secret that is protection with a password. When prompted, enter the password 1234 to read the top secret.

1. Add a new parameter, `password`

To give you a sense of what I mean by “Add a new parameter” take a look at the password parameter at the line #9 in the code below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
---
title: "Top Secret"
description: "Password to open the top secret: 1234 "
date: 2024-07-07T13:55:20-05:00
draft: false
tags: ["Hugo"]
categories: ["Development"]
hiddenFromHomePage: true
password: "1234"
---

Any value you input for the password parameter here (for example, 1234) will act as the password for accessing this post. So, include this new parameter in an existing or new post, as we’ll proceed to implement the password protection logic in the following step.

2. Implementing logic for the password parameter

It’s time to write the logic, Let’s add a script to the default post layout. In my case its single.html located at themes/LoveIt/layouts/posts/. The path or the file name may be different in your setup.

Add the following code snippets to your layout file (single.html).

Add this div at the starting of the article class. This will ensures that the content is hidden initially if a password is set.
1
<div id="content-container" {{- if .Params.password -}}style="display: none;"{{- end -}}>

Now add this code at the end of your layout file. The handles the password prompt and reveals the content if the correct password is entered.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<script>
        window.onload = function() {
            var contentContainer = document.getElementById("content-container");
            if ("{{ .Params.password }}" !== "") {
                var password = prompt("Enter password:");
                if (password === "{{ .Params.password }}") {
                    contentContainer.style.display = "block";
                } else {
                    alert("Incorrect password");
                }
            } else {
                contentContainer.style.display = "block";
            }
        };
    </script>

Here my single.html file for quick reference. Look at the line#21 and line#104 to 118

3. Testing the protection

Now that you know how to add a password parameter and the logic to check the password, you can create a new post with a password parameter or add the password parameter to an existing post. This method should work fine.

However, as previously discussed, this method is not 100% secure. At the time of writing this post, I’m not certain about replacing the password with a GitHub variable or secret, or using any similar mechanism to hide the password. If I manage to achieve this (fingers crossed), I will update this post accordingly.

Please share your opinions or any other suggestions by commenting here