Adding HTTP Basic Auth to Webpack Dev Server

Question

Is there a simple way to add simple HTTP Basic Authentication to the Webpack Dev Server in a Zero-Configuration-React-App.

What I did:

1. I've created a react app using create-react-app, then built my whole app.
2. I then ejected it using npm run eject.
3. Then I googled for hours and didn't find any hint.

Is there a configuration for this or do I have to add a middleware? Or is the only / easiest way to use webpack together with express?

Answer 1

hi yes you can please look at setup key in webpack config or this url https://webpack.js.org/configuration/dev-server/#devserver-setup i have been there facing such issues, you can simply use basic-auth package to overcome your need

Answer 2

A really easy way to do this is to use the express-basic-auth middleware.

Install it as a dev dependency:

npm install --save-dev express-basic-auth

Then configure webpack as follows:

const basicAuth = require('express-basic-auth');

module.exports = {
  ...
  devServer: {
    ...
    setupMiddlewares: (middlewares, devServer) => {
      devServer.app.use(basicAuth({
        users: {
            'user1': 'password1',
            'user2': 'password2'
        },
        challenge: true
      }));

      return middlewares;
    }
  }
}

Or however you want it to work.