Firebase est une plateforme de développement créée par Google qui simplifie la création et la gestion du backend d’une application, comme les bases de données, l’authentification, et le stockage. FlutterFlow, quant à lui, est un outil visuel pour créer des applications avec Flutter, en facilitant la transition des prototypes aux applications fonctionnelles sans nécessiter une expertise approfondie en Dart.
Pourquoi choisir Firebase et FlutterFlow ?
- Intégration simple et rapide : Grâce aux SDK Firebase intégrés, configurer des services backend comme l’authentification ou la synchronisation des données devient un jeu d’enfant avec FlutterFlow.
- Développement accéléré : FlutterFlow permet de construire visuellement des applications, réduisant le temps de développement et les erreurs potentielles.
- Scalabilité facilitée : Firebase évolue avec ton application, permettant une gestion efficace des ressources sans surcharger le développeur.
Configuration du projet FlutterFlow
Pour configurer l’authentification Firebase avec FlutterFlow, la première étape est de créer un projet FlutterFlow. Pour cela, tu dois aller dans ton interface FlutterFlow :
- Crée un projet
- Gère le nom du package (pour le package com.NOM-DE-VOTRE-ENTREPRISE.NOM-DE-VOTRE-PROJET)
- Coche « Setup Firebase »
- Clique sur « Next Step »
Configuration de Firebase avec FlutterFlow
Tu vas arriver sur l’interface de setup Firebase et tu auras deux possibilités pour configurer Firebase.
La première est la configuration automatique, qui a été mise en ligne assez récemement par FlutterFlow, et qui va se charger de créer un projet Firebase et de le connecter à FlutterFlow.
La seconde, si tu as déjà un projet Firebase créé, consiste à le connecter via son ID.
- Coche « Enable authentication »
- Coche « Create user collection »
- Clique sur « Create project »
- Choisis l’entry page qui correspond à la page quand l’utilisateur n’est pas connecté (je te conseille de choisir un template)
- Choisis la page logged in qui correspond à la page où l’utilisateur va être redirigé quand il sera connecté
Configuration automatique FlutterFlow
Sur FlutterFlow
- Choisis un nom de projet
- Choisis une région
- Connecte-toi avec Google
- Choisis la page de connexion (template) et la page une fois connecté
- Connecte-toi avec Google et sélectionne ton compte Google
6. Ouvre le projet Firebase en cliquant sur « Open Firebase Console ».
7. Active l’authentification Firebase en allant dans l’onglet Authentification et clique sur « Commencer ».
Configuration manuelle
Du côté Firebase
- Crée un projet Firebase
- Ajoute firebase@flutterflow.io dans les utilisateurs Firebase
- Active l’authentification et la base de données Firestore
Du côté FlutterFlow
- Ajoute l’ID de ton projet Firebase
- Active l’authentification dans Paramètres > Authentification
- Choisis « Entry page » et « Logged page »
Les différents types de fournisseurs d’authentification Firebase
L’authentification Firebase t’offre plusieurs types de fournisseurs d’authentification. Dans notre exemple, nous allons utiliser le plus connu, c’est-à-dire email et mot de passe, mais tu peux en utiliser d’autres selon tes besoins.
Les fournisseurs d’authentification natifs de Firebase
- L’adresse email/mot de passe
- L’authentification par numéro de téléphone
- L’authentification Anonyme
Les autres fournisseurs d’authentification de Firebase
- Google Sign-In
- Play Jeux
- Game Center
- Apple
- GitHub
- Microsoft
- Yahoo
Les fournisseurs d’authentification personnalisés
- OpenID Connect
- SAML
Configuration de l’authentification email/mot de passe
- Choisis le fournisseur d’authentification par email et mot de passe.
Ce fournisseur t’offre deux choix :
- Fonctionner avec un mot de passe
- Fonctionner avec un lien qui sera envoyé à chaque fois à l’adresse mail de connexion. Dans notre exemple, nous allons choisir le mot de passe.
2. Active la base de données, car elle servira à créer un document utilisateurs.
3. Génère les fichiers de configuration en allant dans Paramètres > Firebase.
4. Déploie les règles Firebase.
Configuration des pages d’authentification avec email et mot de passe
Maintenant que l’authentification est correctement configurée du côté du back-end, nous allons créer les interfaces utilisateurs pour implémenter cette fonctionnalité dans l’application.
Configuration de la page sign-up
- Rends-toi sur la page que tu as choisie pour l’authentification sign-up (attention à ne jamais appeler une page « Auth » car cela créerait un conflit avec FlutterFlow).
- Va sur la table « Sign Up ».
3. Ajoute l’action « Create Account ».
4. Choisis « Email » en tant que provider ou le provider de ton choix.
5. Remplis les champs « Email Field », « Password Field » et « Confirm Password Field » avec les champs de l’interface qui sont automatiquement appelés par FlutterFlow.
6. Coche la case « Create Document », ce qui va permettre de créer un document utilisateur.
Attention à bien comprendre que le document utilisateur et le compte d’authentification sont deux choses différentes. Quand tu vas cocher la case, FlutterFlow va cloner l’email pour créer un document utilisateur dans lequel tu pourras ajouter des champs supplémentaires tels que l’adresse, etc. Mais si tu changes l’email de l’utilisateur, l’email d’authentification ne changera pas forcément. Pour cela, il faudra utiliser l’action « Update Email ».
- Ajoute des champs si tu as besoin d’en inclure d’autres directement. Dans mon cas, je n’en ai pas besoin.
- Coche « Navigate Automatically » si tu souhaites que FlutterFlow redirige automatiquement vers la page « Logged » après la connexion.
Configuration de la page « Sign In »
- Rends-toi sur la page d’authentification sign-in (attention à ne jamais appeler une page « Auth » car cela créerait un conflit avec FlutterFlow).
- Va sur la table « Sign In ».
- Ajoute l’action « Log In ».
4. Choisis « Email » en tant que provider ou le provider de ton choix.
5. Remplis « Email Field » et « Password Field » avec les champs de l’interface qui sont automatiquement appelés par FlutterFlow.
6. Coche « Navigate Automatically » si tu souhaites que FlutterFlow redirige automatiquement vers la page « Logged ».
Il est temps de tester ton application !
Gestion des paramètres d’authentification
Une fois ton système d’authentification avec Firebase connecté à ton projet FlutterFlow, tu pourras toujours par la suite venir mettre à jour tes configurations dans les deux pages de paramètres.
La première se trouve dans Paramètres > Authentification, où tu peux modifier le type d’authentification actuellement configuré sur Firebase. Ce type peut également être Supabase ou une authentification personnalisée. Il est aussi possible de modifier la page d’entrée, visible lorsqu’on est déconnecté, et la page de connexion, sur laquelle l’utilisateur est redirigé une fois la connexion validée. Tu peux également gérer les authentifications spécifiques pour Google, Facebook et Apple.
La seconde page de paramètres pour l’authentification se trouve dans Base de données > Firestore Settings, où tu peux modifier la collection dans laquelle un nouveau document est créé lorsqu’un utilisateur s’inscrit. En pratique, il n’est presque jamais nécessaire de modifier cette configuration. Dans la quasi-totalité des applications, le document créé correspond au document utilisateur.
Firebase est un service back-end puissant et son outil d’authentification te permet d’intégrer une multitude de providers de façon simple, rapide et sécurisée. Et si tu as besoin d’aide, n’hésite pas à me contacter ! 🙂
