Authentification

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 pour gérer les sessions et les données utilisateurs.

Insérer un formulaire d’authentification

Cliquez sur Composants et choisissez Authentification.

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 de rajouter de nouveaux champs utilisateur qui se créent automatiquement dans la base et visuellement dans le formulaire d’inscription.

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

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

[
  {
    "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).

L’option Conditions de communication et 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.

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. Pour ce type de personnalisation, référez-vous à l’article Session Firebase, qui explique comment créer une authentification personnalisée en mode headless.