LogoutManager

Logs out based on fetch responses. By default this is triggered by 401 (Unauthorized) status responses.

implements

LogoutManager implements Manager

Usage

React Web 16+

/index.tsx

import { CacheProvider, LogoutManager, getDefaultManagers } from '@data-client/react';
import ReactDOM from 'react-dom';

const managers = [new LogoutManager(), ...getDefaultManagers()];

ReactDOM.render(
  <CacheProvider managers={managers}>
    <App />
  </CacheProvider>,
  document.body,
);

React Web 18+

/index.tsx

import { CacheProvider, LogoutManager, getDefaultManagers } from '@data-client/react';
import ReactDOM from 'react-dom';

const managers = [new LogoutManager(), ...getDefaultManagers()];

ReactDOM.createRoot(document.body).render(
  <CacheProvider managers={managers}>
    <App />
  </CacheProvider>,
);

React Native

/index.tsx

import { CacheProvider, LogoutManager, getDefaultManagers } from '@data-client/react';
import { AppRegistry } from 'react-native';

const managers = [new LogoutManager(), ...getDefaultManagers()];

const Root = () => (
  <CacheProvider managers={managers}>
    <App />
  </CacheProvider>
);
AppRegistry.registerComponent('MyApp', () => Root);

NextJS

pages/_app.tsx

import { CacheProvider, LogoutManager, getDefaultManagers } from '@data-client/react';
import { AppCacheProvider } from '@data-client/ssr/nextjs';
import type { AppProps } from 'next/app';

const managers = [new LogoutManager(), ...getDefaultManagers()];

export default function App({ Component, pageProps }: AppProps) {
  return (
    <AppCacheProvider managers={managers}>
      <Component {...pageProps} />
    </AppCacheProvider>
  );
}

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;
}

Github Example

More Demos