I was a bit frustrated with the existing offerings for OAuth2 clients in Javascript. I heavily use the Fetch API directly, but Web API’s haven’t really caught up to have deep integration with OAuth2.

We were using client-oauth2, but the minified size of this library was close to 40kb which ended up being a majority of the size of our total Javascript code.

I realized what I really wanted was an OAuth2 client that acts as a middleware-style layer for Fetch, making OAuth2 refreshes transparent, and is a lot lighter in weight.

It only took 2 days to write a replacement that is good enough for my use-case, and I made it open source. It’s currently 3692 bytes minified, is written for typescript and has 0 dependencies.

Find it on Github. The library handles the ‘token’ part of OAuth2 flow, including:

• authorization_code, password and client_credentials grant types.
• It keeps an eye on access token expiry, and will automatically call refresh_token if they expired.
• It exposes a simple hook that gets called when tokens get updated, allowing you to store the new tokens somewhere else (like LocalStorage).

It doesn’t however handle the ‘authorization’ part of OAuth2. Which means that if you use the implicit or authorization_code flow, you are responsible for redirecting the user, and when the user returns setting up the OAuth2 with the right code or accessToken value.

Example

If you’re using the password grant type:

const OAuth2 = require('fetch-mw-oauth2');

const oauth2 = new OAuth2({
  grantType: 'password',
  clientId: '...',
  clientSecret: '...',
  userName: '...',
  password: '...',
  tokenEndPoint: 'https://auth.example.org/token',
});

After this setup is complete, and now you can use the fetch functon on the oauth2 object, instead of the global one. It takes exactly the same parameters, as it just forwards the function with the correct Authorization header:

const result = await oauth2.fetch('https://api.example.org/article', {
   method: 'POST',
   body: '...',
 });

I hope this is useful to anyone else. Take a look at the project for more info!