# Session Firebase

> Découvrez comment utiliser le composant Session Firebase pour gérer les connexions et sessions utilisateur dans votre application.

https://docs.pandasuite.com/fr/essentials/components/firebase-session/

**Le composant Session Firebase vous permet de gérer les connexions et les sessions utilisateur dans votre application PandaSuite. Avec ce composant, vous pouvez facilement intégrer l’authentification Firebase et associer des données spécifiques à chaque utilisateur, comme un score, une progression ou un type d’accès.**

Ce composant peut être utilisé avec ou sans interface utilisateur selon vos besoins.

## Activer l'authentification via Firebase

[Firebase](https://firebase.google.com/) est la plateforme mobile de Google qui permet la création d'un backend scalable et performant, dédiée principalement aux applications mobiles. Le backend représente la partie serveur de l'application qui gère des responsabilités comme l'authentification, le stockage, les notifications, etc...

> **Info**
>
> Il est nécessaire d'avoir créé un projet Firebase pour votre application.
> Suivez [ce tutoriel](https://docs.pandasuite.com/fr/essentials/integrations/create-a-firebase-project/)
> pour créer un nouveau projet, puis suivez les instructions ci-dessous.

### Activer la connexion email / mot de passe

Ajoutez une méthode d'authentification pour votre application.

- Rendez-vous dans **Authentication** et cliquez sur **Commencer**.
- Dans l'onglet **Sign-in method**, sélectionnez **Adresse email/Mot de passe** et cliquez sur **Activer**.
- Si vous souhaitez proposer un parcours sans mot de passe en mode headless, activez aussi **Email link (passwordless sign-in)** dans le même écran.

[Image : Onglet Sign-in method de Firebase : Adresse email/Mot de passe et Email link (passwordless sign-in) sont tous deux activés]

Vous avez désormais une procédure d'authentification via adresse e-mail et mot de passe. Si **Email link (passwordless sign-in)** est également activé, le composant **Session Firebase** peut aussi demander et finaliser une connexion sans mot de passe depuis un parcours personnalisé.

### Autoriser le domaine de votre app

Firebase n'envoie les actions email que vers des domaines autorisés.

- Rendez-vous dans **Authentication** puis ouvrez **Settings**.
- Dans **Authorized domains**, ajoutez le domaine utilisé par votre web app PandaSuite ou votre page d'atterrissage.
- Vérifiez que le domaine utilisé dans **Continue URL** figure bien dans cette liste avant de demander une connexion par lien email.

[Image : Authorized domains dans les Settings d'Authentication de Firebase, dont localhost, viewer.pandasuite.com et app.pandasuite.com]

> **Info**
>
> `localhost` est généralement disponible pour les tests. En production, ajoutez
> chaque domaine ou sous-domaine HTTPS séparément.

### Configurer Cloud Firestore

Cloud Firestore est une base de données spécifique à Firebase. Elle vous permet notamment d'associer des données à vos utilisateurs.

- Rendez-vous dans l'onglet **Firestore** **Database**. Cliquez sur **Créer une base de données**.

[Image : Page Cloud Firestore de la console Firebase, avec le bouton Créer une base de données qui lance la configuration]

- Choisissez le mode **Commencer en mode test**.

[Image : Fenêtre Créer une base de données de Firebase : Commencer en mode test coché, avec l'avertissement d'un accès ouvert 30 jours]

[Image : Nouvelle base Cloud Firestore, encore vide, dans la console Firebase, avec l'onglet Règles utilisé à l'étape suivante]

- Rendez-vous dans l'onglet **Règles** : il vous faut mettre à jour les règles de sécurité afin de ne pas être bloqué après 30 jours. Copiez-collez le code ci-dessous :

```plaintext
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read, write: if request.auth.uid == userId
    }
  }
}
```

[Image : Onglet Règles de Cloud Firestore avec les règles collées : chaque utilisateur ne lit et n'écrit que son document dans users]

Votre configuration Cloud Firestore est prête.

## Configurer le composant Session Firebase

Cliquez sur Composants et choisissez **Session Firebase**. Pour que le composant soit accessible dans toute l'application, insérez-le au niveau du projet.

Dans PandaSuite Studio, l'éditeur du composant comprend deux onglets utiles :

- **Test Session** : connectez-vous avec un utilisateur Firebase pour inspecter le document Cloud Firestore chargé.
- **Données par défaut** : préparez la structure de données qui doit être créée pour chaque nouvel utilisateur.

### ID du projet et clé API

Dans les propriétés, copiez/collez l’**ID du projet** et la **Clé API** depuis la console Firebase.

[Image : Composant Session Firebase au niveau du projet dans PandaSuite Studio : ses champs Clé API et ID du projet, encore vides, sont encadrés]

Ces informations sont accessibles depuis les **Paramètres** du projet sur Firebase.

[Image : Menu de l'engrenage à côté de Vue d'ensemble du projet dans la console Firebase, ouvert sur Paramètres du projet]

[Image : Paramètres généraux du projet Firebase, avec l'ID du projet et la Clé API Web entourés en rouge, à copier dans PandaSuite]

### Choisir l'interface de connexion

Après avoir configuré **Session Firebase**, choisissez comment les utilisateurs démarrent leur session :

- Utilisez le composant [Authentification](https://docs.pandasuite.com/fr/essentials/components/authentication/) si vous voulez le formulaire prêt à l'emploi de PandaSuite pour l'inscription et la connexion par email/mot de passe. Il se connecte à **Session Firebase**, mais il ne demande pas et ne finalise pas la connexion sans mot de passe par lien email.
- Utilisez **Session Firebase** en mode headless si vous avez besoin d'une interface personnalisée, de boutons personnalisés ou d'une connexion sans mot de passe par lien email. Dans ce cas, construisez vous-même l'écran avec des composants comme [Saisie de texte](https://docs.pandasuite.com/fr/essentials/components/text-input/), des boutons et du texte, puis déclenchez les actions de **Session Firebase**.

### Forcer l'authentification après (heures)

Cette option indique le nombre d'heures (après l'identification) pendant lesquelles la session reste valide, même sans connexion internet. Au-delà de ce nombre d'heures, une connexion internet sera nécessaire pour continuer. Lorsque la session est toujours valide, l'utilisateur n'aura pas besoin de se reconnecter. Par défaut, la valeur 0 crée une session infinie.

### Forcer la vérification d'email

Il s'agit d'une étape supplémentaire de validation de l'email dans laquelle la personne reçoit un email avec un lien web de validation. Cette étape est nécessaire avant d'accéder à l'application.

> **Info**
>
> Firebase envoie lui-même ces emails de compte, comme le message de
> vérification. Pour les personnaliser, ouvrez l'onglet **Templates** sous
> **Authentication** dans la console Firebase, où vous pouvez définir le nom de
> l'expéditeur, l'adresse de réponse, l'objet et la langue. La mise en page du
> corps reste en grande partie figée ; pour des emails entièrement personnalisés,
> vous devez les envoyer depuis votre propre service d'emails.

### Données utilisateur par défaut

Ouvrez l'onglet **Données par défaut** pour définir le document créé dans Cloud Firestore pour chaque nouvel utilisateur lors de son inscription.

Utilisez cet onglet pour préparer des objets imbriqués, des tableaux ou des collections PandaSuite avant la première connexion. Dans Studio, il peut aussi réutiliser des données déjà disponibles dans votre projet, notamment des collections. Cela facilite l'initialisation de données utilisateur structurées sans saisir manuellement chaque identifiant.

Les valeurs ajoutées ensuite au moment de l'inscription, comme **Traits** en mode headless ou les **Champs utilisateur avancés** du composant [Authentification](https://docs.pandasuite.com/fr/essentials/components/authentication/), viennent compléter cette structure par défaut.

Lorsqu'un utilisateur finalise une connexion par lien email en mode headless, PandaSuite essaie aussi de fusionner cette structure par défaut et d'enregistrer l'email de l'utilisateur dans le même document. Si Cloud Firestore ne peut pas écrire ce document, la connexion peut tout de même réussir et l'événement **Erreur de modification de données** est déclenché.

Pour mettre à jour ensuite ce document utilisateur depuis l'app, consultez [Sauvegarder des données utilisateurs dans Firebase](https://docs.pandasuite.com/fr/essentials/integrations/save-user-data-in-firebase/).

Lorsqu'un nouvel utilisateur s'inscrit, vous devez ensuite retrouver cette structure par défaut dans son document Cloud Firestore.

## Déclencher une action si l'utilisateur est connecté ou non

Pour déclencher une action en fonction de l'état de la session, sélectionnez le composant Session Firebase et ajoutez une action. Choisissez parmi les événements déclencheurs :

- **Utilisateur connecté :** la session utilisateur est valide. Ce déclencheur permet par exemple de passer à l'écran suivant si l'utilisateur est connecté.
- **Utilisateur Déconnecté :** la session utilisateur est expirée. Il vous permet par exemple de rediriger l'utilisateur vers l'écran d'authentification.

[Image : Déclencheurs du composant Session Firebase : Utilisateur connecté et Utilisateur déconnecté sont encadrés, avant les déclencheurs d'erreur]

Vous pouvez également déconnecter l'utilisateur : **Agir sur un composant** > **Session Firebase** > **Se déconnecter**.

## Gérer vos utilisateurs

Vous pouvez gérer vos utilisateurs directement sur Firebase.

Rendez-vous dans  **Authentication** et dans l'onglet **Utilisateurs** pour retrouver votre base d'utilisateurs. Vous avez accès aux données suivantes : l'email, la date de création, la date de dernière connexion et son identifiant unique (ID utilisateur).

Vous pouvez ajouter manuellement un ou plusieurs utilisateurs.

> **Info**
>
> Vous pouvez également associer des données à vos utilisateurs : un score, un
> niveau de progression, un profil... Définissez ces données dans PandaSuite
> Studio et retrouvez-les dans votre base de données Cloud Firestore. En savoir
> plus : [Associer une donnée à un utilisateur via Cloud
> Firestore](https://docs.pandasuite.com/fr/essentials/integrations/save-user-data-in-firebase/)

## Gestion des sessions sans interface utilisateur (utilisation headless)

Si vous souhaitez concevoir une interface entièrement personnalisée, vous pouvez utiliser  **Session Firebase** sans interface visuelle. Cette utilisation headless vous permet de gérer les sessions en arrière-plan tout en construisant une UI sur mesure.

Fonctionnalités disponibles en utilisation headless :

- **Authentification par email et mot de passe :** vous pouvez intégrer des champs [Saisie de texte](https://docs.pandasuite.com/fr/essentials/components/text-input/) pour saisir les identifiants, puis déclencher **Agir sur un composant** > **Session Firebase** > **Se connecter avec email et mot de passe** ou **S'inscrire avec email et mot de passe**.

[Image : Action Se connecter avec email et mot de passe au clic sur un bouton : email et mot de passe liés à deux champs Saisie de texte]

- **Connexion sans mot de passe par lien email :**

  Ce parcours n'utilise pas le composant [Authentification](https://docs.pandasuite.com/fr/essentials/components/authentication/). Construisez un petit écran avec un composant [Saisie de texte](https://docs.pandasuite.com/fr/essentials/components/text-input/) pour l'email, un bouton pour demander le lien et une zone de message pour guider l'utilisateur.

  **Étape 1. Demander le lien :** demandez l'email de l'utilisateur, puis déclenchez **Agir sur un composant** > **Session Firebase** > **Demander une connexion par lien email**. Renseignez **Email** et une **URL de continuation** autorisée.

  **Étape 2. Finaliser la connexion :** quand le lien rouvre votre app, déclenchez **Agir sur un composant** > **Session Firebase** > **Finaliser la connexion par lien email** avec le même email et l'URL complète de callback.

  Dans une web app, vous pouvez récupérer cette URL via data binding : **Projet** → **Contexte** → **Lancement** → **URL**. Si le lien est ouvert sur un autre appareil, demandez à l'utilisateur de ressaisir le même email avant de finaliser la connexion. Utilisez **Lien email demandé**, **Erreur de demande de lien email** et **Erreur de connexion** pour guider l'utilisateur dans le parcours.

- **Connexion avec un jeton personnalisé** : idéal pour des systèmes où le backend génère des jetons sécurisés. Déclenchez **Agir sur un composant** > **Session Firebase** > **Se connecter avec un jeton personnalisé**.

[Image : Menu Agir sur un composant de Session Firebase, avec l'action Se connecter avec un jeton personnalisé en surbrillance]

- **Inscription avec des champs personnalisés** : si vous créez votre propre parcours d'inscription en mode headless, le champ **Traits** permet de transmettre des valeurs supplémentaires au moment de l'inscription. Utilisez-le surtout dans les cas avancés où vous devez enrichir le document utilisateur en dehors du formulaire standard [Authentification](https://docs.pandasuite.com/fr/essentials/components/authentication/).

[Image : Action S'inscrire avec email et mot de passe : identifiants liés aux champs de saisie, plus un champ Traits pour d'autres valeurs]

- **Gestion des erreurs :** lorsqu’une erreur survient, comme un email mal formaté, l’événement **Erreur de connexion** ou **Erreur d'inscription** capture le message d’erreur. Vous pouvez stocker ce message dans une variable et l’afficher via un composant [Condition](https://docs.pandasuite.com/fr/essentials/components/condition/) ou Texte.

[Image : Déclencheurs de Session Firebase, dont Utilisateur connecté, Utilisateur déconnecté, Erreur de connexion et Erreur d'inscription]