SessionExpired

Page dédiée à afficher lorsque la session d’un utilisateur est expirée ou inexistante. Affiche un message explicatif, un bouton « Me connecter » et un compte à rebours de 10 secondes avant la redirection automatique.

Démo en direct

Session expirée

Votre session a expiré ou vous n'êtes pas connecté. Veuillez vous reconnecter pour accéder à cette page.

Redirection automatique dans 10s...

La redirection est désactivée dans cette démo (redirectUrl pointe vers la page courante).

1. Middleware — détecter et rediriger

Dans votre src/proxy.ts, utilisez authGuardpour vérifier la session. Si elle est expirée, redirigez vers la page /session-expired.

import { authGuard } from "@ramses1er/cbk-toolkit/server";
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export async function proxy(request: NextRequest) {
  const result = await authGuard(request, {
    publicRoutes: ["/", "/api/login"],
    loginUrl: "/",
    jwtSecret: process.env.JWT_SECRET!,
  });

  if (result.status === 307) {
    const url = new URL("/session-expired", request.url);
    return NextResponse.redirect(url);
  }

  return result;
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|img/|manifest|sw).*)"],
};

2. Page — afficher le composant

Créez un fichier app/session-expired/page.tsx et utilisez le composant SessionExpired.

import { SessionExpired } from "@ramses1er/cbk-toolkit/client";

export default function SessionExpiredPage() {
  return <SessionExpired redirectUrl="/" />;
}

Props

Prop	Type	Défaut	Description
redirectUrl	string	"/"	URL de redirection après le compte à rebours ou clic

Comportement

Un compte à rebours de 10 secondes est démarré automatiquement
À la fin du compte à rebours, redirection vers redirectUrl
L'utilisateur peut cliquer sur « Me connecter » pour être redirigé immédiatement
Idéalement utilisée avec un middleware qui redirige vers cette page en cas de session invalide