How to authorize users to access to personal pages with glitch.com

In this post we will start looking at ways to make a personalized page for the user to access to personal data via username and password. We will use glitch.com and javascript. In a future post we will use it into Flask with Python.

Check the example here in my project (from a modified glitch project).

You will need this package.json configuration file:

{
  "//1": "describes your app and its dependencies",
  "//2": "https://docs.npmjs.com/files/package.json",
  "//3": "updating this file will download and update your packages",
  "name": "hello-express",
  "version": "0.0.1",
  "description": "A simple Node app built on Express, instantly up and running.",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.16.4",
    "basic-auth": "^2.0.1"
  },
  "engines": {
    "node": "8.x"
  },
  "repository": {
    "url": "https://glitch.com/edit/#!/hello-express"
  },
  "license": "MIT",
  "keywords": [
    "node",
    "glitch",
    "express"
  ]
}

Then you will need a js file with the code for the different users to access to different pages called server.js:

// server.js
// where your node app starts

// init project
var express = require("express");
var app = express();

// we've started you off with Express,
// but feel free to use whatever libs or frameworks you'd like through `package.json`.

var userName1 = process.env.USERNAME1;
var userPass1 = process.env.PASSWORD1;

var userName2 = process.env.USERNAME2;
var userPass2 = process.env.PASSWORD2;

var userName3 = process.env.USERNAME3;
var userPass3 = process.env.PASSWORD3;

var basicAuth = require("basic-auth");
let name = "";
app.use(function(request, response, next) {
  let user = basicAuth(request);
  console.log(user);
  
  
  if (!user  || ((user.name !== userName1 || user.pass !== userPass1) 
             && (user.name !== userName2 || user.pass !== userPass2)
             && (user.name !== userName3 || user.pass !== userPass3))
     
     )
            {
              response.set("WWW-Authenticate", 'Basic realm="example"');
              return response.status(401).send();
            }
  


  name = user.name;
  
  return next();
});

// http://expressjs.com/en/starter/static-files.html
app.use(express.static("public"));

// http://expressjs.com/en/starter/basic-routing.html
// DIFFERENT PAGES FOR EACH NAME

app.get("/", function(request, response) {
    response.sendFile(__dirname + "/views/"+name+".html");
  });



// listen for requests :)
var listener = app.listen(process.env.PORT, function() {
  console.log("Your app is listening on port " + listener.address().port);
});

The secret data are in the .env file that are accessible only to the creator of the project. This is my example:

# Environment Config

# store your secrets and config variables in here
# only invited collaborators will be able to see your .env values

# reference these in your code with process.env.SECRET

USERNAME1="john"
PASSWORD1="ciao"

USERNAME2="sara"
PASSWORD2="bye"

USERNAME3="mirko"
PASSWORD3="hello"
# note: .env is a shell file so there can't be spaces around =

We should use a database and a way to make the user create the password by itself, but, to start, this is what you will need. In a future post we will make the user able to create their passwords.

Video about personalized pages for different users