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 :
- Ton app génère un
code_verifieraléatoire et soncode_challenge(SHA-256) - Redirige l’utilisateur vers l’endpoint d’autorisation d’Auris avec le
code_challenge - L’utilisateur s’authentifie sur Auris (connexion, MFA, consentement)
- Auris redirige vers ton
redirect_uriavec uncodeà usage unique - Ton backend échange le
code+code_verifieroriginal contre les tokens - Auris vérifie le
code_verifiercontre lecode_challengeet 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:3000https://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
JavaScript
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ètre | Type | Description |
|---|---|---|
locale | string | Langue de l’interface de connexion (ex. fr, en, it) |
login_hint | string | Pré-remplit le champ e-mail avec une adresse spécifique |
prompt | string | login force une reconnexion ; none utilise la session existante sans interaction |
screen_hint | string | signup ouvre directement l’écran d’inscription |
connection | string | Ignore 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 :
| Token | Utilisation |
|---|---|
| Access Token | Inclus dans l’en-tête Authorization: Bearer pour les appels API |
| ID Token | JWT avec les claims de l’utilisateur (nom, e-mail, photo, etc.) |
| Refresh Token | Obtiens 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.comConsidérations de Sécurité
- PKCE est obligatoire pour les SPA : empêche l’interception du code d’autorisation
- La validation du
stateprotè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
- Social Login — Ajoute Google, GitHub et d’autres fournisseurs
- Magic Link — Connexion sans mot de passe par e-mail
- SMS OTP — Authentification par code SMS
- Passkey / WebAuthn — Biométrie et clés de sécurité
- Enterprise SSO — SAML 2.0 et OIDC pour les entreprises
- Identifiants M2M — Authentification machine-to-machine