Handling Session Expiration

Use the built-in middleware InvalidSessionMiddleWare to detect session expiration, for example, to show a login view to the user.

How to Use the InvalidSessionMiddleWare?

The InvalidSessionMiddleWare requires a OnInvalidSessionCallback as a constructor parameter. The OnInvalidSessionCallback is a function that takes no parameters and should return a promise of LoginResult. LoginResult contains the metadata of a login result, including: - error: indicating if the login attempt has failed or not. - token: in case of success login, it is the CSRF token, which can be extracted from the index.html page. - errorTitle: a short text of the login error. - errorMessage: a more detailed explanation of the login error.

Example using InvalidSessionMiddleWare
import { ConnectClient, InvalidSessionMiddleware } from '@vaadin/flow-frontend';
import { setSessionExpired } from '../auth';
const client = new ConnectClient({
  prefix: 'connect',
  middlewares: [
    new InvalidSessionMiddleware(async () => {
      const { LoginView } = await import('./login-overlay');
      return LoginView.showOverlay();
export default client;