@alfycore/sso-client

Module Node.js pour intégrer l'authentification SSO Alfycore dans vos applications React, Next.js et Express.js.

Installation

npm install @alfycore/sso-client

Configuration

Variables d'environnement

Créez un fichier .env avec les configurations suivantes :

SSO_SERVER_URL=http://localhost:3001
SSO_CLIENT_ID=your-client-id
SSO_CLIENT_SECRET=your-client-secret
SSO_REDIRECT_URI=http://localhost:3000/auth/callback

Utilisation avec React

1. Configuration du Provider

Enveloppez votre application avec le SSOProvider :

import { SSOProvider } from '@alfycore/sso-client';

const ssoConfig = {
  ssoServerUrl: process.env.REACT_APP_SSO_SERVER_URL!,
  clientId: process.env.REACT_APP_SSO_CLIENT_ID!,
  clientSecret: process.env.REACT_APP_SSO_CLIENT_SECRET!,
  redirectUri: process.env.REACT_APP_SSO_REDIRECT_URI!,
  scopes: ['openid', 'profile', 'email']
};

function App() {
  return (
    <SSOProvider 
      config={ssoConfig}
      onAuthSuccess={(user) => console.log('Logged in:', user)}
      onAuthError={(error) => console.error('Auth error:', error)}
    >
      <YourApp />
    </SSOProvider>
  );
}

2. Utilisation du Hook useSSO

import { useSSO } from '@alfycore/sso-client';

function Profile() {
  const { user, isAuthenticated, isLoading, login, logout } = useSSO();

  if (isLoading) {
    return <div>Chargement...</div>;
  }

  if (!isAuthenticated) {
    return <button onClick={login}>Se connecter</button>;
  }

  return (
    <div>
      <h1>Bienvenue {user?.name}</h1>
      <p>Email: {user?.email}</p>
      <button onClick={logout}>Se déconnecter</button>
    </div>
  );
}

3. Routes Protégées

import { ProtectedRoute } from '@alfycore/sso-client';

function Dashboard() {
  return (
    <ProtectedRoute fallback={<div>Chargement...</div>}>
      <h1>Tableau de bord</h1>
      <p>Contenu protégé</p>
    </ProtectedRoute>
  );
}

Utilisation avec Next.js

1. Configuration dans _app.tsx

import { SSOProvider } from '@alfycore/sso-client';
import type { AppProps } from 'next/app';

const ssoConfig = {
  ssoServerUrl: process.env.NEXT_PUBLIC_SSO_SERVER_URL!,
  clientId: process.env.NEXT_PUBLIC_SSO_CLIENT_ID!,
  clientSecret: process.env.NEXT_PUBLIC_SSO_CLIENT_SECRET!,
  redirectUri: process.env.NEXT_PUBLIC_SSO_REDIRECT_URI!
};

export default function App({ Component, pageProps }: AppProps) {
  return (
    <SSOProvider config={ssoConfig}>
      <Component {...pageProps} />
    </SSOProvider>
  );
}

2. Page Protégée

import { useSSO, ProtectedRoute } from '@alfycore/sso-client';

export default function DashboardPage() {
  return (
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  );
}

function Dashboard() {
  const { user, logout } = useSSO();
  
  return (
    <div>
      <h1>Dashboard - {user?.name}</h1>
      <button onClick={logout}>Déconnexion</button>
    </div>
  );
}

Utilisation avec Express.js

1. Configuration de base

const express = require('express');
const { ExpressSSOMiddleware } = require('@alfycore/sso-client');

const app = express();

const ssoMiddleware = new ExpressSSOMiddleware({
  ssoServerUrl: process.env.SSO_SERVER_URL,
  clientId: process.env.SSO_CLIENT_ID,
  clientSecret: process.env.SSO_CLIENT_SECRET,
  redirectUri: process.env.SSO_REDIRECT_URI,
  cookieSecure: process.env.NODE_ENV === 'production',
  loginPath: '/auth/login',
  callbackPath: '/auth/callback',
  logoutPath: '/auth/logout'
});

// Installer les routes d'authentification
app.use(ssoMiddleware.routes());

// Route publique
app.get('/', (req, res) => {
  res.send('Page d\'accueil');
});

// Route protégée
app.get('/dashboard', ssoMiddleware.requireAuth(), (req, res) => {
  res.json({
    message: 'Tableau de bord',
    user: req.user
  });
});

// Route avec authentification optionnelle
app.get('/profile', ssoMiddleware.optionalAuth(), (req, res) => {
  if (req.user) {
    res.json({ user: req.user });
  } else {
    res.json({ message: 'Non authentifié' });
  }
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

2. TypeScript avec Express

import express, { Request, Response } from 'express';
import { ExpressSSOMiddleware } from '@alfycore/sso-client';

const app = express();

const ssoMiddleware = new ExpressSSOMiddleware({
  ssoServerUrl: process.env.SSO_SERVER_URL!,
  clientId: process.env.SSO_CLIENT_ID!,
  clientSecret: process.env.SSO_CLIENT_SECRET!,
  redirectUri: process.env.SSO_REDIRECT_URI!
});

app.use(ssoMiddleware.routes());

app.get('/api/me', ssoMiddleware.requireAuth(false), (req: Request, res: Response) => {
  res.json(req.user);
});

app.listen(3000);

API Reference

SSOProvider (React/Next.js)

Props:

• config: Configuration SSO (obligatoire)
• onAuthSuccess: Callback appelé après authentification réussie
• onAuthError: Callback appelé en cas d'erreur
• storageKey: Clé de stockage local (défaut: 'alfycore_sso_session')

useSSO Hook

Retourne:

• user: Utilisateur actuel ou null
• isAuthenticated: Boolean indiquant si l'utilisateur est connecté
• isLoading: Boolean indiquant le chargement
• login(): Fonction pour initier la connexion
• logout(): Fonction pour se déconnecter
• refreshSession(): Fonction pour rafraîchir la session

ExpressSSOMiddleware

Méthodes:

• routes(): Middleware pour gérer les routes d'authentification
• requireAuth(redirectOnFail?): Middleware pour protéger les routes
• optionalAuth(): Middleware avec authentification optionnelle
• getUser(req): Récupère l'utilisateur depuis la requête

Options:

• ssoServerUrl: URL du serveur SSO
• clientId: ID du client SSO
• clientSecret: Secret du client SSO
• redirectUri: URI de redirection
• cookieName: Nom du cookie de session
• cookieMaxAge: Durée de vie du cookie (ms)
• loginPath: Chemin de la route de connexion
• callbackPath: Chemin de la route de callback
• logoutPath: Chemin de la route de déconnexion

Exemples Complets

Consultez le dossier examples/ pour des exemples complets d'utilisation avec :

• React (Create React App)
• Next.js
• Express.js

Support

Pour toute question ou problème, créez une issue sur le dépôt GitHub.

Licence

MIT