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. Proxy — détecter et rediriger

Dans votre src/proxy.ts, choisissez une option selon votre auth. Les deux sont valides : si la session est expirée ou inexistante, redirigez vers la page /session-expired.

Option A — JWT (authGuard du toolkit)

Utilisez authGuardpour vérifier la session JWT côté serveur.

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).*)"],
};

Option B — better-auth (getSessionCookie)

Si vous utilisez better-auth, utilisez getSessionCookie dans src/proxy.ts. Laissez /api/auth public, redirigez / vers /dashboardsi connecté, et vers /session-expired sinon.

import { NextRequest, NextResponse } from "next/server";
import { getSessionCookie } from "better-auth/cookies";

const PUBLIC_ROUTES = ["/", "/about", "/session-expired"];
const PUBLIC_PREFIXES = ["/api/auth"];

export async function proxy(request: NextRequest) {
  const { pathname } = request.nextUrl;

  if (PUBLIC_PREFIXES.some((p) => pathname.startsWith(p)))
    return NextResponse.next();

  // new auth only (better-auth)
  const session = getSessionCookie(request);

  // login page: connected -> dashboard, not connected -> stay
  if (pathname === "/") {
    if (session)
      return NextResponse.redirect(new URL("/dashboard", request.url));
    return NextResponse.next();
  }

  if (PUBLIC_ROUTES.includes(pathname)) return NextResponse.next();

  if (!session) {
    return NextResponse.redirect(new URL("/session-expired", request.url));
  }

  return NextResponse.next();
}

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