v4.0.0 React Native support - property atob doesn't exist

[hrastnik]

Checklist

• I have looked into the Readme and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

React Native doesn't provide implementations for atob and btoa so the library fails when we attempt to use version 4.0.0.

Reproduction

Install a fresh react-native project with jwt-decode and try using it.

Additional context

No response

jwt-decode version

4.0.0

Which browsers have you tested in?

Other

[jonkoops]

We removed the atob() polyfill under #162, as this is a widely supported function in browsers and Node.js. I don't think we'd want to add back a polyfill and bloat the library just for React Native. Have you tried poly-filling this function using something like core-js?

For example:

import "core-js/stable/atob";
import { jwtDecode } from "jwt-decode";

const token = "eyJ0eXAiO.../// jwt token";
const decoded = jwtDecode(token);

console.log(decoded);

[hrastnik]

I could polyfill this function, however I think react-native has got a lot of users, and it would be nice if this library provided a way to work without it. Besides, atob is a browser API and not a JS API, and by providing a userland implementation this library would remove the browser dependency.

However, I understand your stance on the matter, and respect your decision.

[frederikprijck]

Thanks for reaching out. jwt-decode had always been a browser-focussed library, which happened to work on node or other platforms as well because of the atob polyfill.

This is also called out in the repository's description:

Decode JWT tokens; useful for browser applications.

However, as atob is supported in node, we also explicitly support node without a polyfill now.

As of v4, any platform that has no access to atob, should rely on their own polyfill such as core-js as mentioned by @jonkoops.

The reason we no longer ship an atob polyfill is because the majority has support for atob (see browser support and node support), and those that do not can use a polyfill. We believe we do not want to ship the polyfill to all our users, knowing that the majority has no need for this in the first place.

So long story short, nothing should prevent you from using this library in react-native, but you will need to bring in your own atob polyfill.

Feel free to reach out if using the core-js polyfill wouldn't work, but closing this for now.

[jonkoops]

Besides, atob is a browser API and not a JS API, and by providing a userland implementation this library would remove the browser dependency.

It might not be part of the ECMAScript specification, but it is also widely supported by most other JavaScript run-times (e.g. Node.js, Bun and Deno). However, if there are many React Native users that need it this is something we might have to reconsider adding back in.

Personally, I think it might not be worth it to add back a polyfill for this. But we should perhaps update the README with instructions specifically for React Native users to include a polyfill to help them out.

I've also logged an issue with the Hermes runtime that is used by React Native to evaluate support (see facebook/hermes#1178). I would recommend that you chime in there and let your voice be heard.

[jonkoops]

Good news, the Hermes team has decided to implement this functionality, so polyfilling these APIs should no longer be needed in the future for React Native (see facebook/hermes#1178 (comment)).

[jonkoops]

Thanks to the fast work from the Hermes team support for these functions has landed, and should ship in the latest version of Hermes that will be released soon (likely 0.74).

[iusama46]

Downgrade jwt-decode to 3.1.2

[frederikprijck]

@iusama46 , there is no need to downgrade to v3. Instead add the polyfill as mentioned in the readme.

However, once the Hermes team has released the changes for atob, you should no longer need the polyfill.

[ShepSims]

For anyone looking for HOW to polyfill

first do
yarn add base-64

then at the top of your index.js add these lines

import { decode } from 'base-64';
global.atob = decode;