Simple password-protection for React app on Heroku

This create-react-app buildpack seems to support http basic auth:

https://github.com/substantial/create-react-app-buildpack

https://elements.heroku.com/buildpacks/substantial/heroku-buildpack-static

I am assuming your intentions are wanting to protect the config vars in heroku so other people cannot access you database with your credentials.

The way I password protected my deployment to heroku, is to make a keys_prod.js file containing the Heroku config vars of my mLab database in my backend using express and mongoDB:

keys_prod.js file:

module.exports = {  mongoURI: process.env.MONGO_URI,  secretOrKey: process.env.SECRET_OR_KEY};

keys.js file:

if (process.env.NODE_ENV === 'production') {  module.exports = require('./keys_prod');} else {  module.exports = require('./keys_dev');}

in my server.js file I added:

// DB Configconst db = require('./config/keys').mongoURI;// Server static assets if in productionif (process.env.NODE_ENV === 'production') {  // Set static folder  app.use(express.static('client/build'));  app.get('*', (req, res) => {    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));  });}

This allows you to request the config vars you filled in heroku without including it in your repo.

If you use Node in backend you can use Passport Basic Auth

app.get('*', passport.authenticate('basic', { session: false }), (req, res) => {  res.sendFile(path.join(`${__dirname}/../build/index.html`))})

Every time you access the page in browser, a popup will appear, asking you username and password.