Недавно я работал над прототипом для клиента, который хотел и заслуживал определенного уровня конфиденциальности (как на самом деле каждый клиент должен это делать и должен получить от вас!).

По нескольким причинам создание прототипа с использованием React и развертывание его на heroku было выбором, который мы сделали, и он нас полностью удовлетворил.

Настроить проект с использованием create-react-app несложно, и мы могли бы сразу приступить к работе над настоящим.

Доставить текущую версию прототипа можно, просто поместив ее в (новое) приложение heroku, которое использует create-react-app-buildpack, дополнительную информацию можно найти в документации heroku.

Тем не менее, к приложению может получить доступ любой, так как нулевая конфигурация - это хорошо, но также означает, что невозможно настроить какую-либо защиту доступа. Добавление аутентификации к самой бизнес-логике прототипов было невозможным, поэтому мы решили использовать HTTP Basic Auth.

Приложение для реагирования, созданное с помощью create-react-app, использует WebpackDevServer для создания ваших источников и обслуживания всего с помощью express, который в основном легко настроить, вам просто нужно получить его файлы конфигурации ... в приложении с нулевыми файлами конфигурации ... хм.

Шаги

Конечно, нулевые файлы конфигурации на самом деле неверны, только вы не видите никаких файлов конфигурации, так как они довольно хорошо прячутся. Итак, сначала вам нужно извлечь их из скрытых удобных мест, выполнив эту команду:

$ npm run eject

Подробнее про выброс здесь.

Теперь у вас есть все ваши скрипты и файлы конфигурации. Для нас важен тот, который запускает WebpackDevServer, неожиданно называемый start.js, расположенный в scripts/start.js.

Чтобы добавить HTTP Basic Auth для выражения, вы можете использовать пакет узла basic-auth, поэтому установите его:

$ npm install --save basic-auth

Теперь в start.js загрузите его:

var auth = require('basic-auth');

И добавьте свою логику аутентификации к экземпляру WebpackDevServer:

function runDevServer(host, port, protocol) {
  var devServer = new WebpackDevServer(compiler, {
    // rest of config
    // ...
    // around line 265
   
    setup: function(app) {
      app.all('*', function (req, res, next) {
        if (process.env.AUTH_USER && process.env.AUTH_PASSWORD) {
          var credentials = auth(req)

          if (
               !credentials
               || credentials.name !== process.env.AUTH_USER
               || credentials.pass !== process.env.AUTH_PASSWORD
             ) {
            res.statusCode = 401
            res.setHeader('WWW-Authenticate',
                          'Basic realm="Prototype Access"')
            res.end('Access denied')
          } else {
            next()
          }
        } else {
          next()
        }
      })
    }
  });

  // ...
}

Вы должны установить имя пользователя и пароль как переменные среды AUTH_USER и AUTH_PASSWORD, либо запустив локальный сервер следующим образом:

$ AUTH_USER='john' AUTH_PASSWORD='secret' npm start

Или для героку, установив их в админке или в строке cmd:

$ heroku config:set AUTH_USER=john
$ heroku config:set AUTH_PASSWORD=secret

Если вы использовали упомянутый выше пакет сборки heroku, возможно, вам придется удалить его и полагаться на автоматическое определение, чтобы все заработало!

Если вы не указали имя пользователя или пароль, аутентификация не требуется, все просто.

Запустите приложение и наслаждайтесь запросом другого пароля!

Полный текст можно найти здесь: https://gist.github.com/martin-snajdr/f31faae4e6e2ff8b4a83e206efbf2532

Спасибо khalid в stackoverflow за то, что он указал мне правильное направление.