Aller au contenu principal

Gestion de Session

Gérez les sessions utilisateur et l'état d'authentification dans votre application.

Vue d'ensemble de la Session​

SyAuth utilise des sessions basées sur les tokens :

  • Pas de stockage de session côté serveur requis
  • Authentification sans état
  • Tokens stockés dans des cookies HttpOnly sécurisés
  • Restauration automatique de session au chargement de la page

Cycle de Vie de la Session​

Vérifier l'État de la Session​

Utiliser le SDK​

'use client';

import { useSyAuth } from '@syauth/nextjs';

export function SessionStatus() {
  const { 
    isAuthenticated,  // L'utilisateur est-il connecté ?
    isLoading,        // La session est-elle en cours de restauration ?
    user              // Données utilisateur
  } = useSyAuth();

  if (isLoading) {
    return <p>Vérification de la session...</p>;
  }

  if (!isAuthenticated) {
    return <p>Pas de session active</p>;
  }

  return (
    <div>
      <p>Connecté en tant que : {user?.email}</p>
      <p>Session active</p>
    </div>
  );
}

Persistance de Session​

Rechargement de Page​

Quand la page charge :

  1. Le SDK vérifie les tokens existants dans les cookies
  2. Valide l'expiration du token
  3. Rafraîchit si nécessaire
  4. Restaure l'état user et isAuthenticated
// Au chargement, isLoading est true pendant la validation de la session
const { isAuthenticated, isLoading } = useSyAuth();

if (isLoading) {
  // La session est en train d'être restaurée
  return <LoadingSpinner />;
}

Nouvel Onglet / Fenêtre​

Chaque onglet/fenêtre partage la même session via les cookies :

  • Connexion dans Onglet A → Onglet B est aussi connecté
  • Déconnexion dans Onglet A → Session Onglet B invalidée (à la prochaine action)

Expiration de Session​

Expiration de l'Access Token​

  • Défaut : 1 heure
  • Le SDK rafraîchit automatiquement avant l'expiration
  • Pas d'interruption utilisateur

Expiration du Refresh Token​

  • Défaut : 30 jours (configurable)
  • Quand expiré, l'utilisateur doit se ré-authentifier
  • Redirection gracieuse vers la connexion

Timeout d'Inactivité (Optionnel)​

Implémentez un timeout d'inactivité dans votre application :

import { useEffect } from 'react';
import { useSyAuth } from '@syauth/nextjs';

const IDLE_TIMEOUT = 30 * 60 * 1000; // 30 minutes

export function useIdleTimeout() {
  const { logout } = useSyAuth();

  useEffect(() => {
    let timeoutId: NodeJS.Timeout;

    const resetTimer = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        logout();
      }, IDLE_TIMEOUT);
    };

    // Réinitialiser sur activité utilisateur
    window.addEventListener('mousemove', resetTimer);
    window.addEventListener('keydown', resetTimer);
    
    resetTimer();

    return () => {
      clearTimeout(timeoutId);
      window.removeEventListener('mousemove', resetTimer);
      window.removeEventListener('keydown', resetTimer);
    };
  }, [logout]);
}

Terminer les Sessions​

Déconnexion​

const { logout } = useSyAuth();

// Terminer la session et effacer les tokens
logout();

Déconnexion de Tous les Appareils​

Pour déconnecter de tous les appareils, vous devez révoquer tous les refresh tokens actifs pour l'utilisateur. Cela implique typiquement d'invalider les sessions de l'utilisateur dans votre propre base de données ou d'utiliser l'endpoint spécifique de révocation de token pour chaque token.

POST https://api.syauth.com/e/v1/oauth/revoke/
Content-Type: application/x-www-form-urlencoded

token=<token_a_revoquer>&token_type_hint=refresh_token

Événements de Session​

Écoutez les changements de session :

import { useSyAuth } from '@syauth/nextjs';
import { useEffect } from 'react';

export function SessionListener() {
  const { isAuthenticated, user } = useSyAuth();

  useEffect(() => {
    if (isAuthenticated) {
      console.log('Utilisateur connecté :', user?.email);
      // Suivre les analyses, charger les préférences utilisateur, etc.
    } else {
      console.log('Utilisateur déconnecté');
      // Nettoyage, redirection, etc.
    }
  }, [isAuthenticated, user]);

  return null;
}

Validation de Session Côté Serveur​

Dans les Routes API​

// src/app/api/protected/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const accessToken = request.cookies.get('syauth_access_token')?.value;

  if (!accessToken) {
    return NextResponse.json({ error: 'Non autorisé' }, { status: 401 });
  }

  // Valider le token avec SyAuth
  const userInfoResponse = await fetch('https://api.syauth.com/e/v1/oauth/userinfo', {
    headers: { 'Authorization': `Bearer ${accessToken}` }
  });

  if (!userInfoResponse.ok) {
    return NextResponse.json({ error: 'Session invalide' }, { status: 401 });
  }

  const user = await userInfoResponse.json();
  
  // Procéder avec la requête authentifiée
  return NextResponse.json({ data: 'données protégées', user });
}

Synchronisation Inter-Onglets​

Gérez les changements de session à travers les onglets du navigateur :

import { useEffect } from 'react';
import { useSyAuth } from '@syauth/nextjs';

export function CrossTabSync() {
  const { checkSession } = useSyAuth();

  useEffect(() => {
    const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible') {
        // Revérifier la session quand l'onglet devient visible
        checkSession();
      }
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);
    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, [checkSession]);

  return null;
}

Prochaines Étapes​