Reset context from helper service - reactjs

Question

I have created a service class that I use to handle authentication in my React app. Data about the current logged in user is stored in the user context. When a user clicks the logout button, logout() is called in the authencation service. The user context can then be reset in the same click event with this.context.updateUser().
But, there are times where a user needs to be logged out even if they didn't click the logout button, for example if their session is invalid. In this case forceLogout() would be called from inside the authentication service. However, because this does not occur within a component this leaves me with no way to reset the user context. The current code gives the error: Error: Invalid hook call. Hooks can only be called inside of the body of a function component..
How can I reset the user context from inside forceLogout()?
// user.context.js
import React, { createContext, Component } from 'react';
import AuthService from '../services/auth.service';
export const UserContext = createContext();
class Context extends Component {
state = {
user: AuthService.getCurrentUser(),
updateUser: (user) => {
this.setState({ user });
}
};
render() {
return (
<UserContext.Provider value={this.state}>
{this.props.children}
</UserContext.Provider>
);
}
}
export default Context;
// auth.service.js
import { useContext } from 'react';
import { UserContext } from '../contexts/user.context';
import history from '../history';
Class AuthService {
getCurrentUser() {
return JSON.parse(localStorage.getItem('user'));
}
logout() {
localStorage.removeItem('user');
}
forceLogout() {
const userContext = useContext(UserContext);
localStorage.removeItem('user');
userContext.updateUser();
history.push('/');
}
...
}

Answer 1

Create a Logout component that will be common for all types of logout, and apply your logout logic inside componentDidMount or useEffect of the Logout component, since it is a component you can use hooks here, and whenever you want to logout just redirect to the Logout component and if you want to redirect back to the homepage after logout do this inside Logout component.

Answer 2

You can use custom events:
Class AuthService {
// ...
forceLogout() {
localStorage.removeItem('user');
// Dispatch logout event.
const event = new Event('force-logout');
window.dispatchEvent(event);
}
}
Then inside a component under UserContext.Provider :
const SomeComponent = () => {
const userContext = useContext(UserContext);
useEffect(() => {
const handleLogout = () => {
userContext.updateUser();
history.push('/');
};
window.addEventListener('force-logout', handleLogout);
return () => window.removeEventListener('force-logout', handleLogout);
}, [userContext, history]);
// ...
}