Personnaliser l'Universal Login Auth0 : branding, templates et Liquid

L'Universal Login est la page de connexion hébergée par Auth0. Personnalisez son apparence avec votre logo, vos couleurs, des templates HTML et le moteur Liquid.

Par Auth0.Expert · 2025-03-20 · 10 min de lecture

Universal Login Branding UI

Universal Login Auth0 : personnalisation complète

TL;DR

L'Universal Login Auth0 est la page de connexion hébergée par Auth0. Elle est plus sécurisée que l'Embedded Login (votre propre formulaire) et supporte le branding via le nouveau design system ou des templates HTML/Liquid.

---

Universal Login vs Embedded Login

Voici un tableau qui compare les deux approches pour la gestion des connexions dans Auth0.

| Critère | Universal Login | Embedded Login | |---------|----------------|----------------| | Sécurité | ✅ Credentials ne passent jamais par votre app | ⚠️ Credentials visibles par votre app | | SSO entre apps | ✅ Cookie session Auth0 partagé | ❌ Chaque app gère sa session | | Personnalisation | ✅ Logo, couleurs, HTML | ✅ Total (votre propre UI) | | Maintenance | ✅ Auth0 maintient | ⚠️ Vous maintenez | | MFA | ✅ Intégré | Complexe à intégrer |

Recommandation : Universal Login sauf si vous avez des exigences UX très spécifiques.

---

Branding simple (Dashboard)

Cette configuration JSON permet de personnaliser rapidement les couleurs, le logo, et la typographie de votre Universal Login directement depuis le Dashboard Auth0.

{
  "logo_url": "https://yourapp.com/logo.png",
  "favicon_url": "https://yourapp.com/favicon.ico",
  "colors": {
    "primary": "#0052CC",
    "page_background": "#F4F6F9"
  },
  "font": {
    "url": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
  }
}

---

Template HTML complet

Voici comment réaliser une personnalisation avancée grâce à un template HTML modifiable dans le Dashboard Auth0. Ce template vous permet de contrôler le rendu et l’intégration du widget Auth0 en utilisant du HTML et du CSS.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>{{ prompt.screen_texts.page_title }}</title>
  <style>
    body {
      font-family: 'Inter', sans-serif;
      background: #0F0F1A;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }
    .login-container {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      padding: 40px;
      width: 360px;
      backdrop-filter: blur(10px);
    }
    .logo {
      text-align: center;
      margin-bottom: 32px;
    }
    .logo img {
      height: 40px;
    }
  </style>
</head>
<body>
  <div class="login-container">
    <div class="logo">
      <img src="https://yourapp.com/logo.png" alt="YourApp" />
    </div>
    {%- auth0:widget -%}
  </div>
</body>
</html>

Ce template met en page la fenêtre de connexion avec un style moderne et intègre le widget Auth0.

---

Variables Liquid disponibles

Ce bloc présente les variables Liquid utilisables dans vos templates pour adapter dynamiquement le contenu à vos utilisateurs et applications.

{{ tenant.name }}           <!-- Nom du tenant -->
{{ client.name }}           <!-- Nom de l'application -->
{{ client.logo_uri }}       <!-- Logo de l'application -->
{{ prompt.screen_texts }}   <!-- Textes de l'écran courant -->
{{ branding.settings }}     <!-- Paramètres de branding -->

<!-- Condition sur le prompt actuel -->
{% if prompt.name == 'login' %}
  <p>Connectez-vous à {{ client.name }}</p>
{% elsif prompt.name == 'signup' %}
  <p>Créez votre compte</p>
{% endif %}

---

Internationalisation

Pour adapter la langue de l’interface en fonction de l’utilisateur, cet exemple montre comment agir via une Action Auth0. Il est également possible de forcer la langue dans l’URL.

// Action : changer la langue en fonction de l'utilisateur
exports.onExecutePostLogin = async (event, api) => {
  // La langue est détectée automatiquement via Accept-Language
  // Forcer une langue spécifique :
  // (dans l'URL : ?ui_locales=fr)
};

Auth0 supporte nativement : EN, FR, DE, ES, IT, PT, JA, KO, ZH.

Pour personnaliser les textes affichés dans les écrans de connexion, modifiez les champs ci-dessous dans le Dashboard Auth0.

{
  "login": {
    "title": "Bienvenue chez YourApp",
    "description": "Connectez-vous pour accéder à votre espace"
  }
}

---

Email Templates

Cette section liste les différents types d’emails automatiques qu’Auth0 peut envoyer selon divers événements de sécurité ou d’identification.

| Template | Déclencheur | |----------|-------------| | Verify Email | Inscription | | Reset Password | Mot de passe oublié | | Welcome | Premier login | | Blocked Account | Trop d'échecs | | Enrollment Code | MFA Guardian | | MFA OTP | Code OTP par email | | Change Password | Confirmation changement | | Invitation | Organization invite |

---

> 🎨 Branding Auth0 clé en main : nous créons une expérience de connexion 100% à votre image en 3 jours ouvrés, compatible mobile et multi-langue.

📧 [email protected]

Autres articles