[Template/Tutorial] How to password-protect a static (!) website

Update 2020-07-28: Glitch changed the way they serve static websites. This method no longer works! I will post the details in a reply.

Project URL: https://glitch.com/~hello-protected-webpage

(Default login and password are “glitch_user” and “meow”.)

This is a template for a static website with password protection. Note: it only works with static websites, no server-side code! If you want to password-protect an existing website, README.md of my project will tell you how to configure local-web-server which Glitch uses to serve static websites.

TL;DR:

Create a static.config.js file in the root of your project. Put the following inside:

module.exports = {
  authUser: "<your username here>",
  authPass: "<your password here>"
};

If your project is private, then no one will be able to see your password, it isn’t stored in your client-side code accessible to the users. However, if the project is public, it will be easy to see for everyone, and putting it into .env doesn’t work because Glitch seems to first run the server and then load .env. So, if a Glitch maintainer is reading this, could you please change your settings so that it could work? (All the details are in README.md.)

1 Like

Hey @wish, how did you do it? The code did not show any linking between the files!

What do you mean? o:

Magic… No links i can see

I’ll explain.

Glitch allows you to make configuration files for a static site because it uses the local-web-server module, you populate it with rules and stuff like that.

One of the modules included is basic-auth, and the AuthPass and AuthUser code is the configuration it uses to tell the site to require those details.

So @khalby786, the static.config.js file is already linked as a configuration file. Thats how it works i think…

@17lwinn, the reason was actually there in the README. I was too lazy to read it:

As said in Glitchnomicon, Glitch uses local-web-server for static websites. It loads its configuration from static.config.js or lws.config.js . local-web-server homepage lists all the modules turned on by default, and first of them is basic auth. If we go to its homepage, we see that it tells us to use --auth.user and --auth.pass configuration options. And local-web-server wiki tells us to turn --auth.user and --auth.pass into authUser: "<your username here>" and authPass: "<your password here>" and put them into our static.config.js , an example of which you can see in this project.

I was pretty much referring to this

1 Like

Im going to use this method in a CyberChef project

This method no longer works. Glitch changed the way they serve static websites: now local-web-server is started when you open the editor, but stopped and replaced with something else in a few minutes after you close it. This change was required to make it possible for static websites to never sleep, so I can’t blame Glitch. However, it creates uncertainty: if you write your config into null.config.js (they changed the path for some reason!), the website will ask your password as long as local-web-server is running, but not after it stops.

1 Like