React Log out all Pages using Context and Axios interceptors - reactjs

Question

I am outside a React component but need to update my auth context 'AuthContext' to delete the existing user to log the user out entirely from all logged in pages
I'm able to dispatch a redux action using Redux. How can I achieve the same using Context?
Below are my code... the logOutAll function is not working because useContext can't be used outside of a React component or function
Appreciate advise from those who have successfully implemented this. Thanks
import { useContext } from "react"
import axios from "axios"
import { AuthContext } from "../context/authContext"
const api = axios.create({
baseURL: "http://localhost:5000/api",
headers: {
"Content-Type": "application/json",
},
})
/**
intercept any error responses from the api
and check if the token is no longer valid.
ie. Token has expired or user is no longer
authenticated.
logout the user if the token has expired
**/
// const logOutAll = () => {
// const { authStatus, setAuthStatus } = useContext(AuthContext)
// console.log(authStatus)
// setAuthStatus({
// ...authStatus,
// isAuthenticated: false,
// isLoading: false,
// user: null,
// })
// }
api.interceptors.response.use(
res => res,
err => {
if (err.response.status === 401) {
console.log("log out all")
logOutAll() //! CANNOT WORK BECAUSE UseContext cannot be called outside React function
or component
}
return Promise.reject(err)
}
)
export default api

Answer 1

I set up my axios interceptors in my app.js file instead and it seems to be working fine
const App = () => {
const { authStatus, setAuthStatus } = useContext(AuthContext)
useEffect(() => {
const checkLoggedIn = async () => {
let token = localStorage.getItem("#token")
if (token === null) {
localStorage.setItem("#token", "")
token = ""
}
const res = await api.get("/users/me", {
headers: {
authorization: token,
},
})
//TODO
// const token = localStorage.getItem("#token")
// console.log("TOKEN", token)
// if (token) {
// setAuthToken(token)
// }
// const res = await api.get("http://localhost:5000/api/users/me")
console.log(res)
setAuthStatus(authStatus => ({
...authStatus,
isAuthenticated: true,
isLoading: false,
user: res.data,
}))
}
checkLoggedIn()
}, [setAuthStatus])
api.interceptors.response.use(
res => res,
err => {
if (err.response.status === 401) {
setAuthStatus({
...authStatus,
isAuthenticated: false,
isLoading: false,
user: null,
})
}
return Promise.reject(err)
}
)