How can I hide the userid of a user from the session storage while inspecting?

Question

While storing data in sessionStorage for a react app, I can't hide the user's userid in the browser. How can I do it?

Answer 1

Nothing can be hidden in the browser, regardless of where/how it's stored. The moment something is sent over the wire to/from the client, it is visible clientside.

Consider using something like JWT tokens and a backend server for authentication (alternatively, you can use Firebase, Auth0, or Supabase auth if you don't want to stand up your own server).

With JWT tokens (or essentially, having some form of "access token" for your user's session), you would send these tokens with every API request to the API. The API would then be able to validate these tokens using "secrets" (i.e. encryption related values that only your server knows about to help with decoding and validating these tokens, so no client will ever see it) and confirm your user's session.

Answer 2

You can't hide any data which is sent to the client. In the browser nothing can be hidden.

What you can do is use the JWT token to store the userid in the JWT payload. Whenever any request is made, to the BE you can check if the token is valid or not and if it is valid then you can decode the token and get the user id and use that for further processing.

NOTE: It's a good approach not to send the user id in the request, get from the Auth token.