Conectar botón de login con Firebase Auth

Conectar un botón de login con Firebase Auth en Flutter requiere validar el formulario, manejar excepciones y liberar controladores. Si estás construyendo una app móvil con autenticación por correo y contraseña, esta guía te muestra cómo enlazar la lógica de signIn al onPressed y redirigir al dashboard tras un inicio exitoso.

Cómo crear la función signIn asíncrona en Flutter

La idea es escribir una función privada que valide el formulario, llame a Firebase y maneje el resultado dentro del mismo widget de login.

Empiezas declarando un Future<void> privado llamado _signIn marcado como async, porque vas a esperar la respuesta de Firebase. Lo primero que hace esa función es leer el currentState de tu formKey y validar que ambos campos (correo y contraseña) estén completos y cumplan las reglas que definiste antes [03:12].

¿Por qué la función debe ser async? Porque Firebase devuelve un Future con las credenciales del usuario, y necesitas pausar la ejecución hasta que esa respuesta llegue para mostrar el mensaje correcto.

Dentro del if envuelves la llamada a Firebase con un bloque try catch. Esto te permite controlar las excepciones que pueda lanzar el servicio de autenticación sin que la app se rompa.

Cómo usar signInWithEmailAndPassword con tus controladores

Declaras una variable de tipo UserCredential y le asignas el resultado de await auth.signInWithEmailAndPassword(...), donde auth es la instancia de FirebaseAuth que ya tenías inicializada.

Los parámetros que espera el método son:

• email: el texto del controlador del campo de correo, accedido con controller.text.
• password: el texto del controlador del campo de contraseña, también con .text.

Así, los datos que el usuario escribe en pantalla viajan directo a Firebase como credenciales para validar el inicio de sesión.

Cómo mostrar feedback al usuario tras un login exitoso

Una vez que Firebase responde con las credenciales, conviene mostrarle al usuario una señal visible antes de redirigirlo.

Usas ScaffoldMessenger.of(context).showSnackBar(...) para desplegar una barra inferior con el widget SnackBar. Dentro del content colocas un Text con el mensaje de bienvenida que incluye el correo del usuario, accedido como ${userCredential.user?.email}. El operador ? resuelve el caso en que user pueda ser nulo.

¿Qué es UserCredential en Firebase? Es el objeto que devuelve Firebase tras autenticar a alguien. Contiene la información del usuario, incluyendo su email, uid y datos de la sesión activa.

Después del SnackBar, agregas un await Future.delayed(const Duration(seconds: 2)) para que el mensaje se vea unos segundos antes de cambiar de pantalla. Finalmente, rediriges al dashboard con context.go('/dashboard'), que usa la ruta configurada en tu router.

Cómo capturar errores con FirebaseAuthException

En el bloque catch capturas específicamente FirebaseAuthException para mostrar mensajes de error claros.

Dentro del catch llamas otro ScaffoldMessenger.of(context).showSnackBar(...) con un SnackBar cuyo content muestra 'Error: ${e.message}'. Así, si el correo no existe, la contraseña es incorrecta o hay un fallo de red, el usuario recibe retroalimentación inmediata sobre qué pasó.

Por qué liberar los controladores con dispose

Los TextEditingController siguen escuchando los campos incluso cuando ya no los necesitas, así que liberarlos evita fugas de memoria.

Sobrescribes el método dispose() con la anotación @override y dentro llamas a controller.dispose() para el campo de correo y passwordController.dispose() para el de contraseña. Es una práctica estándar en cualquier StatefulWidget que use controladores.

Para conectar todo, asignas la función al onPressed del botón de login directamente: onPressed: _signIn. No necesitas envolverla en una función anónima porque ya es una referencia válida.

Cómo configurar las rutas con routerConfig en main

Para que context.go('/dashboard') funcione, el MaterialApp debe usar configuración basada en router en lugar del esquema clásico de home.

En tu main.dart reemplazas MaterialApp(...) por MaterialApp.router(...) y le pasas la propiedad routerConfig: appRouter, donde appRouter es la instancia que contiene todas las rutas mapeadas de tu aplicación. Esto habilita la navegación declarativa con go_router y conecta cada path con su pantalla correspondiente.

¿Qué hace MaterialApp.router? Es la variante de MaterialApp pensada para paquetes de navegación declarativa como go_router. Recibe routerConfig y delega en él el manejo de todas las rutas y transiciones.

Cómo desplegar la app en un emulador

Con la lógica lista, falta probar el flujo en un dispositivo virtual.

En VS Code presionas Shift + Command + T para abrir el selector de dispositivos. Si no aparece ningún emulador, abre la app Simulator (en macOS) y selecciona el dispositivo que quieras. Para correr la app pulsas F5 o el botón de play en la barra superior. La primera compilación puede tardar varios segundos.

Una vez desplegada, verás el formulario de login con sus dos campos. Los validadores ya rechazan correos mal formados y contraseñas que no cumplan los requisitos mínimos. Solo te falta tener un usuario creado en Firebase para probar el flujo completo de autenticación.

¿Te animas a probarlo y comentar qué error de FirebaseAuthException te apareció primero?