> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Découvrez comment créer des modèles de page de connexion pour l’expérience Universal Login.
# Personnaliser les modèles de page de Universal Login
export const AuthCodeGroup = ({children, dropdown}) => {
const [processedChildren, setProcessedChildren] = useState(children);
useEffect(() => {
let unsubscribe = null;
function init() {
unsubscribe = window.autorun(() => {
const processChildren = node => {
if (typeof node === "string") {
let processedNode = node;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
processedNode = processedNode.replaceAll(new RegExp(escapedKey, "g"), value);
}
return processedNode;
} else if (Array.isArray(node)) {
return node.map(processChildren);
} else if (node && node.props && node.props.children) {
return {
...node,
props: {
...node.props,
children: processChildren(node.props.children)
}
};
}
return node;
};
setProcessedChildren(processChildren(children));
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
return {processedChildren};
};
export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
const [displayText, setDisplayText] = useState(children);
const [copyText, setCopyText] = useState(children);
const wrapperRef = React.useRef(null);
useEffect(() => {
let unsubscribe = null;
function init() {
if (!window.autorun || !window.rootStore) {
return;
}
unsubscribe = window.autorun(() => {
let processedChildrenForDisplay = children;
let processedChildrenForCopy = children;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
let displayValue = value;
if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
displayValue = value.substring(0, 3) + "*****MASKED*****";
}
processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
}
setDisplayText(processedChildrenForDisplay);
setCopyText(processedChildrenForCopy);
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
useEffect(() => {
if (!wrapperRef.current) return;
const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
let isOverriding = false;
const handleClick = e => {
const button = e.target.closest('[data-testid="copy-code-button"]');
if (!button || !wrapperRef.current.contains(button)) return;
isOverriding = true;
navigator.clipboard.writeText = text => {
if (isOverriding) {
isOverriding = false;
navigator.clipboard.writeText = originalWriteText;
return originalWriteText(copyText);
}
return originalWriteText(text);
};
setTimeout(() => {
if (isOverriding) {
isOverriding = false;
navigator.clipboard.writeText = originalWriteText;
}
}, 100);
};
const wrapper = wrapperRef.current;
wrapper.addEventListener('click', handleClick, true);
return () => {
wrapper.removeEventListener('click', handleClick, true);
if (navigator.clipboard.writeText !== originalWriteText) {
navigator.clipboard.writeText = originalWriteText;
}
};
}, [copyText]);
return
{displayText}
;
};
Vous pouvez personnaliser les pages de Universal Login en fournissant un modèle de page créé avec le [langage de gabarits Liquid](https://shopify.github.io/liquid/basics/introduction/). Avec les modèles de page, vous pouvez définir le contenu affiché autour des invites d’Universal Login, comme la boîte de connexion ou une demande de MFA. Puisqu’un même modèle de page est utilisé pour toutes les pages du flux de connexion, cette méthode de personnalisation vous permet de créer facilement une expérience cohérente et fidèle à votre marque pour les utilisateurs.
Pour utiliser des modèles de page personnalisés, vous devez configurer un [domaine personnalisé](/fr-CA/docs/customize/custom-domains) pour votre locataire. De plus, vous ne pouvez mettre à jour les modèles de page d’Universal Login qu’avec la [Management API](https://auth0.com/docs/api/management/v2).
Le terme `prompt` désigne une étape précise du flux de connexion, comme la page d’inscription ou une demande MFA. Les variables et les exemples de code de cette page peuvent utiliser le terme `prompt` ou le terme `widget`. Bien que ces termes soient synonymes dans le contexte d’Universal Login, ils ne sont **pas** interchangeables dans votre code. Pour que la personnalisation fonctionne correctement, vérifiez que vous utilisez le terme approprié indiqué pour tous les éléments que vous ajoutez à votre code.
## Exigences relatives au modèle de page
Lorsque vous créez un modèle de page pour Universal Login, vous devez inclure les balises suivantes :
| Balise | Description |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `auth0:widget` | Contient le HTML de l’invite affichée sur chaque page du flux de connexion, comme la page de connexion ou la page de réinitialisation du mot de passe |
| `auth0:head` | Contient les balises requises pour le rendu de l’invite |
Pour centrer l’invite sur la page, ajoutez `class="_widget-auto-layout"` à l’élément ``. Vous pouvez omettre cet attribut pour positionner l’invite manuellement au besoin.
**Limites du modèle de page :**
* Les noms de classe CSS changent chaque fois qu’Auth0 compile le projet. Le CSS personnalisé qui cible ces classes cessera de fonctionner à chaque nouvelle compilation.
* La structure HTML des pages Universal Login peut changer. Évitez les personnalisations qui dépendent de la structure HTML afin d’éviter toute interruption.
Pour en savoir plus, consultez [la personnalisation CSS](#css-customization).
##### Exemple de modèle :
L’exemple suivant illustre le modèle de page Universal Login le plus simple que vous puissiez créer avec les balises requises :
```liquid lines theme={null}
{% assign resolved_dir = dir | default: "auto" %}
{%- auth0:head -%}
{%- auth0:widget -%}
```
Si vous utilisez Storybook pour afficher votre modèle, sachez que la balise `