5

TL:DR: replace jsonwebtoken with jwt-decode

I have had some trouble with upgrading my existing react app to the latest version. Every time I do I get the following errors

Can't resolve 'buffer' in '/home/user/projects/trash/tokentest/test/node_modules/buffer-equal-constant-time'

Can't resolve 'stream' in '/home/user/projects/trash/tokentest/test/node_modules/buffer-equal-constant-time'

Can't resolve 'util' in '/home/user/projects/trash/tokentest/test/node_modules/buffer-equal-constant-time'

Can't resolve 'crypto' in '/home/user/projects/trash/tokentest/test/node_modules/buffer-equal-constant-time'

I can get rid of all these except crypto by installing the buffer stream and util packages.
I tried installing crypto, crypto-browserify and crypto-js.

I did figure out I could make it work by removing jsonwebtoken from the project. But its not fully functional anymore after that, since its needed for user authentication.

For testing I created a completely fresh create-react-app project. It works out of the box. But as soon as I install and import jsonwebtoken, I get the exact same errors again. Meaning even on a completely clean project, jsonwebtoken cannot be used.

Is there a way to fix this? Because I would like to upgrade my project and use jsonwebtoken.

user2741831
  • 2,120
  • 2
  • 22
  • 43
  • Are you talking about this package? www.npmjs.com/package/jsonwebtoken It is a package for node js. What is your use for it in a react app? Are you signing and verifying tokens in react? – SamiElk Jan 25 '22 at 21:51
  • yes that is the package, I just use it to decode the tokens from the server – user2741831 Jan 25 '22 at 22:38

3 Answers3

12

jsonwebtoken is a Node.js module, your previous use of it in a react application relied upon a polyfill of the Node.js std modules. This most likely a) relied on slow js cryptography that isn't maintained anymore and lacks feature parity with Node's crypto and b) increased your js bundle size considerably. Updating react likely meant updating webpack which no longer defaults to using the questionable crypto polyfill.

It is better to rely on modules made for either browsers or "universal", you can discover such modules amongst the ones listed on jwt.io under "JavaScript". Out of the ones listed there, jose uses purely available Web APIs.

  • 1
    thanks, although I did use jwt-decode instead, since jose seams to be unable to decode jwt tokens and jwt-decode doesn't have the same issue as jsonwebtoken – user2741831 Jan 26 '22 at 10:14
  • 1
    Then you must be aware that merely decoding a token without first verifying its signature (what jose does) is not advised under most circumstances. `jose` intentionally leaves this functionality out since it's prone to be misused and it's also as simple as calling `JSON.parse(new TextDecoder().decode(jose.base64url.decode(jwt.split('.')[1])))` on your own. –  Jan 26 '22 at 13:24
  • I just use it on the frontend to figure out the id of the user that just logged in so I can fetch his information from the API. Basically after logging you get your jwt from the server which contains your user id. You still use it to verify your requests like normally and its obviously always properly verified on the backend – user2741831 Jan 26 '22 at 13:49
  • Sure, whatever. But what's the point of requiring a user id in the APIs in the first place given the API can pluck it out of the token after it's verified... nevertheless, glad i could help. –  Jan 26 '22 at 13:55
0

Yes. Latest React Version is not supporting jsonwebtoken library. Use react-jwt library in react side to decode token

Library Link: https://www.npmjs.com/package/react-jwt

Smack Alpha
  • 1,828
  • 1
  • 17
  • 37
0

jsonwebtoken is a Node.js module, its previous use in a React application was based on a polyfill of standard Node.js modules. Most likely a) you are relying on slow js crypto that is no longer maintained and has no feature parity with Node's crypto and b) you have significantly increased your js package size. A React update could be a webpack update, which no longer uses the dubious encryption polyfill by default.

use jose instead of jsonwebtocken https://jwt.io/libraries?language=Node.js

Gimhana
  • 1