I am using a Apollo Client in ReactJS to communicate with GraphQL API. We use Firebase authentication and it's JWT to ensure our API don't expose private data the public but the problem is firebase token expires every one hour or so.
I am currently saving the IdToken localstorage when user login in and use that on the request headers but when token expires graphql returns Non Authorized error. I also tried using customfetch on createHttpLink function from the apollo
const customFetch = async (uri, options) => {
console.log(firebase.auth.currentUser)
if (firebase.auth.currentUser) {
const token = await firebase.auth.currentUser.getIdToken()
localStorage.setItem('token', token)
options.headers.authorization = token;
return fetch(uri, options);
}
else {
firebase.auth.onAuthStateChanged(async (user) => {
if (user) {
console.log('Inside on Auth')
const token = await user.getIdToken()
localStorage.setItem('token', token)
options.headers.authorization = token;
return fetch(uri, options);
}
})
}
console.log('End of Fetch')
};
but fetch completes before firebase.auth.onAuthStateChanged is completed so it also don't work