Skip to Content

Login Hébergé (Authorization Code + PKCE)

La façon la plus simple et la plus sécurisée d’authentifier les utilisateurs avec Auris est d’utiliser la Hosted Login Page — une interface utilisateur d’authentification entièrement gérée, hébergée sur Auris. Redirige les utilisateurs vers Auris pour la connexion, reçois un code d’autorisation dans le callback, et échange-le contre des tokens via le flux OAuth2 Authorization Code avec PKCE.

Cette approche t’évite de gérer des formulaires de connexion, des mots de passe, des flux MFA ou des mises à jour de sécurité : tout est géré par Auris.


Comment ça Fonctionne

Le flux Authorization Code + PKCE suit ces étapes :

  1. Ton app génère un code_verifier aléatoire et son code_challenge (SHA-256)
  2. Redirige l’utilisateur vers l’endpoint d’autorisation d’Auris avec le code_challenge
  3. L’utilisateur s’authentifie sur Auris (connexion, MFA, consentement)
  4. Auris redirige vers ton redirect_uri avec un code à usage unique
  5. Ton backend échange le code + code_verifier original contre les tokens
  6. Auris vérifie le code_verifier contre le code_challenge et retourne access token, refresh token et ID token

Configuration dans la Console

Crée une Application

Va dans Console → Applications → Nouvelle Application. Choisis Web Application (SPA) ou Regular Web Application (backend) selon ton architecture.

Configure les URL de Callback

Dans l’onglet Paramètres, ajoute ton URL de callback à la liste des URL de Redirection Autorisées :

  • Développement : http://localhost:3000/api/auth/callback
  • Production : https://votreapp.com/api/auth/callback

Configure les URL de Déconnexion

Ajoute les URL de déconnexion autorisées :

  • http://localhost:3000
  • https://votreapp.com

Copie les Identifiants

Copie le Client ID depuis l’onglet Identifiants. Les applications SPA utilisent PKCE (aucun secret client nécessaire). Les apps backend nécessitent également le Client Secret.

(Optionnel) Configure le Branding

Va dans Console → Paramètres → Branding pour personnaliser le logo, les couleurs et le texte de la Hosted Login Page.


Implémentation

import { AurisClient } from '@auris/js' const auris = new AurisClient({ domain: 'auth.votredomaine.com', clientId: 'votre-client-id', redirectUri: 'http://localhost:3000/callback', scopes: ['openid', 'profile', 'email'], }) // Démarre la connexion — redirige vers la Hosted Login Page document.getElementById('login-btn').addEventListener('click', () => { auris.loginWithRedirect() }) // Dans ton handler de callback (http://localhost:3000/callback) const { tokens, user } = await auris.handleRedirectCallback() console.log('Utilisateur authentifié :', user) console.log('Access token :', tokens.accessToken)

Options de Personnalisation

Tu peux passer des paramètres optionnels à la redirection de connexion pour contrôler le comportement de la Hosted Login Page :

ParamètreTypeDescription
localestringLangue de l’interface de connexion (ex. fr, en, it)
login_hintstringPré-remplit le champ e-mail avec une adresse spécifique
promptstringlogin force une reconnexion ; none utilise la session existante sans interaction
screen_hintstringsignup ouvre directement l’écran d’inscription
connectionstringIgnore la sélection du fournisseur et utilise directement une connexion spécifique (ex. google)
auris.loginWithRedirect({ locale: 'fr', screen_hint: 'signup', login_hint: '[email protected]', })

Gestion des Tokens

Après une connexion réussie, ton app reçoit :

TokenUtilisation
Access TokenInclus dans l’en-tête Authorization: Bearer pour les appels API
ID TokenJWT avec les claims de l’utilisateur (nom, e-mail, photo, etc.)
Refresh TokenObtiens de nouveaux access tokens sans demander une nouvelle connexion

Les access tokens ont une courte durée de vie (par défaut 1 heure). Utilise le refresh token pour les renouveler silencieusement. Les SDK Auris gèrent le renouvellement automatiquement.


Variables d’Environnement

AURIS_DOMAIN=auth.votredomaine.com AURIS_CLIENT_ID=votre-client-id AURIS_CLIENT_SECRET=votre-client-secret # uniquement pour les apps backend NEXT_PUBLIC_APP_URL=https://votreapp.com

Considérations de Sécurité

  • PKCE est obligatoire pour les SPA : empêche l’interception du code d’autorisation
  • La validation du state protège contre les attaques CSRF — les SDK Auris la gèrent automatiquement
  • Les URI de redirection sont validés strictement — ajoute toutes les URL de production dans la Console
  • N’expose jamais le secret client dans le code frontend ou les bundles publics
  • Utilise HTTPS pour toutes les URL de callback en production

Guides Associés