Is it really safe to authenticate JWT token from React frontend?

Question

I am from a traditional HTML, frontend JS, css background so I am a little suspicious of doing token authentication from the frontend.

So when user logs in, JWT will be generated from the backend and be sent to the client. From then on, I would store it in localStorage or sessionStorage to authenticate them 'at frontend' every time user attempts to access private routes. Coming from the traditional 'always client to server communication' I am wondering if this approach is very secure. (although I do know that the decoding of JWT is exactly the same process whether it happens in the backend or the frontend). So are there any additional security breach I should be considering when routing on the frontend as opposed to routing on the backend?

EDIT**

Also, would my secret not be exposed to everyone if I decode on the frontend?

Answer 1

This approach is secure, and secret won't be exposed to everyone. Back end application usually reads the main uid and the access_token.

It is critical to use TLS/SSL in conjunction with JWT, to prevent man-in-the-middle attacks. In most cases, this will be sufficient to encrypt the JWT payload if it contains sensitive information. However, if we want to add an additional layer of protection, we can encrypt the JWT payload itself using the JSON Web Encryption (JWE) specification.

Of course, if we want to avoid the additional overhead of using JWE, another option is to simply keep sensitive information in our database, and use our token for additional API calls to the server whenever we need to access sensitive data.