¿Cómo agregar una funcionalidad de «olvidé mi contraseña» con Flutter?
El primer paso para enviar un correo de restablecimiento de contraseña a un usuario es haber configurado Firebase Auth para tu aplicación Flutter y, lógicamente, un sistema de autenticación por correo electrónico.
Aquí asumiré que ya has realizado este paso. Si no es el caso, te invito a consultar mi guía para configurar Firebase Auth en Flutter.
Para restablecer la contraseña de un usuario enviándole un correo electrónico, Flutter ofrece directamente una función:
await FirebaseAuth.instance.sendPasswordResetEmail(email: "el correo del usuario");Aquí tienes un ejemplo de código que permite al usuario introducir su correo electrónico en un campo de texto para recibir un correo de restablecimiento de contraseña:
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 =
'Se ha enviado un correo de restablecimiento a tu dirección de correo electrónico.';
});
} catch (error) {
setState(() {
_feedbackMessage = 'Error: ${error.toString()}';
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Olvidé mi contraseña'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Ingresa tu dirección de correo electrónico para recibir un enlace de restablecimiento de contraseña.',
style: TextStyle(fontSize: 16),
),
SizedBox(height: 20),
TextFormField(
controller: _emailController,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'Correo electrónico',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Por favor, ingresa una dirección de correo electrónico';
}
if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
return 'Por favor, ingresa una dirección de correo electrónico válida';
}
return null;
},
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _resetPassword,
child: Text('Enviar'),
),
SizedBox(height: 20),
if (_feedbackMessage.isNotEmpty)
Text(
_feedbackMessage,
style: TextStyle(
color: Colors.red,
),
),
],
),
),
),
);
}
}Personalizar el correo de restablecimiento
Puedes personalizar el correo de restablecimiento accediendo a la consola de Firebase, en la sección de Autenticación, luego en Modelos de correo electrónico. Solo queda adaptar el modelo de tu correo según la identidad visual de tu aplicación.
