Connexion & Déconnexion

Implémentez les fonctionnalités de connexion et déconnexion dans votre application.

Déclencher la Connexion

La méthode recommandée pour connecter les utilisateurs est de les rediriger vers la page de Login Universel SyAuth.

SDK Next.js

Composant Client

Utilisez le hook useSyAuth pour déclencher la connexion :

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

export function LoginButton() {
  const { loginWithRedirect, isLoading } = useSyAuth();

  return (
    <button onClick={() => loginWithRedirect()}>
      Se connecter
    </button>
  );
}

Paramètres personnalisés

Vous pouvez surcharger les paramètres par défaut :

loginWithRedirect({
  redirectUri: 'https://monapp.com/callback',
  scope: 'openid profile email offline_access',
});

SDK Django

Décorateur de Vue

Protégez des vues distinctes en utilisant le décorateur login_required. Il redirige automatiquement les utilisateurs non authentifiés.

from django.contrib.auth.decorators import login_required

@login_required
def my_protected_view(request):
    return render(request, 'dashboard.html')

Déclenchement Manuel

Ou redirigez manuellement depuis n'importe quelle vue :

from django.shortcuts import redirect

def login_view(request):
    return redirect('oidc_login') # Nom d'URL fourni par le SDK

Manuel / API

Construire l'URL de Redirection

Si vous n'utilisez pas de SDK, vous devez construire l'URL d'autorisation vous-même :

GET https://api.syauth.com/e/v1/oauth/authorize?
  response_type=code&
  client_id=VOTRE_CLIENT_ID&
  redirect_uri=VOTRE_REDIRECT_URI&
  scope=openid profile email&
  state=STATE_ALEATOIRE&
  code_challenge=PKCE_CHALLENGE&
  code_challenge_method=S256

Note : Nous recommandons fortement de générer un code_challenge PKCE pour la sécurité. Voir OAuth 2.0 avec PKCE.

---

Gérer le Callback

Après la connexion, SyAuth redirige l'utilisateur vers votre application avec un code d'autorisation.

SDK Next.js

Le SDK gère automatiquement l'échange de code si vous avez configuré le composant AuthCallback.

// src/app/auth/callback/page.tsx
'use client';
import { useOAuthCallback } from '@syauth/nextjs';
// ... implémentation standard du callback (voir Quickstart)

SDK Django

Le SDK Django fournit une vue de callback intégrée qui gère :

1. La validation du state
2. L'échange du code contre des tokens
3. La création/mise à jour de l'utilisateur dans votre base de données
4. La connexion de l'utilisateur via la session Django

Aucun code supplémentaire requis si vous avez inclus les URLs du SDK !

Manuel / API

Vous devez échanger le code contre des tokens manuellement :

curl -X POST https://api.syauth.com/e/v1/oauth/token/ \
  -d "grant_type=authorization_code" \
  -d "client_id=VOTRE_CLIENT_ID" \
  -d "code=CODE_AUTORISATION" \
  -d "redirect_uri=VOTRE_REDIRECT_URI" \
  -d "code_verifier=PKCE_VERIFIER"

Voir Gestion des Tokens pour les détails sur la réponse.

---

Déconnexion

SDK Next.js

const { logout } = useSyAuth();
// ...
<button onClick={() => logout()}>Se déconnecter</button>

SDK Django

from django.contrib.auth import logout

def logout_view(request):
    logout(request) # Efface la session Django
    # Optionnel : Aussi rediriger vers le endpoint de déconnexion SyAuth
    return redirect('https://api.syauth.com/e/v1/auth/logout?client_id=...')

Manuel / API

Pour déconnecter l'utilisateur de SyAuth (effacer leur session SSO), redirigez-les :

GET https://api.syauth.com/e/v1/auth/logout?
  client_id=VOTRE_CLIENT_ID&
  post_logout_redirect_uri=VOTRE_URL_RETOUR

---

Routes Protégées

Next.js

Approche Middleware :

// src/middleware.ts
export default withAuth({
  protectedRoutes: ['/dashboard'],
});

Approche Composant :

const { isAuthenticated } = useSyAuth();
if (!isAuthenticated) return <Login />;

Django

Approche Décorateur :

@login_required
def dashboard(request):
    return render(request, 'dashboard.html')

Approche Mixin (basé sur les classes) :

class DashboardView(LoginRequiredMixin, TemplateView):
    template_name = "dashboard.html"