Search code examples
node.jsreactjsherokucreate-react-appbasic-authentication

Username/password not accepted when enabling basic authentication for React app on Heroku

I am trying to enable basic authentication for a React app deployed to heroku, using the create-react-app buildpack, which includes the static buildpack. I succeed in enabling basic authentication - I get a login prompt - but the username and password that I configured via config variables are not accepted.

This is my configuration:

static.json:

{
  "root": "build/",
  "routes": {
    "/**": "index.html"
  },
  "basic_auth": true
}

I set the config variables BASIC_AUTH_USERNAME and BASIC_AUTH_PASSWORD in the heroku web ui. According to the static buildpack documentation, this should lead to a .htpasswd file being created in the app directory during deployment.

In the console I see that the environment variables are set but I can see that no .htpasswd file was generated in the /app directory:

~ $ printenv
PWD=/app
NODE_ENV=development
NODE_HOME=/app/.heroku/node
HOME=/app
BASIC_AUTH_PASSWORD=mypassword
BASIC_AUTH_USERNAME=myusername
[...]

~ $ ls -a
.                   .env.production  bin           package-lock.json
..                  .gitignore       build         package.json
.buildpacks         .heroku          config        public
.env.development    .profile.d       logs          src
README.md           node_modules     static.json

The deployment log file shows no errors or warnings:

[...]
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git#v9.0.0
=====> Detected Framework: React.js (create-react-app)
       Using existing `static.json`
       Enabling runtime environment variables
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
=====> Detected Framework: Static HTML
-----> Installed nginx 1.19.0 to /app/bin
Using release configuration from last framework (Static HTML).
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 81M
-----> Launching...
       Released v22
       https://myapp.herokuapp.com/ deployed to Heroku

What can I do to find out why the .htpasswd file is not generated? Or is there a better way to enable basic authentication (without storing username/password in the source code)?

Solution

  • I found the answer myself here:

    "BASIC_AUTH_PASSWORD must be a hash of your password. Use command openssl passwd -apr1 to hash your password"