jwt-decode | Decode JWT tokens ; useful for browser applications | Authentication library

Its because you are using useContext() hook inside getProtectedAsset() function. Instead of using useContext inside getProtectedAsset try to pass user as parameter like url to the function.

I managed to do the following solution:

I don't want it in plain text, So I was thinking I would create a JWT Token and send it in response and decode it in frontend using the secret key.

A JWT token is usually plain-text. There are two types of JWTs - JWS (signed JWTs) and JWE (encrypted JWTs). The latter has the content encrypted, so no one can read it unless they have the key for decryption. Encryption is hard to configure and manage, though, so JWEs are not used very often. You need a really strong reason to be using JWEs. Signed JWTs (JWS) are more common. In fact, when people use the term JWT, they usually mean JWS. A signed JWT is integrity-protected. Using the signature you can verify that the JWT hasn't been changed by an attacker, but they are plain-text. Anyone can read the content of the JWT, they just can't modify it.

Also remember that an Angular app has all of its code available to users, which means it can't hold any secrets. If you put a secret in your Angular app, then anyone will be able to read that secret and use it to decrypt your JWEs, or forge new JWSs, if you're using symmetric signing (e.g. the HS256 algorithm).

I achieved the decoding part using jwt-decode without the secret. My concern is, if an attacker intercepts my response and modifies the token, How do I tackle that situation?

If you're concerned about a Man-in-the-middle attack, so that someone will modify the response from your server, then all you need is an HTTPS connection. If you connect to your API using HTTPS, then you're sure that no one modified the response, nor read it.

If you're concerned that your response will get modified after HTTPS is terminated (e.g. a malicious code running in the browser), then you can use JWS to ensure the integrity of the response. You just have to remember to use asymmetric signing, so that the Angular app only keeps the public key.

I don't know which library for JWTs are you using in Angular, but I think all of them are capable of verifying signatures, so that shouldn't be a problem.

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.

I just solve this issue by correcting the RxJS version to 7.4.0. I hope this can solve others issue as well.

I had the exact same issue and stumbled upon this while searching for solutions. After some digging, it turns out you have to change all of the plugin permission values to strings.

Node version could be a problem. That windows-build-tools is required for the installation indicates there's binary dependency that is potentially incompatible with current Node version. Binary NPM dependencies usually provide a subset of precompiled binaries for a specific package version, where a combination of platform and Node.js version that can be considered safe or supported. For any other combination, binary package needs to be compiled for current platform with build tools. This doesn't always mean that the package is incompatible but this is common.

For example, node-sass (doesn't seem to be used here) has different versions that correspond to specific Node.js versions and provides precompiled binaries for a supported subset; for unsupported Node.js version it falls back to compilation during installation process and most likely fails.

It's unknown which dependency causes this problem in this case, this needs to be reviewed in npm/yarn logs.

In order to avoid this situation, Node version could be matched with old one. Project dependencies need to be freshly installed because node_modules in use has been already tied to currently used Node version.

If you keep handleLogout external to the useEffect hook it should be listed as a dependency as it is referenced within the hook's callback.

If i put handleLogout to useEffect dependencies warning doesn't change.

I doubt the warning is the same. At this point I would expect to you to see the warning change to something like "the dependency handleLogout is redeclared each render cycle, either move it into the useEffect hook or memoize with useCallback..." something to that effect.

From here you've the 2 options.

1. Move handleLogout into the useEffect so it is no longer an external dependency.

Solved! After 2 hours, we finally found the culprit: a Hubspot (CRM) script imported in index.html ... (apparently it broke the HTML structure)

We removed the