À quoi sert Firebase Auth ?
Firebase Auth est un outil puissant de la suite Firebase, conçu pour gérer les informations d’identification de vos utilisateurs de manière sécurisée. Voici ce que vous pouvez accomplir avec Firebase Auth :
- Récupérer les informations de connexion des utilisateurs : Collectez les emails et mots de passe de vos utilisateurs en toute sécurité ;
- Stocker les informations de manière sécurisée : Les données d’identification sont chiffrées et protégées contre les accès non autorisés ;
- Attribuer un identifiant unique à chaque utilisateur : Chaque utilisateur reçoit un identifiant unique, facilitant la gestion et le suivi ;
- Permettre aux utilisateurs de s’identifier et d’ouvrir leur propre session : Offrez à vos utilisateurs la possibilité de se connecter facilement à votre application avec leurs identifiants.
Un autre avantage de Firebase Auth est qu’il supporte différentes méthodes d’authentification, y comprenant l’authentification par email et mot de passe, mais via des fournisseurs tiers comme Google, Facebook et Twitter, ainsi que l’authentification anonyme. Cela vous permet donc de choisir la méthode qui convient le mieux aux besoins de votre application et de vos utilisateurs.
Comment installer Firebase Auth sur mon application Flutter ?
Avant d’installer Firebase Auth, assurez-vous d’avoir déjà intégré Firebase à votre application Flutter. Si ce n’est pas le cas, consultez mon guide détaillé sur comment installer Firebase avec Flutter. Une fois cela faire, vous n’aurez alors plus qu’à importer le package firebase_auth dans sa dernière version (5.5.1). Pour cela vous pouvez soit :
- Lancer la commander $ flutter pub add firebase_auth dans votre terminal de commandes ;
- Copier et coller firebase_auth: ^5.5.1 dans vos dépendances, dans votre fichier pubspec.yaml.
Ajoutez la ligne d’importation suivante dans les fichiers où vous souhaitez utiliser Firebase Auth :
import 'package:firebase_auth/firebase_auth.dart';Créer un utilisateur
Voici les étapes à suivre pour créer un utilisateur dans votre base de donnée Firebase, en récupérant ses données depuis votre application Flutter :
1. Ajouter les permissions dans Firebase
La première étape pour installer Firebase à votre application Flutter consiste à configurer les permissions dans votre projet :
- Rendez-vous dans votre console Firebase, puis allez dans la section Authentification. Cliquez sur “Tous les produits” dans le menu à gauche, puis sélectionnez “Authentification” et cliquez sur “Commencer”.
- Choisissez “Adresse e-mail/Mot de passe” comme méthode de connexion. Cette méthode est simple à mettre en place et idéale pour commencer.
- Une fois cette méthode activée, vous pourrez stocker les informations des utilisateurs, telles que leur adresse mail et mot de passe, associées à un identifiant unique.
2. Créer des champs d’inscription dans votre application
Pour collecter les informations d’inscription (email, mot de passe, nom, prénom, confirmation du mot de passe), vous devez ajouter des champs de texte dans votre interface utilisateur. Voici comment procéder :
- Créez deux variables de type
TextEditingController()pour gérer les champs de texte. - Ajoutez les champs de texte dans votre UI pour que l’utilisateur puisse saisir ses informations. Voici un exemple de code pour vous aider à démarrer, que vous pouvez adapter à votre design et à vos besoins :
Je vous fournis ici un exemple que vous pouvez utiliser et modifier selon vos besoins :
class InputSection extends StatefulWidget {
InputSection({super.key});
@override
State<InputSection> createState() => _InputSectionState();
}
class _InputSectionState extends State<InputSection> {
final TextEditingController emailField = TextEditingController();
@override
Widget build(BuildContext context) {
return Container(
height: 360,
margin: const EdgeInsets.symmetric(horizontal: 30, vertical: 10),
child: Column(children: [
//RÉPÉTER CE BLOC POUR CHAQUE CHAMP DONT VOUS AVEZ BESOIN. ICI J’AI MIS L’EMAIL, MAIS IL SUFFIT DE REMPLACER LE TEXTEDITINGCONTROLLER ET LE HINT TEXT
Container(
height: MediaQuery.of(context).size.height * 0.11,
child: Column(
children: [
Container(
margin: const EdgeInsets.only(bottom: 5),
alignment: Alignment.centerLeft,
child: Text(
"Adresse mail*",
textAlign: TextAlign.start,
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
Container(
height: MediaQuery.of(context).size.height * 0.06,
margin: EdgeInsets.symmetric(
horizontal: MediaQuery.of(context).size.width * 0.01,
),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.black, width: 1),
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
spreadRadius: 2,
blurRadius: 5,
offset: const Offset(0, 5),
),
]),
child: Row(
children: [
Expanded(
child: Container(
margin: const EdgeInsets.only(left: 20),
child: TextField(
controller: emailField,
style: const TextStyle(
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.bold,
),
obscureText: false,
decoration: InputDecoration(
hintText: "Entrez email",
hintStyle: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500),
border: InputBorder.none,
),
),
)),
Container(
height: 50,
width: 50,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
child: const Icon(Icons.mail_outline_rounded,
size: 30, color: Colors.black),
),
],
)),
],
)),
]));
}
}
3. Envoyer les informations récupérées depuis Flutter, dans Firebase Auth
Après avoir récupéré les informations de l’utilisateur, stockez-les dans Firebase Auth. Pour cela, créez :
- Un bouton d’envoi ;
- Une fonction pour créer l’utilisateur ;
- Une fonction pour créer un document dans Firebase, représentant votre utilisateur et stockant ses informations (ceci n’est pas obligatoire, mais fortement recommandé).
Voici un exemple de code pour le bouton et la fonction d’inscription :
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.06,
margin: EdgeInsets.symmetric(
horizontal: MediaQuery.of(context).size.width * 0.01,
),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: const Color.fromARGB(250, 250, 185, 45),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(30)),
)),
onPressed: () {
SignUp();
},
child: Text("S'enregistrer",
style: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.bold,
))),
),
Ensuite, je vous conseille de créer une fonction SignUp() qui va créer votre utilisateur, le connecter et ajouter ses données dans Firebase en une seule fois.
Future SignUp() async {
await auth.instance.createUserWithEmailAndPassword(
email: emailField.text.trim(), password: passwordField.text.trim());
var userID = auth.currentUser!.uid;
addUser(userID, userName.text, emailField.text);
}
La méthode createUserWithEmailAndPassword() sur une instance de FirebaseAuth est utilisée pour créer un nouvel utilisateur avec son adresse email et son mot de passe.
Comment récupérer les informations contenues dans mes champs textes ?
Les textes saisis dans vos champs de texte sont stockés dans des variables de type TextEditingController(). Pour récupérer les valeurs de ces champs, il vous suffit d’accéder à la propriété .text de chaque variable et d’utiliser .trim() pour éliminer les espaces superflus en début et fin de chaîne.
String email = emailController.text.trim();
String password = passwordController.text.trim();
L’utilisation de .trim() n’est pas obligatoire, mais elle est recommandée pour éviter les erreurs dues aux espaces accidentels.
Pourquoi créer une instance ?
Pour utiliser les fonctions de Firebase Auth, il est nécessaire de créer une instance de FirebaseAuth. Cette instance peut être stockée dans une variable afin d’être réutilisée dans différents endroits de votre code. Grâce à cette instance, vous pourrez appeler diverses méthodes nécessaires pour la gestion des utilisateurs, comme la création et la connexion des utilisateurs.
final FirebaseAuth _auth = FirebaseAuth.instance;
Comment récupérer l’ID de l’utilisateur que je viens de créer ?
L’ID unique d’un utilisateur peut être récupéré en utilisant la méthode FirebaseAuth.instance.currentUser!.uid. Une fois cet ID stocké dans une variable de type String, il est conseillé de l’utiliser comme identifiant pour le document de l’utilisateur dans votre base de données Firebase. Cela permet de retrouver facilement les informations de l’utilisateur, comme sa photo de profil, en utilisant simplement le nom de la collection et l’ID de l’utilisateur.
String userId = FirebaseAuth.instance.currentUser!.uid;
En utilisant cet ID comme identifiant pour le document utilisateur dans Firestore, vous pourrez accéder rapidement aux informations stockées en associant l’ID unique à chaque document utilisateur.
4. Gérer les erreurs
Lors de l’inscription, vos utilisateurs peuvent rencontrer des problèmes tels qu’un mot de passe trop faible ou une adresse email incorrecte. Pour gérer ces situations, il est important de créer une fonction qui vérifie les informations saisies et renvoie un message d’erreur approprié en cas de problème.
Pour cela, utilisez un bloc try/catch pour tester une action (try) et exécuter une autre action si celle-ci échoue (catch). Placez les fonctions d’ajout des utilisateurs à Firebase dans le bloc try et les messages d’erreur dans le bloc catch. Voici un exemple de code que vous pouvez utiliser :
try {
await auth.createUserWithEmailAndPassword(
email: emailField.text.trim(), password: passwordField.text.trim());
var userID = auth.currentUser!.uid;
addUser(userID, userName.text, emailField.text);
} on FirebaseAuthException catch (e) {
//MDP DE MOINS DE 6 CARACTÈRES
if (e.code.contains("weak-password")) {
Fluttertoast.showToast(
msg: "Votre mot de passe doit contenir au moins 6 caractères.");
}
//EMAIL AU MAUVAIS FORMAT
if (e.code.contains("invalid-email")) {
Fluttertoast.showToast(msg: "Votre email n'a pas un format valide.");
}
//ADRESSE DÉJÀ UTILISÉ
if (e.code.contains("email-already-in-use")) {
Fluttertoast.showToast(msg: "Cette adresse mail est déjà utilisée.");
}
//MESSAGE PAR DÉFAUT
else {
Fluttertoast.showToast(
msg:
"Il semble que votre email et votre mot de passe ne soient pas au bon format.");
}
;
print(e);
}
Dans cet exemple, la fonction try tente de :
- Créer un utilisateur avec son mot de passe et son email ;
- Récupérer son identifiant unique ;
- Ajouter les informations de l’utilisateur dans un document Firebase.
Si une de ces actions échoue, l’erreur est capturée par catch(e), où e représente l’erreur.
En fonction du type d’erreur, vous pouvez afficher un message d’erreur spécifique pour informer l’utilisateur de ce qu’il doit corriger :
- weak-password : Mot de passe trop faible (moins de 6 caractères).
- invalid-email : Format de l’adresse email invalide.
- email-already-in-use : L’email est déjà utilisé dans votre base de données Firebase Auth.
Connecter un utilisateur
Après avoir inscrit vos utilisateurs, vous devez mettre en place un système de connexion. Ce système fonctionne comme un booléen, déterminant si l’utilisateur est connecté ou déconnecté. Voyons comment implémenter cette fonctionnalité, puis comment adapter votre application en fonction du statut de l’utilisateur.
Adapter la fonction main()
Pour connecter des utilisateurs, la première étape consiste à modifier votre fonction main. Cette fonction doit maintenant vérifier le statut de l’utilisateur avant de construire l’application. Voici à quoi ressemble votre fonction main après modification :
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
}
Créer un système de connexion
Comme pour l’enregistrement, la première étape pour connecter un utilisateur est de récupérer son email et son mot de passe. Vous devez donc créer au moins deux champs de texte et deux variables de type TextEditingController() pour stocker ces informations. Ensuite, créez un bouton de connexion qui lancera la fonction de connexion. Vous pouvez réutiliser et adapter le code fourni précédemment.
Ensuite, créez une fonction loginToFirebase() et placez-la dans la partie onPressed de votre bouton de connexion. Voici un exemple de code que vous pouvez utiliser :
FirebaseAuth auth = FirebaseAuth.instance; //Pas besoin d'ajouter cette ligne si vous l'avez déjà
Future loginToFirebase() async {
print(emailField.text.trim());
print(passwordField.text.trim());
try {
await auth.signInWithEmailAndPassword(
email: emailField.text.trim(), password: passwordField.text.trim());
} on FirebaseAuthException catch (e) {
Fluttertoast.showToast(
msg:
"Votre adresse email ou votre mot de passe semblent être incorrects.");
print(e.toString());
}
}Ici, je récupère l’adresse contenue dans emailField et le mot de passe dans passwordField. Je les utilise dans ma méthode auth.signInWithEmailAndPassword() pour changer le statut de mon utilisateur et le passer de déconnecté à connecté.
Tester que ma fonction marche
Pour vérifier que votre fonction de connexion fonctionne correctement, affichez l’ID unique de l’utilisateur dans le terminal de commande à l’aide d’un print(). Par exemple :
print(FirebaseAuth.instance.currentUser!.uid);Si l’ID s’affiche correctement, cela signifie que l’utilisateur est bien connecté.
Afficher un contenu différent selon le statut de l’utilisateur
Une fois votre utilisateur connecté, il ne reste plus qu’à le faire passer de votre page de connexion, à la page que vous souhaitez lui montrer. Pour cela, il y a deux méthodes que j’ai personnellement pu utiliser :
- runnApp() -> Qui va lancer une page différente, selon le statut de l’utilisateur ;
- MaterialPageRoute() -> Qui va renvoyer l’utilisateur vers une nouvelle page.
Utiliser runApp()
La méthode runApp() est la plus simple à utiliser. Vous devez créer deux pages : une pour la connexion et une autre comme page principale. Utilisez des StatefulWidget pour construire le design de chaque page.
Modifiez ensuite votre fonction main comme suit :
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
auth.authStateChanges().listen((User? user) {
if (user == null) {
print('Utilisateur non connecté');
runApp(const PageConnexion());
} else {
print('Utilisateur connecté: ' + user.email!);
runApp(const HomePage());
}
});
}Dans cet exemple, la fonction main affiche PageConnexion() si l’utilisateur est null (non connecté). Sinon, elle affiche HomePage().
Utiliser MaterialPageRoute()
Parfois, il n’est pas possible d’utiliser la méthode précédente pour afficher la bonne page à votre utilisateur. Dans ce cas, utilisez Navigator.pushReplacement() pour rediriger l’utilisateur vers une autre page.
Voici un exemple de code pour implémenter cette méthode dans le bouton de connexion :
onPressed(){Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (_) => const MaterialApp(
debugShowCheckedModeBanner: false,
home: DefaultTabController(
length: 4,
child: HomeScreen(),
))))
}
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
backgroundColor: Colors.white,
body: //(Corps de votre page)
}Les autres méthodes de connexion
Il existe de nombreuses autres méthodes de connexion pour lesquelles je rédigerai des guides au fur et à mesure :
- Guide d’installation de Google Sign In avec Flutter ;
- Guide d’installation d’Apple Sign In avec Flutter ;
- Guide d’installation de Twitter Login avec Flutter ;
- Guide d’installation de Facebook Login avec Flutter ;
- Guide d’installation de Github Auth avec Flutter ;
- Microsoft, etc.
Ces méthodes permettent une plus grande flexibilité et s’adaptent à divers besoins d’authentification.
Conclusion :
Vos utilisateurs sont désormais en mesure de se créer un profil pour accéder à votre application. Mais comment savoir s’ils aiment utiliser votre application et apprécient son design ? Comment faire pour mesurer leurs différentes interactions et pouvoir les analyser ? Je vous expliquer tout cela dans le prochain guide :
Guide pour intégrer Firebase Analytics dans une application Flutter →
