Private Eleventy blog #2231

avidseeker · 2022-02-18T19:06:49Z

avidseeker
Feb 18, 2022

I can successfully publish my blogs on netlify or github pages, but is there a way to add simple and secure authentication system to access the blog?

pdehaan · 2022-02-18T19:12:05Z

pdehaan
Feb 18, 2022
Collaborator

Possibly https://docs.netlify.com/visitor-access/password-protection/

2 replies

avidseeker Feb 18, 2022
Author

It's currently only available to Pro versions. Any self-hosted options?

cfjedimaster Feb 18, 2022

self-hosted as in - on your own personal machine? You can do basic http auth w/ Apache for sure.

pavelloz · 2022-03-02T14:43:57Z

pavelloz
Mar 2, 2022

You could try using netlify functions for this purpose, they can act as an API, even if user/password is hardcoded.

0 replies

lucasgelfond · 2025-01-28T01:08:51Z

lucasgelfond
Jan 28, 2025

I built something myself because i was pretty disappointed at most of the solutions others proposed. Certainly not super scalable but works perfectly for me (see http://lucasgelfond.online), happy to try to help others setup and maybe could build a less jank version (that uses templates) and publish.

All of this just goes within eleventy.js

first, I apply a trasnform on the encrypted pages

  eleventyConfig.addTransform("encrypt-content", async function (content) {
    // janky way of deciding what is encrypted
    // in future maybe separate this out as an asset
    const encryptedPages = {
      // swapped out real names 
      slugList: ["page-name-1", "page-name-2"],
    };

    if (encryptedPages.slugList.includes(this.page.fileSlug)) {
      const CryptoJS = require("crypto-js");

then, i have a secret key that i keep in the env / use for encryption

      // .env is being sneaky, resolve the path
      const path = require("path");
      const dotenv = require("dotenv");
      const envPath = path.resolve(__dirname, ".env");
      dotenv.config({ path: envPath });
      const SECRET_KEY = process.env.SECRET_KEY;
      const stringContent = content.toString();
      const encrypted = CryptoJS.AES.encrypt(
        stringContent,
        SECRET_KEY
      ).toString();

for all of those pages that I want to make private, i manually write the HTML (LOL), which basically has all of the info on it to open the page

      const safePageContent = `
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Lucas Gelfond • ${this.page.fileSlug}</title>
          <link rel="icon" type="image/png" href="/assets/images/favicon.png" />
          <link rel="stylesheet" href="/style.css">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
      </head>
      <body class="post resizable-container-large">
          <main>
              <div class="post-template">
                  <header class="post-title">
                      <h1 id="title">${this.page.fileSlug} - Private Page</h1>
                  </header>
                  <div class="content">
                      <p>Hello! This page is private, because I did this work for a company (and don't own the IP). If you're here, you likely already have the password, but if not, feel free to <a href="mailto:lucasgelfond@gmail.com?subject=Website%20Portfolio&body=Mind%20sending%20me%20the%20password%20to%20your%20portfolio%20site%3F">email me</a> and I'll send it to you!</p>
                      <button onclick="authenticate()" style="background-color: #007bff; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 8px; transition: background-color 0.3s; font-family: Consolas, monospace;">Unlock</button>
                  </div>
              </div>
          </main>

the authenticate function first:

checks if there is a stored secretkey in localstorage - once you have authenticated once, you never need to again
if there is, decrypts the page

   <script>
          async function authenticate() {
              const storedSecretKey = localStorage.getItem('secretKey');
              if (storedSecretKey) {
                  try {
                      const decrypted = CryptoJS.AES.decrypt("${encrypted}", storedSecretKey).toString(CryptoJS.enc.Utf8);
                      if (decrypted) {
                          document.body.innerHTML = decrypted;
                          return;
                      }
                  } catch (error) {
                      console.error("Decryption error:", error);
                      localStorage.removeItem('secretKey');
                  }
              }

if not, it checks a really tiny node service i deployed on railway (costs me maybe $0.10 or $0.20 per month) that will return the private key (janky, i know) if you send up the correct password. i did this so i could give out multiple passwords

              const password = prompt("Enter the password to unlock this page:");
              if (password) {
                  try {
                      const response = await fetch('https://personal-site-auth-production.up.railway.app/checkPass', {
                          method: 'POST',
                          headers: {
                              'Content-Type': 'application/json',
                              'Access-Control-Allow-Origin': '*',
                          },
                          body: JSON.stringify({ password: password }),
                          mode: 'cors',
                      });
                      const data = await response.json();

if the secret key is correct (or we had one in local storage), we:

store the key in localStorage so the user doesn't need to authenticate other secret pages
decrypt the page. this works by literally storing the encrypted page content in a string in the <script> tag (see ${encrypted). Then, with the correct password, sets the document.innerHTML to the result of the decryption

  
                      if (data.authenticated) {
                          const decrypted = CryptoJS.AES.decrypt("${encrypted}", data.secretKey).toString(CryptoJS.enc.Utf8);
                          if (decrypted) {
                              localStorage.setItem('secretKey', data.secretKey);
                              console.log('Secret key saved to localStorage:', data.secretKey);  
                              document.body.innerHTML = decrypted;
                          } else {
                              alert("Decryption failed. Please try again.");
                          }
                      } else {
                          alert("Incorrect password. Please try again.");
                      }
                  } catch (error) {
                      console.error("Authentication error:", error);
                      alert("An error occurred during authentication. Please try again.");
                  }
              }
          }

I also have something to check localstorage on load, and this only occurs if it is a secret slug - otehrwise we let eleventy return the normal page content


          // Check localStorage on page load
          window.addEventListener('load', () => {
              const storedSecretKey = localStorage.getItem('secretKey');
              if (storedSecretKey) {
                  console.log('Secret key found in localStorage:', storedSecretKey);
                  authenticate();
              } else {
                  console.log('No secret key found in localStorage');
              }
          });
          </script>
      </body>
      </html>`;

      return safePageContent;
    } else {
      return content;
    }
  });

  return {
    dir: {
      input: "src",
      output: "_site",
    },
  };
};

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Private Eleventy blog #2231

{{title}}

Replies: 3 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Private Eleventy blog #2231

avidseeker Feb 18, 2022

Replies: 3 comments · 2 replies

pdehaan Feb 18, 2022 Collaborator

avidseeker Feb 18, 2022 Author

cfjedimaster Feb 18, 2022

pavelloz Mar 2, 2022

lucasgelfond Jan 28, 2025

avidseeker
Feb 18, 2022

Replies: 3 comments 2 replies

pdehaan
Feb 18, 2022
Collaborator

avidseeker Feb 18, 2022
Author

pavelloz
Mar 2, 2022

lucasgelfond
Jan 28, 2025