Home > Enterprise >  how can i get the user_id from jwt in the localstorage and use it in react?
how can i get the user_id from jwt in the localstorage and use it in react?

Time:01-29

I am writing a logic to create a post and i want to add the logged in user as the user making the post, i have saved the refresh token in my browser localstorage, when i copy the refresh token and paste in jwt.io, i get this response

{
  "token_type": "refresh",
  "exp": 1679234275085,
  "iat": 1674953425085,
  "jti": "d723e65f9bdctret41399e5d09278ef1fcbc",
  "user_id": 1,
  "username": "destiny",
  "email": "[email protected]"
}

now how do i grab the user_id and use it in react, this is where i want to use it

const formData = new FormData()

formData.append("user", 1)

Instead of hardcoding the user_id as 1 or 2, i want to pass it in dynamically, how can i do this?

CodePudding user response:

You can use jwt-decode library.

  1. Install the jwt-decode library by running npm install jwt-decode in your project's root directory.

  2. Import the library in your component or file where you want to use it:

    import jwtDecode from 'jwt-decode';
    
  3. Retrieve the JWT token from local storage:

    const token = localStorage.getItem('refresh_token');
    
  4. Decode the token and extract the user_id:

    const decoded = jwtDecode(token);
    const user_id = decoded.user_id;
    
  5. Append the user_id to the form data:

    formData.append("user", user_id)
    
  6. Send the form data to your server to create the post.

Note:

  • You should always validate the token and check the expiration date before using it.
  • It's also important to check that the token exists in the local storage before using it, and handle the case where the token is not found.
  • Related