Setting defaults for all your SuperAgent requests

SuperAgent is an HTTP request library for both Node.js and client-side JavaScript. It’s our current choice here at CrowdSync for making requests because it’s lightweight and easy to use.

Unfortunately, out of the box, it doesn’t support setting defaults on all of your requests.

The simplest approach would be to use the npm package superagent-defaults which implements basic default setting capabilities:

With superagent-defaults in Node.js it would look something like this:

const defaults = require('superagent-defaults');

const superagent = defaults();

superagent
  .set('X-Custom-Header', 'foobar');

export default superagent;

Now you can require this file wherever you’re using SuperAgent instead of the superagent package itself.

This worked out great for us until we started to implement an authentication check in our client-side code to logout / route users to the login page when their authentication token has expired or is missing.

In that situation, we couldn’t simply set the defaults as they needed to be interrogated periodically for changes. This became very apparent when I created a redirect loop that would immediately log you out as soon as you log in because we I was only setting the authentication header in the SuperAgent defaults on initial page load, not after you properly authenticated.

To get around this, I wrote a script that would utilize superagent-defaults for the static settings, and create a series of wrapper methods that mirrored SuperAgent’s existing interfacing:

const defaults = require('superagent-defaults');

const superagent = defaults();

superagent
  .set('X-Custom-Header', 'foobar');

const request = {
  init: () => (
    superagent.set(
      'Authorization',
      `Bearer ${window.localStorage.getItem('token')}`,
    )
  ),
  delete: url => request.init().delete(url),
  get: url => request.init().get(url),
  post: url => request.init().post(url),
  put: url => request.init().put(url),
};

Not my best work as it has some duplicated code in there, but it gets the job done. Feel free to improve and comment below ;)

To interface with it, you would require that script and then access the new request object as you would access a SuperAgent object:

const request = require('superagent-wrapper');

request
  .get('https://api.crowdsync.com/endpoint')
  .then(
    res => console.log(res),
    err => console.log(err),
  );

Now you have defaults (static and dynamic) set on all of your SuperAgent requests… NEXT ISSUE!