how avoid 401 error everytime with axios? - reactjs

Question

I have a project with react and an java spring boot api. For connect to the api, after SignIn with google login, i do this :
import axios from 'axios'
import { useNavigate } from 'react-router-dom';
import { signInRoute } from '../../routing';
export function SignInGetService() {
axios.get(process.env.REACT_APP_API_SERVER_URL + '/url', {})
.then(response => { });
}
export async function SignInPostService(token) {
return await axios.post(process.env.REACT_APP_API_SERVER_URL + '/mySignInUrl', { "token": token })
.then(response => {
axios.defaults.headers.common['X-AUTH-TOKEN'] = response.data['data'];
return response.data['data']
}).catch(function(error) {
if(error.response.status == 500){
window.localStorage.removeItem('userFromStorage');
window.location.reload()
}
});
}
in app.tsx my code is :
interface AuthContextType {
user: any;
signin: (userMail: string, callback: VoidFunction, userObject: Object) => void;
signout: (callback: VoidFunction) => void;
}
let AuthContext = React.createContext<AuthContextType>(null!);
function AuthProvider({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState<any>(window.localStorage.getItem('userFromStorage'));
let signin = (newUserMail: string, callback: VoidFunction, newUserObject: Object) => {
return fakeAuthProvider.signin(() => {
setUser(JSON.stringify(newUserMail));
window.localStorage.setItem('userFromStorage', JSON.stringify(newUserMail));
callback();
});
};
let signout = (callback: VoidFunction) => {
return fakeAuthProvider.signout(() => {
setUser(null);
window.localStorage.removeItem('userFromStorage');
callback();
});
};
const value = { user, signin, signout };
const [isLoading, setIsLoading] = useState(true)
if (user != null) {
let r = SignInPostService(JSON.parse(user).token).then(() => {
setIsLoading(false)
})
}
if (user != null && isLoading == false) {
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
if (user == null) {
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
}
export function useAuth() {
return React.useContext(AuthContext);
}
function RequireAuth({ children }: { children: JSX.Element }) {
let auth = useAuth();
let location = useLocation();
if (!auth.user) {
return <Navigate to="/SignIn" state={{ from: location }} replace />;
}
return children;
}
So after this, normally everytime I do a request my X-AUTH-TOKEN is suppose to be well set.
And actually it's work. But sometimes, not often but enough for being annoying, I have an 401 error.
And If I refresh the 401 error disappear.
Do you know where it can come from ?
Thank you all.
I expect that the X-AUTH-TOKEN is set everytime.