sessionStorage not available immediately after navigate

Question

I am trying to implement an React solution with Strapi as backend where authorization is done using JWT-keys. My login form is implemented using the function below:

const handleLogin = async (e) => {
        let responsekey = null
        e.preventDefault();

        const data = {
            identifier: LoginState.username,
            password: LoginState.password
        }

        await http.post(`auth/local`, data).then((response) => {
            setAuth({
                userid: response.data.user.id,
                loggedin: true
            })
            responsekey = response.data.jwt
            setLoginState({...LoginState, success: true});
            sessionStorage.setItem('product-authkey', responsekey);
            navigate('/profile');
          }).catch(function(error) {
            let result = ErrorHandlerAPI(error);
            setLoginState({...LoginState, errormessage: result, erroroccurred: true});
          });
    }

The API-handler should return an Axios item which can be used to query the API. That function is also shown below. If no API-key is present it should return an Axios object without one as for some functionality in the site no JWT-key is necessary.

const GetAPI = () => {
    let result = null

    console.log(sessionStorage.getItem("product-authkey"))
   
    if (sessionStorage.getItem("product-authkey") === null) {
        result = axios.create(
            {
                baseURL: localurl,
                headers: {
                    'Content-type': 'application/json'
                }
            }
        )
    } else {
        result = axios.create({
            baseURL: localurl,
                headers: {
                    'Content-type': 'application/json',
                    'Authorization': `Bearer ${sessionStorage.getItem("product-authkey")}`
            }
        })
    }

    return result
}

export default GetAPI()

However, once the user is redirected to the profile page (on which an API-call is made which needs an JWT-key), the request fails as there is no key present in the sessionStorage. The console.log also shows 'null'. If I look at the DevTools I do see that the key is there... And if I refresh the profile page the request goes through with the key, so the key and backend are working as they should.

I tried making the GetAPI function to be synchronous and to move the navigate command out of the await part in the handleLogin function, but that didn't help.

Does someone have an idea?

Thanks

Sincerely, Jelle

UPDATE:

Seems to work now, but I need to introduce the getAPI in the useEffect hook, I am not sure if that is a good pattern. This is the code of the profile page:

useEffect(() => {
    let testapi = GetAPI()
    const getMatches = async () => {
      const response = await testapi.get(`/profile/${auth.userid}`)
      const rawdata = response.data.data
      ... etc
    }, [setMatchState]

Answer 1

export default GetAPI() this is the problematic line. You are running the GetApi function when the module loads. Basically you only get the token when you visit the site and the js files are loaded. Then you keep working with null. When you reload the page it can load the token from the session storage.

The solution is to export the function and call it when you need to make an api call.