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

Published by pythonprogramming

Started with basic on the spectrum, loved javascript in the 90ies and python in the 2000, now I am back with python, still making some javascript stuff when needed.