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