Ajouter une fonctionnalité de « mot de passe oublié » avec Flutter
La première étape pour pouvoir envoyer un email de réinitilisation du mot de passe à un utilisateur est d’avoir mis en place Firebase Auth pour votre application Flutter et logiquement, un système d’authentification par email.
Je considère donc ici que vous avez déjà réalisé cette étape, mais si ce n’est pas le cas, je vous invite à vous rendre sur mon guide pour mettre en place Firebase Auth pour Flutter.
Pour réinitialiser le mot de passe d’un utilisateur en lui envoyant un email, Flutter propose directement une fonction :
await FirebaseAuth.instance.sendPasswordResetEmail(email: "l'email de l'utilisateur");Je vous propose ici un code d’exemple qui permet à l’utilisateur de saisir son email dans une barre de texte, afin de recevoir un email pour réinitialiser son mot de passe.
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
class ForgotPasswordPage extends StatefulWidget {
@override
_ForgotPasswordPageState createState() => _ForgotPasswordPageState();
}
class _ForgotPasswordPageState extends State<ForgotPasswordPage> {
final _emailController = TextEditingController();
final _formKey = GlobalKey<FormState>();
String _feedbackMessage = '';
@override
void dispose() {
_emailController.dispose();
super.dispose();
}
Future<void> _resetPassword() async {
if (!_formKey.currentState!.validate()) return;
try {
await FirebaseAuth.instance
.sendPasswordResetEmail(email: _emailController.text.trim());
setState(() {
_feedbackMessage =
'Un e-mail de réinitialisation a été envoyé à votre adresse e-mail.';
});
} catch (error) {
setState(() {
_feedbackMessage = 'Erreur : ${error.toString()}';
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Mot de passe oublié'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Entrez votre adresse e-mail pour recevoir un lien de réinitialisation de mot de passe.',
style: TextStyle(fontSize: 16),
),
SizedBox(height: 20),
TextFormField(
controller: _emailController,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'Adresse e-mail',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Veuillez entrer une adresse e-mail';
}
if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
return 'Veuillez entrer une adresse e-mail valide';
}
return null;
},
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _resetPassword,
child: Text('Envoyer'),
),
SizedBox(height: 20),
if (_feedbackMessage.isNotEmpty)
Text(
_feedbackMessage,
style: TextStyle(
color: Colors.red,
),
),
],
),
),
),
);
}
}Personnaliser l’e-mail de réinitialisation
Vous pouvez personnaliser l’email de réinitialisation en vous rendez dans la console Firebase, dans la rubrique Authentification, puis « Modèles de courriel ». Ne vous reste plus qu’à adapter le modèle de votre email selon la charte graphique de votre application.
Conclusion
Vous maitrisez maintenant les fondamentaux de la création et gestion de compte utilisateurs sur Flutter avec Firebase. Pourquoi ne pas continuer votre apprentissage, en apprenant à extraire des informations en ligne, pour les utiliser dans le front-end de votre application ? Commençons par voir comment conserver les clés API dont vous avez besoin pour vous connecter à certains services comme Google Maps ou ChatGPT.
