where can I store jwt token in localStorage?

Question

I want to store jwt token in localStorage and I send it back to the server with header in express,I work on Visual Studio and Chrome browser. Just for local storage, I saw these instructions written online to be able to store the token, but I didn't know where I would put it ? where can i store the token in local Storage , in any place ? ,must I write this Instructions in Chrom or Terminal or where ?

 axios.post('http://yourendpoint',data,{ headers: { 
         Authorization:localStorage.getItem('jwtToken') } })
        .then(response=> console.log(response))
        .catch(error => console.log(error));
  };

In short, I want to store the token, but I don't know where and How ?.

score 0 · Answer 1 · answered May 21 '20 at 15:12

Let's imagine that you have an endpoint like '/auth' in order to authenticate users. In that scenario, you could do something like :

 axios.post('http://myapi/auth', data)
     .then(res => localStorage.setItem('jwt', res.data.token))
     .catch(error => console.log(error))

Then, you will have access to that token by using the .getItem() method :

const token = localStorage.getItem('jwt')

If you want to better understand how it works, you should go on the localStorage API documentation.
To go further, you could also learn more about the difference between localStorage, sessionStorage and Cookie.

Kasunaz · Accepted Answer · 2020-05-22T01:04:54.457

0

If you need to store a JWT token manually in chrome browser, local storage. You can follow these steps.

First, go to chrome developer tools (Ctrl+Shift+i)
Then move to the Application tab.
Under Storage, you can find Local Storage section.
Then select your site URL and it will pop up all the currently available local storage objects(make sure to select the correct URL of your website).
then add a new object by adding 'key' and 'token'

If you need to add the token to the local storage by using code you can add it by using the following method.

localStorage.setItem('key','your token');

edited May 22 '20 at 01:04

answered May 21 '20 at 15:35

Kasunaz

573
5
17

thank you, But after the last point I set : key : 'token', value:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Ik5vdXI3NzdHZW9yZ2VAZ21haWwuY29tIiwiaWF0IjoxNTkwMDc5Nzk3LCJleHAiOjE1OTAwODMzOTd9.u8DKeWjMbeSqSzrYzU5SDLev12zP1EtFsSjjjjjlll' What should I choose next to make sure it is stored ? – May 21 '20 at 16:55
@NourGeorge, you can use getItem function of the local storage API and pass the same key that you used while storing. The output of this should be same. Basically, you need to retrieve the token from local storage when you are making an api call and you need to add this token in the authorization header as bearer – Prateek Kumar Dalbehera May 21 '20 at 21:13
@NourGeorge you can simply open the chrome developer tools and go to 'console' tab and then type `localStorage.getItem('key');` it will return your token. so that you can verify your token is correctly stored. (make sure to open the developer tools after moving to corresponding site that you need to store the token.) – Kasunaz May 22 '20 at 01:01

where can I store jwt token in localStorage?

2 Answers2