Enabling 2-way PKI authentication

[bitsandbytes]

I need 2-way authentication to be configurable because my company requires all internal webapps to use it.

The proposal is three-fold. I want the following to be configurable:

• Configure the webapp to request the client's certificate,
• Once the webapp receives the certificate pass information about the cert to the expressjs server,
• Make the webapps' certificate and key configurable.

Background on this:

• Two-way authentication involves the browser/client sending a user's certificate to the back-end.
  • Passport, for example, has a strategy for this: https://github.com/ripjar/passport-client-cert
• In proxying environments, it's acceptable for the webapp/frontend to send certificate attributes to the backend
  • This was discussed here, getPeerCertificate() is an empty object when using dev server #1413, which provides some useful links:
  • http://www.zeitoun.net/articles/client-certificate-x509-authentication-behind-reverse-proxy/start
  • https://serverfault.com/questions/622855/nginx-proxy-to-back-end-with-ssl-client-certificate-authentication
  • https://lists.gt.net/apache/users/350827

Without the above I can't easily test my passport setup and can't easily test my custom authentication code until I build for production.

My open questions are:

• Is there any way to customize the webapp's configuration? It appears to me we have to rely on create-react-app to do it for us.
• My understanding from getPeerCertificate() is an empty object when using dev server #1413 is that WDS will also need modifications in order for the webapp to pass cert attributes to the backend. I'll need to raise an issue for that over at WDS. Is this correct?

[craineum]

I also found myself wanting this feature. I am rolling progressive web app features onto a long lived project. I wanted to make sure that the issues I was seeing were not related to the browser ssl trust errors.

I completely get the convention, heuristics, or interactivity over configuration methodology (and appreciate it very much). In the case of SSL, I am already configuring my local to do the HTTPS thing. In my case specifically I have already configured my Rails app to use the certs that I generated, so I am reusing the two variables that I am already using for my Rails app.

I have code that accomplishes this. It basically is the third bullet point from @bitsandbytes original post: Make the webapps' certificate and key configurable.

I am reading in SSL_KEY_PATH and SSL_CERT_PATH from environment variables, and using those to configure the http server as document here on webpack devServer.

I have all the code in react-scripts/config/webpackDevServer.config.js, but it might better to move it to react-dev-utils/WebpackDevServerUtils.js and have a few minor tweaks to react-scripts.

I can do a PR (after a little code cleanup), but didn't know if the maintainers think this breaks the too much configuration rule.

[dbk91]

@craineum looks like your implementation was similar to my approach. The only issue is that https does need to be a boolean because create-react-app ultimately sends that to webpack-dev-server, which expects the type to be a boolean. Please correct me if I'm missing any additional changes you made.

I have the pathnames to the certs in package.json rather than environment variables, though. Not sure if one or the other aligns more with create-react-app's way of convention, heuristics, and interactivity over configuration (which I, too, understand and think makes create-react-app a great tool!).

I initially tried leveraging as much of the proxy object configuration as I could in package.json because, according to the docs: "You may also specify any configuration value http-proxy-middleware or http-proxy supports.". In reality, we're constrained by the fact that this is configured in a JSON file, not in Javascript, so we can't read in things like buffers and functions. So that's where putting in pathnames to the cert and key makes sense. Additionally, if you wanted to send something like the DN to the API, you would need to write a function for that as you would for http-proxy-middleware.

So, really it appears there needs to be a PR for webpack-dev-server to accept the requestCert method before create-react-app could support fetching the client cert (if it aligns with the philosophy).

[craineum]

@dbk91 webpack-dev-server https can take an object as well. I also initially tried the proxy approach and ran into the same issues as you.

[dbk91]

@craineum Ah, I see now. My mistake. I must have been thinking of my original issue with create-react-app where the webpackDevServer config file only can send a boolean instead of either a boolean or an object. https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpackDevServer.config.js#L81

[jamesmfriedman]

I have the same issue, I need to pass a certificate file in to webpackDevServer like so

https: {
  key: path/to/key/file,
  cert: path/to/pem/file
}

[jamesmfriedman]

Ok, this is nuts. I didn't even know this was possible with Node, but I found the hack when digging through the code in react-app-rewired. Monkey patch for the win...

• Modify NPM start to be your own script, put that at the top, and then call then call the react script from inside of it.
• Easier method, install react-app-rewired https://github.com/timarney/react-app-rewired and then put this code at the top of config-overrides.js

if (process.env.NODE_ENV === 'development') {
  const devServerConfigPath = 'react-scripts/config/webpackDevServer.config';
  const devServerConfig = require(devServerConfigPath);
  require.cache[require.resolve(devServerConfigPath)].exports = (
    proxy,
    allowedHost
  ) => {
    const conf = devServerConfig(proxy, allowedHost);
    conf.https = {
      key: fs.readFileSync('./path/to/keyfile.key'),
      cert: fs.readFileSync('./path/to/pemfile.pem')
    };

    return conf;
  };
}

[tobias74]

@jamesmfriedman where exactly do I put this snippet of code?

[jamesmfriedman]

@tobias74 Sorry for the lack of context. A couple of options for you...

• Modify NPM start to be your own script, put that at the top, and then call then call the react script from inside of it
• Easier method, install react-app-rewired https://github.com/timarney/react-app-rewired and then put that at the top of config-overrides.js

[Makr91]

I got the react-app-rewired working, but when I got to add your conf and modify the key and cert names, it fails to start, I am assuming I have them in the wrong directory, can you clarify if these should be inside of the react-scripts/config folder?

The override works without the :

conf.https = { key: fs.readFileSync( path.join(root, 'config', 'quickcrashapp.local.key') ), cert: fs.readFileSync( path.join(root, 'config', 'quickcrashapp.local.pem') ) };

[jamesmfriedman]

@Makr91 root is just a variable for a path, you'll have to define the appropriate path to your file. I'll edit my previous comment to reflect this.

[gaearon]

Does anyone want to submit a PR to support this in some way without monkeypatching?
I haven't seen a specific proposal for how it should work so it's hard to say anything.

[AlexanderHolman146]

@jamesmfriedman That's a great suggestion with React App Rewired. I am using a cert/key from a local CA (which I manually added to my keychain). I have localhost:3000 (react server) running via chrome successfully (green lock :) ). However, when I try to navigate to localhost:5000/auth/googleoauth/signup (starting the oauth flow), I get the following error:

Proxy error: Could not proxy request /api/auth/googleoauth/signup from localhost:3000 to https://localhost:5000 (UNABLE_TO_VERIFY_LEAF_SIGNATURE).

My set up is pretty standard. I am using the same key / cert for the react server as my express / node server, but I assume that's ok because one is proxying the other.

Do you have any ideas of how I can fix this? Did you see this in your travels?