Axios Instance Bearer token not updated after login without reloading - React

When I try to login to my react app it returns as success and saves it in sessionStorage but when I try to access the page which requires Bearer token to fetch data via axios it returns http 401 error.

But when I reload the page, then the result is as required.

import axios from "axios";

let token = JSON.parse(window.sessionStorage.getItem("token"));

let AxiosInstance= axios.create({
  baseURL: "https://myurl.com/backend/api/",
  timeout: 5000,
  headers: { Authorization: "Bearer " + token },
});

export default AxiosInstance;

I'll guess it is because you're creating the axios instance outside any of React's lifecycle

when you run your app and enter your login screen, it makes a Axios instance

import axios from "axios";

let token = JSON.parse(window.sessionStorage.getItem("token"));

let AxiosInstance = axios.create({
  baseURL: "https://myurl.com/backend/api/",
  timeout: 5000,
  headers: { Authorization: "Bearer " + token }, // on the first go token is null
});

export default AxiosInstance;

After you login, your axios instance still has a nulll token, you see, this code is executed once and never more, that's why when you refresh the page, it works, because when this piece of code is executed once again, there's a token in localstorage.

There's a couple things you can do but the easiest i guess it's to use Axios interceptors

  AxiosInstace.interceptors.request.use(function (config) {
    const token = localStorage.getItem('token');
    config.headers.Authorization =  token ? `Bearer ${token}` : '';
    return config;
  });

That way every time you do a request your headers will be updated (not sure if this is the best approach but it works)

Your token is being initialized onload so you have to call token in config.headers["Authorization"] on every request through interceptor so you don't need to reload page.

Interceptor:
Axios interceptors are functions that are called before a request is sent and after a response is received

import axios from "axios";

let AxiosInstance = axios.create({
  baseURL: "https://myurl.com/backend/api/",
  timeout: 5000,
});

AxiosInstance.interceptors.request.use(function (config) {
  let token = JSON.parse(window.sessionStorage.getItem("sessionData"));
  config.headers["Authorization"] = "Bearer " + token;
  return config;
});

export default AxiosInstance;

UPDATE: You can learn more here about Axios interceptors