LogoutManager
Logs out based on fetch responses. By default this is triggered by 401 (Unauthorized) status responses.
implements
LogoutManager implements Manager
Usage
- Web
- React Native
- NextJS
- Expo
/index.tsx
import {
DataProvider,
LogoutManager,
getDefaultManagers,
} from '@data-client/react';
import ReactDOM from 'react-dom';
const managers = [new LogoutManager(), ...getDefaultManagers()];
ReactDOM.createRoot(document.body).render(
<DataProvider managers={managers}>
<App />
</DataProvider>,
);
/index.tsx
import {
DataProvider,
LogoutManager,
getDefaultManagers,
} from '@data-client/react';
import { AppRegistry } from 'react-native';
const managers = [new LogoutManager(), ...getDefaultManagers()];
const Root = () => (
<DataProvider managers={managers}>
<App />
</DataProvider>
);
AppRegistry.registerComponent('MyApp', () => Root);
app/Provider.tsx
'use client';
import { LogoutManager, getDefaultManagers } from '@data-client/react';
import { DataProvider } from '@data-client/react/nextjs';
const managers = [new LogoutManager(), ...getDefaultManagers()];
export default function Provider({
children,
}: {
children: React.ReactNode;
}) {
return <DataProvider managers={managers}>{children}</DataProvider>;
}
app/_layout.tsx
import Provider from './Provider';
export default function RootLayout({ children }) {
return (
<html>
<body>
<Provider>{children}</Provider>
</body>
</html>
);
}
app/Provider.tsx
import {
LogoutManager,
getDefaultManagers,
DataProvider,
} from '@data-client/react';
import {
DarkTheme,
DefaultTheme,
ThemeProvider,
} from '@react-navigation/native';
import { useColorScheme } from '@/hooks/useColorScheme';
const managers = [new LogoutManager(), ...getDefaultManagers()];
export default function Provider({
children,
}: {
children: React.ReactNode;
}) {
const colorScheme = useColorScheme();
return (
<ThemeProvider
value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}
>
<DataProvider managers={managers}>{children}</DataProvider>
</ThemeProvider>
);
}
app/_layout.tsx
import { Stack } from 'expo-router';
import 'react-native-reanimated';
import Provider from './Provider';
export default function RootLayout() {
return (
<Provider>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="+not-found" />
</Stack>
</Provider>
);
}
Custom logout handler
import { unAuth } from '../authentication';
const managers = [
new LogoutManager({
handleLogout(controller) {
// call custom unAuth function we defined
unAuth();
// still reset the store
controller.resetEntireStore();
},
}),
...getDefaultManagers(),
];
tip
Use controller.invalidateAll to only clear part of the cache.
import { unAuth } from '../authentication';
const testKey = (key: string) => key.startsWith(`GET ${myDomain}`);
const managers = [
new LogoutManager({
handleLogout(controller) {
// call custom unAuth function we defined
unAuth();
// still reset the store
controller.invalidateAll({ testKey });
},
}),
...getDefaultManagers(),
];
Members
handleLogout(controller)
By default simply calls controller.resetEntireStore()
This should be sufficient if login state is determined by a user entity existance in the Reactive Data Client store. However, you can override this method via inheritance if more should be done.
shouldLogout(error)
protected shouldLogout(error: UnknownError) {
// 401 indicates reauthorization is needed
return error.status === 401;
}