Question: Is there a way to password protect the entire app on Heroku?

[lifeonlars]

I've deployed my angular-fullstack app to Heroku, however since it's a prototype I need to add some basic password protection to prevent the general public from accessing it. I don't want to use the user login within angular-fullstack as that needs to work as part of the app for user testing allowing users to create a new account etc.

I had some limited success implementing https://www.npmjs.org/package/http-auth in server/app.js.

var preAuth = require('http-auth');
var basic = preAuth.basic({
        realm: "Restricted Access. Please login to proceed."
    }, function (username, password, callback) { 
         callback( (username === "user" && password === "password"));
    }
);

// Setup server
var app = express();
app.use(preAuth.connect(basic));
var server = require('http').createServer(app); 

This gave me the expected functionality with just a simple login prompt before I could access the app. Unfortunately it also seems to trigger every time I try to login as a user after the initial password prompt, and as a result makes it impossible to login as a user in the actual app. As I just keep getting the preAuth callback whenever I try to login as a regular user.

I tried into using the wwwhisper addon, but it seemed to just break the entire app when I added it.

Is there any way to achieve this without breaking the normal login functionality and completely preventing users from seeing the app before logging in? I'm running out of ideas, the only other thing I can think of is to rewrite the app so that the default reverts to a login screen but that would change the flow of the prototype compared to what the live version would be.

[anthonyettinger]

I do something like this:

 //basic authentication for the prototype
  var basicAuth = require('basic-auth');

  var auth = function (req, res, next) {
    if ( cfg.env === 'development' ) {
      return next();
    }

    function unauthorized(res) {
      res.set('WWW-Authenticate', 'Basic realm=Authorization Required');
      return res.send(401);
    }

    var user = basicAuth(req);

    if (!user || !user.name || !user.pass) {
      return unauthorized(res);
    }

    if (user.name ===  cfg.basicAuth.user && user.pass === cfg.basicAuth.pass ) {
      return next();
    } else {
      return unauthorized(res);
    }
  };

  app.use(auth());

[lifeonlars]

Thanks for the tip. Unfortunately I couldn't get the basic-auth to work for me for some reason. I just keep getting 'Cannot read property 'req' of undefined' even when using their basic example. Does your approach still allow for regular user logins after the initial basic-auth login?

[anthonyettinger]

woops, try this: app.use(auth(req, res, next));

[lifeonlars]

Still getting the req is not defined error no matter what I seem to do with basic-auth. This is my current server/app.js file.

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

var express = require('express');
var mongoose = require('mongoose');
var config = require('./config/environment');


// Connect to database
mongoose.connect(config.mongo.uri, config.mongo.options);

// Setup server
var app = express();
var server = require('http').createServer(app);

//basic authentication for the prototype
var basicAuth = require('basic-auth');
var auth = function (req, res, next) {

    function unauthorized(res) {
      res.set('WWW-Authenticate', 'Basic realm=Authorization Required');
      return res.send(401);
    }

    var user = basicAuth(req);

    if (!user || !user.name || !user.pass) {
      return unauthorized(res);
    }

    if (user.name ===  'bob' && user.pass === 'secret' ) {
      return next();
    } else {
      return unauthorized(res);
    }
  };

app.use(auth(req, res, next));


require('./config/express')(app);
require('./routes')(app);

// Start server
server.listen(config.port, config.ip, function () {
  console.log('Express server listening on %d, in %s mode', config.port, app.get('env'));
});

// Expose app
exports = module.exports = app;

[lifeonlars]

@anthonyettinger Would you be able to provide a bit more information on what other components you are using to password protect your Heroku app? I can't get your code to work as I just keep getting 'req' is undefined. If I modify the code to run the function within app.use(function(req, res, next) {} I can get the http auth to work, however it still incorrectly triggers when I try to use the angular-fullstack login.