Quickstart Next.js

Ajoutez l'authentification à votre application Next.js en 5 minutes en utilisant le SDK @syauth/nextjs.

Avant de commencer

info

Vous avez besoin de ces identifiants avant de commencer. Obtenez-les depuis le Tableau de bord SyAuth.

Ce dont vous avez besoin	Où le trouver	Exemple
Client ID	Tableau de bord → Clients OAuth → Votre App	`a1b2c3d4-5678-90ab-cdef-...`
Clé API	Tableau de bord → Clés API	`xxxxxxxxxxxxx`

Nouveau sur SyAuth ? Suivez d'abord ces étapes :

Créez un compte Nexorix (SyAuth utilise Nexorix pour l'authentification)
Créez votre première Application pour obtenir vos identifiants
Ajoutez http://localhost:3000/auth/callback comme URI de redirection dans les paramètres de votre Application

Prérequis

Node.js 18+ installé
Une application Next.js 14+ (App Router)
Un compte SyAuth avec une Application créée

Étape 1 : Installer le SDK

npm install @syauth/nextjs

Le SDK gère toute la complexité OAuth pour vous : génération PKCE, gestion des tokens et rafraîchissement automatique.

Étape 2 : Configurer les Variables d'Environnement

Créez ou mettez à jour votre fichier .env.local à la racine de votre projet :

# Votre URL API SyAuth (ne changez pas ceci sauf si auto-hébergé)
NEXT_PUBLIC_SYAUTH_API_URL=https://api.syauth.com/e/v1

# Votre Client ID depuis Tableau de bord → Clients OAuth → Votre App
NEXT_PUBLIC_SYAUTH_CLIENT_ID=collez-votre-client-id-ici

# Où SyAuth redirige après la connexion (doit correspondre à la config du Tableau de bord !)
NEXT_PUBLIC_SYAUTH_REDIRECT_URI=http://localhost:3000/auth/callback

# Votre Clé API depuis Tableau de bord → Clés API
# Requis seulement si vous avez besoin de l'inscription utilisateur dans votre app (Créez-en une si vous ne l'avez pas)
# IMPORTANT : Les Clés API sont affichées une seule fois à la création. Stockez-les en sécurité !
NEXT_PUBLIC_SYAUTH_API_KEY=collez-votre-cle-api-ici

astuce

Où trouver ces valeurs :

Connectez-vous à syauth.com/dashboard
Sélectionnez votre Espace de travail
Cliquez sur Clients OAuth dans la barre latérale
Cliquez sur votre application
Copiez le Client ID

Pour obtenir une Clé API :

Cliquez sur Clés API dans la barre latérale
Cliquez sur Créer une Clé API
Copiez la clé immédiatement (elle est affichée une seule fois !)

ATTENTION

Assurez-vous que NEXT_PUBLIC_SYAUTH_REDIRECT_URI correspond exactement à l'URI de redirection configurée dans les paramètres de votre Application dans le Tableau de bord. Même une différence de slash final causera des erreurs !

Étape 3 : Envelopper Votre App avec SyAuthProvider

Mettez à jour votre layout racine pour fournir le contexte d'authentification à travers votre app :

// src/app/layout.tsx
import { SyAuthProvider } from '@syauth/nextjs';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <SyAuthProvider
          config={{
            apiUrl: process.env.NEXT_PUBLIC_SYAUTH_API_URL!,
            oauthClientId: process.env.NEXT_PUBLIC_SYAUTH_CLIENT_ID!,
            redirectUri: process.env.NEXT_PUBLIC_SYAUTH_REDIRECT_URI!,
            apiKey: process.env.NEXT_PUBLIC_SYAUTH_API_KEY,  // Optionnel
          }}
        >
          {children}
        </SyAuthProvider>
      </body>
    </html>
  );
}

Ce que cela fait : Le SyAuthProvider rend l'état d'authentification (user, isAuthenticated, etc.) disponible pour tous les composants de votre application.

Étape 4 : Créer la Page de Callback OAuth

Quand les utilisateurs se connectent, SyAuth les redirige vers votre application. Vous avez besoin d'une page pour gérer cette redirection :

// src/app/auth/callback/page.tsx
'use client';

import { useOAuthCallback } from '@syauth/nextjs';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

export default function CallbackPage() {
  const { loading, error, success } = useOAuthCallback();
  const router = useRouter();

  useEffect(() => {
    if (success) {
      // L'utilisateur est maintenant authentifié ! Rediriger vers votre tableau de bord
      router.push('/dashboard');
    }
  }, [success, router]);

  if (loading) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
        <p>Authentification en cours...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '2rem' }}>
        <h1>Échec de l'authentification</h1>
        <p style={{ color: 'red' }}>{error}</p>
        <button onClick={() => router.push('/')}>Retour</button>
      </div>
    );
  }

  return <div>Redirection...</div>;
}

Ce que cela fait : Le hook useOAuthCallback automatiquement :

Extrait le code d'autorisation de l'URL
L'échange contre des tokens d'accès
Stocke les tokens de manière sécurisée
Met à jour l'état d'authentification

Étape 5 : Ajouter la Connexion et le Contenu Protégé

Maintenant vous pouvez utiliser le hook useSyAuth dans n'importe quel composant :

// src/app/page.tsx
'use client';

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

export default function HomePage() {
  const { user, isAuthenticated, isLoading, loginWithRedirect, logout } = useSyAuth();

  // Afficher l'état de chargement pendant la vérification de l'authentification
  if (isLoading) {
    return <div>Chargement...</div>;
  }

  // L'utilisateur n'est pas connecté - afficher le bouton de connexion
  if (!isAuthenticated) {
    return (
      <div style={{ padding: '2rem' }}>
        <h1>Bienvenue sur Mon App</h1>
        <p>Veuillez vous connecter pour continuer.</p>
        <button 
          onClick={() => loginWithRedirect()}
          style={{ padding: '0.5rem 1rem', cursor: 'pointer' }}
        >
          Se connecter avec SyAuth
        </button>
      </div>
    );
  }

  // L'utilisateur est connecté - afficher son profil
  return (
    <div style={{ padding: '2rem' }}>
      <h1>Bienvenue, {user?.first_name}! 👋</h1>
      <div style={{ marginBottom: '1rem' }}>
        <p><strong>Email :</strong> {user?.email}</p>
        <p><strong>Nom :</strong> {user?.first_name} {user?.last_name}</p>
      </div>
      <button 
        onClick={() => logout()}
        style={{ padding: '0.5rem 1rem', cursor: 'pointer' }}
      >
        Se déconnecter
      </button>
    </div>
  );
}

Valeurs Disponibles du Hook

Valeur	Type	Description
`user`	`object \| null`	Les données de profil de l'utilisateur authentifié
`isAuthenticated`	`boolean`	`true` si l'utilisateur est connecté
`isLoading`	`boolean`	`true` pendant la vérification du statut d'authentification
`loginWithRedirect`	`function`	Redirige l'utilisateur vers la page de connexion SyAuth
`logout`	`function`	Déconnecte l'utilisateur et efface les tokens

Propriétés de l'Objet Utilisateur

Propriété	Type	Description
`id`	`string`	Identifiant utilisateur unique (UUID)
`email`	`string`	Adresse email de l'utilisateur
`first_name`	`string`	Prénom de l'utilisateur
`last_name`	`string`	Nom de famille de l'utilisateur
`email_verified`	`boolean`	Si l'email de l'utilisateur est vérifié

Étape 6 : Protéger les Routes avec Middleware (Optionnel)

Pour rediriger automatiquement les utilisateurs non authentifiés hors des pages protégées :

// src/middleware.ts
import { withAuth } from '@syauth/nextjs/server';

export default withAuth({
  // Routes qui nécessitent une authentification
  protectedRoutes: ['/dashboard', '/profile', '/settings'],
  
  // Où rediriger les utilisateurs non authentifiés
  loginUrl: '/',
  
  // Où rediriger après une connexion réussie
  defaultProtectedRoute: '/dashboard',
});

export const config = {
  // Appliquer le middleware à toutes les routes sauf les fichiers statiques
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

Ce que cela fait : Quand un utilisateur essaie d'accéder à /dashboard sans être connecté, il est automatiquement redirigé vers / (ou votre loginUrl).

Testez Votre Intégration

Démarrez votre serveur de développement :
```
npm run dev
```
Ouvrez http://localhost:3000
Cliquez sur "Se connecter avec SyAuth"
- Vous serez redirigé vers la page de connexion SyAuth
- Connectez-vous ou créez un compte
- Vous serez redirigé vers votre application, maintenant authentifié !

Terminé ! 🎉

Votre application Next.js a maintenant :

✅ Authentification OAuth 2.0 avec PKCE (sécurisé !)
✅ Rafraîchissement automatique des tokens (pas d'expiration de session)
✅ Routes protégées (middleware optionnel)
✅ Gestion de session utilisateur
✅ Fonctionnalité de connexion et déconnexion

Dépannage

"redirectUri is required"

Cause : La variable d'environnement NEXT_PUBLIC_SYAUTH_REDIRECT_URI est manquante ou vide.

Solution :

Vérifiez que votre fichier .env.local a cette variable définie
Redémarrez votre serveur de développement (npm run dev)

"Invalid redirect_uri"

Cause : L'URI de redirection dans votre environnement ne correspond pas à la configuration de votre Tableau de bord.

Solution :

Allez dans Tableau de bord → Clients OAuth → Votre App → URIs de redirection
Assurez-vous que http://localhost:3000/auth/callback est listé
Vérifiez la correspondance exacte (pas de slash supplémentaire, port correct, etc.)

Erreurs CORS

Cause : Faire des appels API directs depuis le navigateur vers SyAuth.

Solution : Utilisez toujours loginWithRedirect() au lieu de faire des appels directs. Le SDK gère l'authentification correctement pour éviter les problèmes CORS.

"Not Authenticated After Redirect"

Cause : La page de callback ne traite pas la réponse OAuth correctement.

Solution :

Vérifiez que vous avez /src/app/auth/callback/page.tsx
Assurez-vous qu'elle utilise le hook useOAuthCallback()
Assurez-vous que c'est un composant client ('use client' en haut)

Variables d'Environnement ne Fonctionnant Pas

Cause : Next.js nécessite que les variables d'environnement commencent par NEXT_PUBLIC_ pour être disponibles dans le navigateur.

Solution :

Vérifiez que tous les noms de variables commencent par NEXT_PUBLIC_
Redémarrez votre serveur de développement après avoir modifié .env.local

Prochaines Étapes

Créez Votre Première Application — Configurez votre client OAuth dans le Tableau de bord
Concepts Clés — Apprenez-en plus sur les Espaces de travail, Clients OAuth et Utilisateurs
Référence SDK — Documentation complète du SDK avec toutes les méthodes disponibles
Personnaliser la Page de Connexion — Personnalisez l'expérience de connexion

Avant de commencer​

Prérequis​

Étape 1 : Installer le SDK​

Étape 2 : Configurer les Variables d'Environnement​

Étape 3 : Envelopper Votre App avec SyAuthProvider​

Étape 4 : Créer la Page de Callback OAuth​

Étape 5 : Ajouter la Connexion et le Contenu Protégé​

Valeurs Disponibles du Hook​

Propriétés de l'Objet Utilisateur​

Étape 6 : Protéger les Routes avec Middleware (Optionnel)​

Testez Votre Intégration​

Terminé ! 🎉​

Dépannage​

"redirectUri is required"​

"Invalid redirect_uri"​

Erreurs CORS​

"Not Authenticated After Redirect"​

Variables d'Environnement ne Fonctionnant Pas​

Prochaines Étapes​

Avant de commencer

Prérequis

Étape 1 : Installer le SDK

Étape 2 : Configurer les Variables d'Environnement

Étape 3 : Envelopper Votre App avec SyAuthProvider

Étape 4 : Créer la Page de Callback OAuth

Étape 5 : Ajouter la Connexion et le Contenu Protégé

Valeurs Disponibles du Hook

Propriétés de l'Objet Utilisateur

Étape 6 : Protéger les Routes avec Middleware (Optionnel)

Testez Votre Intégration

Terminé ! 🎉

Dépannage

"redirectUri is required"

"Invalid redirect_uri"

Erreurs CORS

"Not Authenticated After Redirect"

Variables d'Environnement ne Fonctionnant Pas

Prochaines Étapes