Log out whenever api and keystore are not both logged in

src/context/SessionContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useCallback, useContext, useEffect } from 'react';
 
 import StatusContext from './StatusContext';
 import { BackendApi, useApi } from '../api';
@@ -25,12 +25,15 @@ export const SessionContextProvider = ({ children }) => {
 	const api = useApi(isOnline);
 	const keystore = useLocalStorageKeystore();
 
-	const logout = async () => {
-		// Clear URL parameters
-		sessionStorage.setItem('freshLogin', 'true');
-		api.clearSession();
-		await keystore.close();
-	};
+	const logout = useCallback(
+		async () => {
+			// Clear URL parameters
+			sessionStorage.setItem('freshLogin', 'true');
+			api.clearSession();
+			await keystore.close();
+		},
+		[api, keystore],
+	);
 
 	const value: SessionContextValue = {
 		api,
@@ -39,6 +42,16 @@ export const SessionContextProvider = ({ children }) => {
 		logout,
 	};
 
+	useEffect(
+		() => {
+			if (api.isLoggedIn() !== keystore.isOpen()) {
+				// This might happen if the keystore closes itself due to user inactivity, for example.
+				logout();
+			}
+		},
+		[api, keystore, logout],
+	);
+
 	return (
 		<SessionContext.Provider value={value}>
 			{children}