Handling Session Expiration

How to detect session expiration, for example to show a login view to the user.

Example

You can use the built-in middleware InvalidSessionMiddleWare to detect when a user session expires.

This middleware requires a function as a constructor parameter (type of OnInvalidSessionCallback). The function should return a promise of LoginResult, containing the metadata of a login result, including:

error: Indicates whether the login attempt has failed.
token: In the event of a successful login, this is the cross-site request forgery (CSRF) prevention token, which can be extracted from the index.html page. See CSRF protection of Hilla endpoints for more information.
errorTitle: A short text describing a login error.
errorMessage: A more detailed explanation of the login error.

Example

As an example, you can use the InvalidSessionMiddleware to show a login view to the user.

Configure the ConnectClient with the middleware, and let the callback open a login overlay:

Source code

frontend/connect-client.ts
import { ConnectClient, InvalidSessionMiddleware } from '@vaadin/hilla-frontend';

const client = new ConnectClient({
  prefix: 'connect',
  middlewares: [
    new InvalidSessionMiddleware(async () => {
      const { promptLogin } = await import('./SessionExpiredLoginOverlay');
      return promptLogin();
    }),
  ],
});

export default client;

The overlay reuses the login function from the useAuth hook, and resolves the promise the middleware is waiting on once the user has signed in again:

Source code

frontend/auth/SessionExpiredLoginOverlay.tsx
import React from 'react';
import type { LoginResult } from '@vaadin/hilla-frontend';
import { signal, useSignal } from '@vaadin/hilla-react-signals';
import { LoginOverlay } from '@vaadin/react-components/LoginOverlay.js';
import { useAuth } from '../auth';

const sessionExpired = signal(false);
const waiting: Array<(result: LoginResult) => void> = [];

// Called by the InvalidSessionMiddleware once per request that ran into the
// expired session. Opens the overlay, and resolves every waiting caller once
// the user has signed in again, so that all of those calls can be retried.
export async function promptLogin(): Promise<LoginResult> {
  sessionExpired.value = true;
  return new Promise((resolve) => {
    waiting.push(resolve);
  });
}

export default function SessionExpiredLoginOverlay() {
  const { login } = useAuth();
  const hasError = useSignal(false);

  return (
    <LoginOverlay
      opened={sessionExpired.value}
      error={hasError.value}
      noForgotPassword
      onErrorChanged={(event) => {
        hasError.value = event.detail.value;
      }}
      onLogin={async ({ detail: { username, password } }) => {
        const result = await login(username, password);
        hasError.value = result.error;
        if (!result.error) {
          sessionExpired.value = false;
          waiting.splice(0).forEach((resolve) => resolve(result));
        }
      }}
    />
  );
}

Render SessionExpiredLoginOverlay once in your main layout, so that it’s mounted for every view. It stays closed until the middleware reports an expired session, and the endpoint call that triggered it proceeds after a successful login.

Docs

Docs

Handling Session Expiration

Example