# Authentification

> Découvrez comment utiliser le composant Authentification pour afficher un formulaire d'inscription et de connexion.

https://docs.pandasuite.com/fr/essentials/components/authentication/

**Le composant Authentification est conçu pour afficher des formulaires d’inscription et de connexion dans votre application. Il offre une solution visuelle clé-en-main, idéale pour gérer l’accès des utilisateurs sans avoir à construire une interface personnalisée.**

Ce composant peut être utilisé en complément du composant [Session Firebase](https://docs.pandasuite.com/fr/essentials/components/firebase-session/) pour gérer les sessions et les données utilisateurs.

[Vidéo : Présentation du composant Authentification : afficher des formulaires d'inscription et de connexion dans une application](https://www.youtube.com/embed/YFEyiPKZ3DI?&hl=fr&cc_lang_pref=fr&cc_load_policy=1)

## Insérer un formulaire d'authentification

Cliquez sur Composants et choisissez **Authentification**.

[Image : Composant Authentification sélectionné sur l'écran Sign in ; dans ses propriétés, Session est reliée à une Session Firebase]

> **Info**
>
> Au préalable, vous devez avoir inséré un composant [Session
> Firebase](https://docs.pandasuite.com/fr/essentials/components/firebase-session/) dans votre projet.
> Associez votre composant Authentification à ce composant.

L'option **Autoriser l'inscription** permet d'activer ou non la création de nouveaux utilisateurs.

## Personnaliser les champs

L'option **Champs utilisateur avancés** vous permet d'ajouter des champs supplémentaires affichés dans le formulaire d'inscription, puis ajoutés au document utilisateur au moment de l'inscription.

Pour personnaliser les champs, cliquez sur **Champs** et ouvrez la **Vue JSON**.

Si vous devez aussi préparer la structure par défaut du document utilisateur, configurez-la dans **Données par défaut** du composant [Session Firebase](https://docs.pandasuite.com/fr/essentials/components/firebase-session/). Les valeurs saisies via les **Champs utilisateur avancés** viennent ensuite compléter cette structure au moment de l'inscription.

Voici un exemple d'ajout de champs *Company*, *Job Title*, *Phone*, *Address*, *Postcode* et d'un checkbox.

```json
[
  {
    "label": "Company",
    "placeholder": "Enter Company",
    "locale_label": {
      "fr_FR": "Société"
    },
    "id": "company",
    "fieldType": "text",
    "required": true,
    "locale_placeholder": {
      "fr_FR": "Société"
    }
  },
  {
    "label": "Job Title",
    "placeholder": "Enter Job Title",
    "locale_label": {
      "fr_FR": "Poste"
    },
    "id": "job_title",
    "fieldType": "text",
    "required": true,
    "locale_placeholder": {
      "fr_FR": "Poste"
    }
  },
  {
    "label": "Phone",
    "placeholder": "Enter Phone Number",
    "locale_label": {
      "fr_FR": "Téléphone"
    },
    "id": "phone",
    "fieldType": "text",
    "required": true,
    "locale_placeholder": {
      "fr_FR": "Téléphone"
    }
  },
  {
    "label": "Address",
    "placeholder": "Enter Address",
    "locale_label": {
      "fr_FR": "Adresse"
    },
    "id": "address",
    "fieldType": "textarea",
    "required": true,
    "locale_placeholder": {
      "fr_FR": "Adresse"
    }
  },
  {
    "label": "Postcode",
    "placeholder": "Enter Postcode",
    "locale_label": {
      "fr_FR": "Code postal"
    },
    "id": "postcode",
    "fieldType": "text",
    "required": true,
    "locale_placeholder": {
      "fr_FR": "Code postal"
    }
  },
  {
    "label": "Tick to receive email updates from Marley",
    "placeholder": "",
    "locale_label": {
      "fr_FR": "Recevoir des communications marketing"
    },
    "id": "opt_in_marketing",
    "fieldType": "checkbox",
    "required": false,
    "locale_placeholder": {
      "fr_FR": "Recevoir des communications marketing"
    }
  }
]
```

Si vous activez cette option, vous devez avoir effectué la configuration Cloud Firestore (voir l'article [Session Firebase](https://docs.pandasuite.com/fr/essentials/components/firebase-session/)).

L'option **Communications et conditions d'utilisation** ajoute une case à cocher pour la validation des conditions d'utilisation. Un nouvel événement déclencheur est exposé (**Conditions Cliquées**) sur le composant Authentification : il permet d'associer une action dans le parcours utilisateur.

## Personnaliser le style

Vous pouvez personnaliser le style CSS du formulaire en cliquant sur le bouton **Editer** de la propriété **Styles CSS**.

[Image : Éditeur CSS Styles du composant Authentification, avec des règles pour les boutons principaux, leur survol, le lien et les coins de la carte]

Si vous souhaitez aller au-delà des fonctionnalités proposées par le composant **Authentification**, il est possible de construire une interface totalement personnalisée en utilisant des composants comme le composant [Saisie de texte](https://docs.pandasuite.com/fr/essentials/components/text-input/). Pour ce type de personnalisation, y compris la connexion sans mot de passe par lien email, référez-vous à l’article [Session Firebase](https://docs.pandasuite.com/fr/essentials/components/firebase-session/), qui explique comment créer une authentification personnalisée en mode headless.