RouteGuard Provider + auto-protection

Protection de routes côté client basée sur les rôles. Le Provider détecte automatiquement le chemin de chaque page et vérifie si l’utilisateur a le droit d’y accéder. Complète authGuardqui protège côté serveur.

Avantage :vous configurez une seule fois, toutes les pages sont protégées automatiquement. Pas besoin de modifier chaque page.

1Créer le fichier de configuration

Dans le dossier src/config/de votre projet, créez un fichier permissions.ts. C’est ici que vous définissez qui peut accéder à quoi.

📁 src/config/permissions.ts

import { createRouteGuardConfig } from "@ramses1er/cbk-toolkit/client";
import { useCurrentUser } from "@/app/auth/hooks/use-current-user";

export const routeGuardConfig = createRouteGuardConfig({
  useCurrentUser,
  pagePermissions: {
    "/administrations": ["admin"],
    "/dashboard":       ["admin", "manager"],
    "/profile":         ["admin", "manager", "user"],
  },
  deniedPath: "/access-denied",
});

Paramètres :

useCurrentUser — votre hook React qui retourne l’utilisateur connecté ({ data, isLoading })
pagePermissions— objet qui associe chaque chemin aux rôles autorisés
deniedPath — (optionnel) page de redirection si accès refusé. Défaut : /access-denied

2Ajouter le Provider dans le layout racine

Dans src/app/layout.tsx, importez la config et enveloppez l’application avec RouteGuardProvider.

📁 src/app/layout.tsx

import { RouteGuardProvider } from "@ramses1er/cbk-toolkit/client";
import { routeGuardConfig } from "@/config/permissions";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <RouteGuardProvider config={routeGuardConfig}>
      {children}
    </RouteGuardProvider>
  );
}

Important :une seule fois dans le layout racine. Toutes les pages sont automatiquement protégées.

Héritage automatique des permissions

Les permissions sont héritées par les sous-chemins. Une seule règle suffit pour protéger tout un module.

Route	Rôles autorisés	Défini dans la config
/administrations	admin	oui
/administrations/users	admin	hérité de /administrations
/administrations/users/ajouter	admin	hérité de /administrations
/dashboard	admin, manager	oui
/profile	admin, manager, user	oui
/public	aucune restriction	non défini

Comportement

Pas de permissions configuréespour le chemin → la page est accessible sans vérification
Chargement→ écran de chargement pendant la récupération de l’utilisateur
Utilisateur non connecté ou rôle non autorisé → redirection vers deniedPath
Rôle autorisé→ la page s’affiche normalement
Héritage→ une permission sur/adminprotège aussi /admin/users,/admin/settings, etc.

Récapitulatif — 2 fichiers, 0 manipulation par page

1Créersrc/config/permissions.ts

avec createRouteGuardConfig→ vous définissez les droits par route

2Modifiersrc/app/layout.tsx

ajouter <RouteGuardProvider config={routeGuardConfig}>

Terminé.Plus rien à faire. Toutes les pages sont protégées automatiquement.