Implémenter une authentification Firebase avec Flutter
Sommaire
- 1- Objectif
- 2- Présentation
- 3- Configuration du projet
- 3.1- Étape 1 : Créer un projet Firebase
- 3.2- Étape 2 : Ajouter Firebase à ton projet Flutter
- 3.3- Créer une nouvelle application Flutter
- 3.4- Se connecter à Firebase et configurer FlutterFire CLI
- 3.5- Configurer Firebase dans le projet Flutter
- 4- Fichiers réalisés
- 4.1- Fichier main.dart
- 4.2- Créer l'interface de connexion
- 4.3- Fichier login_page.dart
- 4.4- Fichier home_page.dart
- 4.4.1- Cours Flutter
Implémenter une authentification Firebase avec Flutter
-
Objectif
- À l’issue de ce tutoriel, vous serez capable d’intégrer un système d’authentification par email et mot de passe dans une application Flutter en utilisant Firebase Authentication, avec VS Code comme environnement de développement.
- Vous apprendrez à :
- Créer et configurer un projet Firebase.
- Connecter Firebase à votre application Flutter.
- Utiliser les packages firebase_core et firebase_auth.
- Créer une interface de connexion utilisateur.
- Gérer les erreurs de connexion.
- Naviguer entre les écrans après authentification.
-
Présentation
- Firebase Authentication fournit des services back-end et des SDK faciles à utiliser pour authentifier les utilisateurs de votre application. Il prend en charge l’authentification par mot de passe, numéro de téléphone, fournisseurs d’identité fédérés populaires comme Google, Facebook et Twitter, et bien plus encore.
-
Configuration du projet
-
Étape 1 : Créer un projet Firebase
- Va sur Firebase Console
- Clique sur « Ajouter un projet »
- Donne un nom à ton projet, accepte les conditions, clique sur Continuer
- Désactive Google Analytics (facultatif) → Créer le projet
-
Étape 2 : Ajouter Firebase à ton projet Flutter
-
Créer une nouvelle application Flutter
- flutter create nom_de_votre_app
- Ouvrez le projet dans un IDE (Android Studio, VS Code…)
-
Se connecter à Firebase et configurer FlutterFire CLI
- Si ce n’est pas encore fait, installe FlutterFire CLI :
dart pub global activate flutterfire_cli
- Puis connecte-toi :
flutterfire login
- Et configure Firebase pour ce projet :
flutterfire configure
- Lors de la configuration :
- Choisis le projet Firebase existant (celui utilisé par l’app Books).
- Sélectionne Android comme plateforme.
- Entre le bon nom de package (ex: com.example.mesnotes).
- Cela génère un fichier
firebase_options.dart
dans lib/. -
Configurer Firebase dans le projet Flutter
- a. Copier le google-services.json:
- Téléchargé depuis la console Firebase (section Android).
- Colle-le dans : android/app/google-services.json
- b. Modifier android/build.gradle :
- c. Modifier android/app/build.gradle :
- d. Modifier le fichier :android/app/build.gradle.kts
- Dans ton fichier android/app/build.gradle.kts, ajoute (ou modifie) ce bloc dans android
- d. Ajouter les dépendances dans pubspec.yaml :
- e. Initialiser Firebase dans main.dart :
-
Fichiers réalisés
-
Fichier main.dart
-
Créer l’interface de connexion
- Un exemple simple dans
login_page.dart
: -
Fichier login_page.dart
-
Fichier home_page.dart