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
buildscript {
dependencies {
classpath("com.google.gms:google-services:4.3.15")
}
repositories {
google()
mavenCentral()
}
}
plugins {
id("com.android.application")
id("kotlin-android")
id("dev.flutter.flutter-gradle-plugin")
id("com.google.gms.google-services")
}
android {
ndkVersion = "27.0.12077973"
// ... le reste de ta configuration Android
}
dependencies:
firebase_core: ^2.0.0
cloud_firestore: ^4.0.0
flutter:
sdk: flutter
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(MyApp());
}
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'home_page.dart';
import 'login_page.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: StreamBuilder<User?>(
stream: FirebaseAuth.instance.authStateChanges(),
builder: (context, snapshot) {
if (snapshot.hasData && snapshot.data != null) {
return const HomePage(title: "titre demo flutter");
} else if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(child: CircularProgressIndicator());
}
return const LoginPage(title: "titre demo flutter");
},
),
);
}
}
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final emailController = TextEditingController();
final passwordController = TextEditingController();
String errorMessage = '';
Future<void> signIn() async {
try {
await FirebaseAuth.instance.signInWithEmailAndPassword(
email: emailController.text.trim(),
password: passwordController.text.trim(),
);
Navigator.pushReplacement(context, MaterialPageRoute(
builder: (_) => HomePage(),
));
} catch (e) {
setState(() => errorMessage = e.toString());
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Connexion')),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
TextField(controller: emailController, decoration: InputDecoration(labelText: 'Email')),
TextField(controller: passwordController, obscureText: true, decoration: InputDecoration(labelText: 'Mot de passe')),
ElevatedButton(onPressed: signIn, child: Text("Se connecter")),
if (errorMessage.isNotEmpty) Text(errorMessage, style: TextStyle(color: Colors.red))
],
),
),
);
}
}
class HomePage extends StatelessWidget {
final user = FirebaseAuth.instance.currentUser;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Bienvenue")),
body: Center(child: Text("Bonjour ${user?.email}!")),
);
}
}
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
const LoginPage({super.key, required this.title});
final String title;
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final emailController = TextEditingController();
final passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Form(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextFormField(
controller: emailController,
decoration: const InputDecoration(hintText: "Email"),
),
TextFormField(
controller: passwordController,
obscureText: true,
decoration: const InputDecoration(hintText: "Password"),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
if (emailController.text.isNotEmpty &&
passwordController.text.length > 6) {
login();
}
},
child: const Text("Connexion"),
),
TextButton(
onPressed: () async {
final auth = FirebaseAuth.instance;
try {
await auth.createUserWithEmailAndPassword(
email: emailController.text,
password: passwordController.text,
);
} catch (e) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Erreur: $e')),
);
}
},
child: const Text("Inscription"),
),
],
),
),
),
),
);
}
Future<void> login() async {
final auth = FirebaseAuth.instance;
try {
await auth.signInWithEmailAndPassword(
email: emailController.text,
password: passwordController.text,
);
} catch (e) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Erreur de connexion: $e')),
);
}
}
}
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key, required this.title});
final String title;
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text("Page d'accueil"),
ElevatedButton(
onPressed: () async {
await FirebaseAuth.instance.signOut();
},
child: const Text("Déconnexion"),
),
],
),
),
);
}
}