Skip to Content

Démarrage Rapide

Ce guide t’accompagne dans l’intégration de l’authentification Auris dans ton application depuis zéro. À la fin, tu auras un flux de login fonctionnel qui redirige les utilisateurs vers la page de login hébergée d’Auris, gère le callback et affiche les informations de l’utilisateur authentifié.

Temps estimé : 5–10 minutes.

Prérequis

  • Node.js 20+ (pour les intégrations JavaScript, React et Next.js)
  • PHP 7.4+ avec Composer (pour les intégrations PHP)
  • Un compte Auris — inscris-toi à l’URL de ta Console Auris
  • Un projet applicatif existant auquel tu souhaites ajouter l’authentification

Étape 1 : Crée une Application dans la Console

Avant d’installer un SDK, enregistre ton application avec Auris afin qu’elle reçoive un Client ID.

  1. Connecte-toi à la Console Auris.
  2. Navigue vers Applications dans la barre latérale.
  3. Clique sur Créer une Application.
  4. Sélectionne le type d’application :
    • WEB — pour les apps basées sur navigateur (React, Next.js, Vue, Angular, server-rendered)
    • MOBILE — pour les apps natives iOS ou Android
    • M2M — pour les intégrations serveur à serveur ou CLI (pas de login utilisateur)
  5. Entre un nom d’affichage pour ton application (ex. Mon App - Développement).
  6. Ajoute ton URI de Redirection — l’URL vers laquelle Auris redirigera après un login réussi :
    • Développement local : http://localhost:3000/callback
    • Production : https://votre-domaine.com/callback
  7. Clique sur Créer.

Après la création, copie ton Client ID depuis la page de détail de l’application.

N’expose jamais ton Client Secret dans le JavaScript côté navigateur. Pour les types d’application WEB et MOBILE, Auris utilise PKCE (Proof Key for Code Exchange) et ne requiert pas de client secret. Les client secrets ne sont utilisés que pour les applications M2M (client_credentials) s’exécutant côté serveur.

Étape 2 : Installe le SDK

Choisis le SDK correspondant à ta stack.

# Next.js
npm install @auris/nextjs @auris/react @auris/js
 
# React
npm install @auris/react @auris/js
 
# JavaScript vanilla
npm install @auris/js
 
# PHP
composer require auris/sdk

Étape 3 : Configure Auris

Next.js — Ajoute AurisProvider à ton layout.tsx racine :

// app/layout.tsx
import { AurisProvider } from '@auris/nextjs'
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        <AurisProvider
          domain="https://auth.votre-domaine.com"
          clientId="VOTRE_CLIENT_ID"
          redirectUri="http://localhost:3000/callback"
        >
          {children}
        </AurisProvider>
      </body>
    </html>
  )
}

Ajoute le middleware Auris pour protéger les routes :

// middleware.ts
import { aurisMiddleware } from '@auris/nextjs/middleware'
 
export default aurisMiddleware({
  domain: process.env.AURIS_DOMAIN!,
  clientId: process.env.AURIS_CLIENT_ID!,
  // Routes nécessitant une authentification
  protectedPaths: ['/dashboard', '/settings', '/profile'],
  // Routes qui contournent entièrement les vérifications d'auth (le callback OAuth doit être public)
  publicPaths: ['/callback', '/login', '/'],
})
 
export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
}

React — Enveloppe l’app avec AurisProvider :

import { AurisProvider } from '@auris/react'
// ...
<AurisProvider domain="https://auth.votre-domaine.com" clientId="VOTRE_CLIENT_ID" redirectUri="...">
  <App />
</AurisProvider>

PHP :

<?php
require_once __DIR__ . '/vendor/autoload.php';
use Auris\AurisClient;
use Auris\AurisConfig;
 
$config = new AurisConfig(
    'https://auth.votre-domaine.com',    // domain
    'VOTRE_CLIENT_ID',                   // clientId
    'http://localhost:8000/callback.php' // redirectUri
    // clientSecret vaut '' par défaut — inutile pour les apps WEB/PKCE
);
$auris = new AurisClient($config);

Étape 4 : Ajoute un Bouton de Login

// components/LoginButton.tsx
'use client'
import { useAuris } from '@auris/nextjs'
 
export function LoginButton() {
  const { loginWithRedirect } = useAuris()
  return <button onClick={() => loginWithRedirect()}>Se connecter</button>
}

Étape 5 : Gère le Callback

Après l’authentification, Auris redirige vers ton redirectUri avec un code d’autorisation. Le SDK @auris/nextjs effectue l’échange de code automatiquement dès qu’il détecte le paramètre code dans l’URL.

// app/callback/page.tsx
'use client'
import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { useAuris } from '@auris/nextjs'
 
export default function CallbackPage() {
  const { isAuthenticated, isLoading, error } = useAuris()
  const router = useRouter()
 
  useEffect(() => {
    // AurisProvider effectue l'échange de code automatiquement au montage.
    // Dès que la session est prête, on quitte la page de callback.
    if (!isLoading && isAuthenticated) {
      router.replace('/dashboard')
    }
  }, [isLoading, isAuthenticated, router])
 
  if (error) {
    return <p>Échec de la connexion : {error.message}</p>
  }
 
  return <p>Finalisation de la connexion...</p>
}

Étape 6 : Affiche les Informations Utilisateur

// app/dashboard/page.tsx
'use client'
import { useUser, useAuris } from '@auris/nextjs'
 
export default function DashboardPage() {
  const { user, isLoading } = useUser()
  const { isAuthenticated } = useAuris()
 
  if (isLoading) return <p>Chargement...</p>
  if (!isAuthenticated) return <p>Tu n'es pas authentifié.</p>
 
  return (
    <div>
      <h1>Bienvenue, {user?.firstName ?? user?.email}</h1>
      <p>Email : {user?.email}</p>
      <p>Rôles : {user?.roles?.join(', ')}</p>
    </div>
  )
}

Étape 7 : Ajoute un Bouton de Déconnexion

'use client'
import { useAuris } from '@auris/nextjs'
 
export function LogoutButton() {
  const { logout } = useAuris()
  return (
    <button onClick={() => logout()}>
      {/* Gérez la redirection post-déconnexion dans votre routeur */}
      Se déconnecter
    </button>
  )
}

Variables d’Environnement

# .env.local
 
# Côté client : utilisé par AurisProvider dans le bundle du navigateur
NEXT_PUBLIC_AURIS_DOMAIN=https://auth.votre-domaine.com
NEXT_PUBLIC_AURIS_CLIENT_ID=votre_client_id
 
# Côté serveur : utilisé par aurisMiddleware() et getSession(config) — jamais exposé au navigateur
AURIS_DOMAIN=https://auth.votre-domaine.com
AURIS_CLIENT_ID=votre_client_id
 
# Uniquement pour les clients M2M côté serveur (ne jamais exposer dans le navigateur)
AURIS_CLIENT_SECRET=votre_client_secret

Les variables d’environnement avec le préfixe NEXT_PUBLIC_ sont intégrées dans le bundle du navigateur et sont publiques. Seuls domain et clientId devraient être publics. N’expose jamais AURIS_CLIENT_SECRET avec un préfixe NEXT_PUBLIC_.

Prochaines Étapes

Architecture