Resolved: Storing user data using jwt

Question:

I am fetching user data from graphql backend through apollo client. My goal is to keep the user logged in so I signed jwt token with all user data, passed it to localStorage(only the token) decoded it and passed all values to redux-store.

       UserModel:
 userSchema.methods.createJWT = function (payload) {
      return jwt.sign({ ...payload }, process.env.JWT_SECRET, {
        expiresIn: '1d',
      });
    };

userLogin:

      await user.save();
      return {
        ...user._doc,
        id: user._id,
        token: user.createJWT(user._doc),
}

reduxSlice

const userSlice = createSlice({
  name: 'user',
  initialState: {
    userInfo: localStorage.getItem('jwtToken')
      ? jwtDecode(localStorage.getItem('jwtToken'))
      : null,
  },  
  reducers: {
    loginUser: (state, action) => {
      localStorage.setItem('jwtToken', action.payload.token);
      state.userInfo = action.payload;
    },

I am wondering if this is ok that the token is holdin too much info like:

{
  "_id": "62a9ee3878c4979fedb471c5",
  "username": "***",
  "email": "***",
  "password": "$2a$12$hN2lfCtEbqOOFSlHpapyfuxYAHdEGUYKeHY4BMK1YvYOtSG7zHwcS",
  "isAdmin": false,
  "shippingAddress": [],
  "createdAt": "2022-06-15T14:35:36.877Z",
  "updatedAt": "2022-06-16T09:04:59.367Z",
  "__v": 0,
  "firstName": "***",
  "lastName": "***",
  "shoeSize": 4,
  "iat": 1655371413,
  "exp": 1655457813
}

There is another effective way saving user data and keep him logged in ?

Answer:

it’s not recommended (actually very dangerous) to return all information with the jwt token especially password. I think userId is enough! But you can also return username, firstName, lastName, etc. But in some cases even returning email address is not a good approach for some user privacy reasons.
I mean by that you have only to get the userId once there is a user and the credentials are correct, then :

const userToken = {
  userId: user._id,
  username: user.username,
};
 
return {
  user,
  token: user.createJWT(userData)
};

Now after signing the jwt token , you can set whatever data from user inside some redux state or even react context , (choose your favorite) , but DON’T set any password in the localStorage.
Update: at the end you should store the user from the payload like this :

state.userInfo = action.payload.user;

Btw you should check the localStorage only to get the token and verify it , then based on userId you need to fetch the user and store it, here is an example :

useEffect(() => {
getUser(userId);
}, [getUser]);

useEffect(() => {
const jwtToken = localStorage.getItem(‘jwtToken’);
if (jwtToken && jwt_decode(jwtToken)) {
const { exp } = jwt_decode(jwtToken);
const currentTime = Date.now() / 1000;
if (exp < currentTime) { getUserById(userId); } } }, [getUser]);[/code]

If you have better answer, please add a comment about this, thank you!

Resolved: Storing user data using jwt

Resolved: Modify entity using Action in C#

Resolved: How to give rank on datetime column group by another column with userid in it

Resolved: Passing 2 functions in onChange in react

Leave A Reply