Sécuriser les applications React avec Casdoor (Partie 2)

Dans la premiere partie de cet article, nous avons décrit l’introduction à Casdoor, une plateforme IAM puissante. Dans cette seconde partie, nous allons explorer la création d’une application React sécurisée avec Casdoor et TanStack Router. Nous allons voir comment intégrer Casdoor pour l’authentification des utilisateurs et utiliser TanStack Router pour la gestion des routes robuste et la sécurité renforcée.

GitHub Repository: casdoor-demo-app

Configuration du projet avec Vite et TypeScript

1. Créer un nouveau projet :

   pnpm create vite casdoor-demo-app
   cd casdoor-demo-app
   pnpm install

   Pendant la configuration, sélectionner React et choisir TypeScript.

2. Installer les dépendances additionnelles :

   pnpm install @tanstack/react-router @tanstack/react-query casdoor-js-sdk

3. Lancer le serveur de développement :

   pnpm run dev

Cela lance votre serveur de développement React, généralement accessible à l’adresse http://localhost:5173/.

Intégration de TanStack Router avec Vite

Dans notre application React sécurisée, nous allons utiliser TanStack Router pour une navigation et une gestion des routes efficaces. Pour intégrer TanStack Router avec Vite, nous allons utiliser un plugin dédié : @tanstack/router-vite-plugin.

1. Installation

pnpm install @tanstack/router-vite-plugin

2. Configuration de Vite

Dans votre fichier vite.config.js, mettez à jour votre configuration Vite pour inclure le plugin TanStack Router :

export default defineConfig({
  plugins: [react(), TanStackRouterVite()],
});

Configuration de l’SDK Casdoor

Nous allons interagir avec l’API de Casdoor en utilisant son SDK JavaScript. Voici comment le configurer dans Settings.ts :

const sdkConfig = {
  serverUrl: import.meta.env.VITE_SERVER_URL,
  clientId: import.meta.env.VITE_CLIENT_ID,
  organizationName: import.meta.env.VITE_ORG_NAME,
  appName: import.meta.env.VITE_APP_NAME,
  redirectPath: import.meta.env.VITE_REDIRECT_PATH,
};

export const CasdoorSDK = new Sdk(sdkConfig);

Intégration du login Casdoor

La route login.tsx permet aux utilisateurs de lancer le flow de login Casdoor :

const login = () => {
  CasdoorSDK.signin_redirect();
};

// ... error handling code

return (
  <div>
    <button onClick={login}>Casdoor Login</button>
  </div>
);

Authentification et récupération des données utilisateur

Après un login Casdoor réussi, un token d’accès est généralement fourni. Nous allons utiliser ce token pour récupérer les données de l’utilisateur depuis l’API de Casdoor. Voici comment nous utilisons Tanstack Query pour gérer les données :

export const authQueryOptions = () =>
  queryOptions({
    queryKey: ['auth'],
    queryFn: () => CasdoorSDK.exchangeForAccessToken(),
  });

export const checkLogin = () => {
  const token = getToken();
  return token !== undefined && token !== null && token.length > 0;
};

• checkLogin: Cette fonction vérifie si un token d’accès valide existe dans le stockage de session en appelant checkLogin().
• getToken: cette fonction récupère le token d’accès depuis le stockage de session. (L’utilisation du stockage de session n’est pas sécurisée et n’est pas recommandée)

Récupération des données utilisateur

Ensuite, nous allons définir des fonctions pour récupérer les données de l’utilisateur depuis Casdoor à l’aide du token d’accès :

export interface User {
  name: string;
  picture?: string;
  preferred_username: string;
  roles: string[];
}

export const userQueryOptions = (token: string) =>
  queryOptions({
    queryKey: ["user"],
    queryFn: async () => await getUserInfo(token),
  });

export async function getUserInfo(token: string): Promise<User | undefined> {
  return (await CasdoorSDK.getUserInfo(token)) as User;
}

• Interface utilisateur : Cette définition d’interface nommée User décrit la structure attendue des données utilisateur récupérées depuis Casdoor, notamment les propriétés nom, rôles, etc.
• Récupérer les données utilisateur : Cette fonction utilise la méthode getUserInfo du SDK Casdoor pour récupérer les données utilisateur à partir de l’API de Casdoor.

Routes protégées avec autorisation basée sur les rôles

Nous pouvons utiliser les données de l’utilisateur (notamment ses rôles) pour définir des routes protégées accessible uniquement par les utilisateurs autorisés. Voici un exemple issu de _admin.tsx :

function AdminProtectedRoute() {
  const isLoggedIn = checkLogin();
  const user = useLoaderData(); // Fetches user data from route loader

  const isAdmin = user?.roles?.includes('admin');

  if (!isLoggedIn || !isAdmin) {
    sessionStorage.setItem('redirect', location.pathname);

    return <Navigate to="/login" search={{ redirect: location.href }} />;
  }
  return <Outlet />;
}

export const Route = createFileRoute('/_admin')({
  component: () => <AdminProtectedRoute />,
  loader: async ({ context: { queryClient } }) => {
    const token = getToken();
    const user = await queryClient.ensureQueryData(userQueryOptions(token ?? ''));

    return user;
  },
});

• AdminProtectedRoute : Ce composant vérifie si l’utilisateur est connecté (isLoggedIn) et a le rôle “admin” en utilisant les données utilisateur récupérées via le loader de route. Si non autorisé, il redirige vers la page de connexion.
• Configuration de route : Ici, nous créons une route protégée pour /_admin en utilisant createFileRoute. Le composant est défini sur AdminProtectedRoute, et le loader de route utilise userQueryOptions pour récupérer les données utilisateur en fonction du token récupéré.

Conclusion

Cet article de blog vous a permis de comprendre les bases de l’intégration de Casdoor avec une application React pour l’authentification des utilisateurs et de la gestion des routes sécurisées à l’aide de TanStack Router. N’oubliez pas de consulter la documentation officielle de Casdoor, TanStack Router et TanStack Query pour en savoir plus sur ces outils et leurs fonctionnalités avancées. En utilisant ces outils, vous pouvez construire des applications React robustes et sécurisées en utilisant Casdoor comme votre solution IAM.