How to store access token and pass to next api call in javascript fetch

Question

I was just wondering if someone could help me figure this out. My code to get the access token is:

    const inputBody = 'client_id=00000000-0000-0000-0000-000000000001&secret=mySecretPassword';
    const headers = {
      'Content-Type':'application/x-www-form-urlencoded',
    };

    fetch('https://api.replicastudios.com/auth',
    {
      method: 'POST',
      body: inputBody,
      headers: headers
    })
     .then(function(res) {
      return res.json();
    }).then(function(body) {
     console.log(body);
    });

I then need to include the access token received from the first call in order to insert it below.

    const headers = {
    'Authorization':'Bearer {token}'
    };

    fetch('https://api.replicastudios.com/voice',
    {
      method: 'GET',

      headers: headers
        })
    .then(function(res) {
       return res.json();
   }).then(function(body) {
      console.log(body);
    });

What is the best way to save the access token and insert it into the second request?

suggest the proper tag is `fetch-api` – erik258 Sep 14 '21 at 22:40 — erik258, Sep 14 '21 at 22:40
Thank you. I edited the question and corrected the tag. – Daniel Perley Oct 22 '21 at 03:09 — Daniel Perley, Oct 22 '21 at 03:09

score 1 · Answer 1 · answered Sep 14 '21 at 23:09

Please, and one more time, please don't store users security tokens in session storage, local storage, cookies (by yourself, let browser do it securely for you), etc.

Browsers have pretty awesome way of handling those security sensitive stuff, and those ways are preventing session hijacking through XSS and bunch of other stuff.

Proper way of doing things: On the frontend you call your login (or in your case) auth route, and from the backend instead of sending your security token in body you need to set it in the secure cookie. One of the common ways to do it with Node+Express is like this:

 res.status(200)
    .cookie('auth_cookie', token, { httpOnly: true, maxAge: 86400 * 1000, sameSite: 'none', secure: true})
    .json({ success: true, message });

This was one example of it, you should learn what all those arguments do here: https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector/Cookies

And on the last part, you dont need to manually include those cookies with each other request after that, if you are using Axios you can just put { withCredentials: true } and it's gonna automatically include those secured tokens in the cookie part of your request. There is a good thread already on that here: Make Axios send cookies in its requests automatically

I understand that this can seem as much work but it will make web safe(er) and it promotes good practices.

Based on the context of the question, OP doesn't have access to the backend as it's a third party API so he/she is not able to send response cookies — BankBuilder, Sep 16 '21 at 15:51

score -1 · Answer 2 · answered Sep 14 '21 at 22:45

If your code is in a browser which it seems like it is, you could save the access token to session storage for use in future calls. When the tab is closed, session storage will be cleared.

    const inputBody = 'client_id=00000000-0000-0000-0000-000000000001&secret=mySecretPassword';
const headers = {
  'Content-Type':'application/x-www-form-urlencoded',
};

fetch('https://api.replicastudios.com/auth',
{
  method: 'POST',
  body: inputBody,
  headers: headers
})
 .then(function(res) {
  return res.json();
}).then(function(body) {
 console.log(body);
 // NEW CODE
 // body.access_token is my guess, you might have to change this
 // based on the response
 window.sessionStorage.setItem('access_token', body.access_token)
});

Then you can get the access token using:

window.sessionStorage.getItem('access_token')

People, don't do this. This is security disaster waiting to happen. — someRandomSerbianGuy, Sep 14 '21 at 23:10
Thank you all for your answers. I have a better idea of how it should be done correctly. Thank you. — Daniel Perley, Oct 22 '21 at 03:07

How to store access token and pass to next api call in javascript fetch

2 Answers2