Adding a bearer token to a webpack proxy

I was testing a React web application locally the other day. It relies on an OAuth OpenID Connect reverse proxy for authentication but I didn’t want to have to go through the hassle of launching a local version of the API and then configuring it to the identity provider just so I could get some frontend changes in.

I figured that I could simply provide an existing JWE JWT bearer token that I had obtained from a lower environment. To my relief, it turns out the Webpack proxy allows for an HTTP header to be passed along to the back-end API requests quite easily.

In your devServer block where you have your proxy configuration for your target URLs defined, you can actually add in headers containing your bearer token like so:

module.exports = {
  //...
  devServer: {
    proxy: {
      '/some/api': {
        target: "http://127.0.0.1:8080/",
        secure: false,
        headers: {
          authorization: 'Bearer abc123XYZabc123XYZasdfghjklo'
        },
      },
    },
  },
};

Now the API requests to your backend server will be authenticated and you can keep on testing locally!