Auth0-spa-js: AbortController is not defined

[alexislucas-toast]

Describe the problem

Hi! I initially raised this issue in @auth0/auth0-react repository (https://github.com/auth0/auth0-react/issues/173), but for visibility, and because this is the actual package having the issue, I post this issue here as well.

On Firefox 52 (and probably other browsers versions that doesn't support AbortController API), the getAccessTokenSilently method will throw this error. It seems like this API is used in @auth0/auth0-spa-js, and there is a Polyfill for this API, but it isn't working. And it's probably the case for any browser version that doesn't support natively this API (https://developer.mozilla.org/en-US/docs/Web/API/AbortController).

Here is the stack trace I have when catching errors from the getAccessTokenSilently:

10:34:13.434 Error: AbortController is not defined
Stack trace:
OAuthError@http://localhost:3000/static/js/0.chunk.js:3816:17
["../../node_modules/@auth0/auth0-react/dist/auth0-react.esm.js"]/</normalizeErrorFn/<@http://localhost:3000/static/js/0.chunk.js:3841:14
["../../node_modules/@auth0/auth0-react/dist/auth0-react.esm.js"]/</Auth0Provider/getAccessTokenSilently</</<@http://localhost:3000/static/js/0.chunk.js:4127:19
step@http://localhost:3000/static/js/0.chunk.js:210:12
verb/<@http://localhost:3000/static/js/0.chunk.js:141:14
rejected@http://localhost:3000/static/js/0.chunk.js:103:14
 1 0.chunk.js:83125:18
    ["../../node_modules/react-error-overlay/lib/index.js"]/</</</g/console[e] http://localhost:3000/static/js/0.chunk.js:83125:18
    ExportAuth/</< http://localhost:3000/static/js/main.chunk.js:3009:7

What was the expected behavior?

The getAccessTokenSilently should not fail because of AbortController API being undefined on browsers versions that don't support this API natively.

Reproduction

I'm working on a Private instance in Auth0, so I can't share client id, etc. And it seems that I can't make the examples working locally, but the private repository I'm working on is very simple, so I think you should be able to reproduce it by setting up the example and running it on Firefox 52.

Environment

• Version of auth0-spa-js used: 1.13.5, used by @auth0/[email protected]
• Which browsers have you tested in? Firefox 52, Chromium 65, Safari 11
• Which framework are you using, if applicable (Angular, React, etc): React 16.13.1
• Other modules/plugins/libraries that might be involved:

[frederikprijck]

To reply to your comment over at https://github.com/auth0/auth0-react/issues/173

The thing is that the library is using a polyfill internally, which should fix the issue for older browsers, but it is not. That's what I wanted to raise here.

We use RefreshTokens from inside a web worker where web workers are supported. However, polyfills do not work unless explicitly imported in the web worker. The latter increased the bundle size drastically, which was reverted as part of https://github.com/auth0/auth0-spa-js/pull/612/files.

That said, let me open up a conversation to see how we want to handle older browsers.

[alexislucas-toast]

Hi! Thank you for providing a fix for this issue!
Do you have an rough idea on when this fix will be released for @auth0/auth0-spa-js and @auth0/auth0-react?

[stevehobbsdev]

Hopefully before the end of the week for SPA SDK, just waiting on a few PRs being merged. React I imagine will follow shortly after, although the semver should just install the latest the next time you do npm install after this SDK is published, so you might not have to wait for that.