Cómo implementar logout con Firebase y GoRouter

Cerrar sesión en una app Flutter con autenticación Firebase parece simple, pero requiere coordinar tres piezas: el evento del bloc, el cambio de estado y la redirección con GoRouter. Aquí verás cómo conectar esos elementos para que el flujo de logout funcione sin errores y devuelva al usuario a la pantalla de login.

Esta guía es útil si ya tienes una app Flutter con Firebase Authentication y quieres añadir un cierre de sesión confiable, con confirmación previa y manejo de excepciones.

¿Cómo crear un usuario en Firebase Authentication para probar el login?

Antes de programar el cierre de sesión, necesitas un usuario válido. Desde la consola de Firebase, en la sección Authentication, encontrarás los métodos de inicio activos y la pestaña Users para registrar credenciales manualmente.

• Selecciona el método correo y contraseña.
• Agrega un correo y una contraseña con al menos seis caracteres.
• Guarda el usuario y recarga para verificar que aparece en la lista.

Con esas credenciales puedes iniciar sesión desde la app y validar que los validators del campo de contraseña están funcionando. Si la contraseña es muy corta, el formulario te lo señalará antes de enviar la petición [02:30].

¿Cuál es la longitud mínima recomendada para una contraseña en Firebase? Firebase exige al menos seis caracteres. Si pones menos, el validator del campo bloquea el envío.

¿Qué pantallas componen el dashboard de la app?

Una vez autenticado, el usuario entra al dashboard, que es el componente central donde se muestra el balance general. Desde ahí se accede a otras vistas pensadas para gestión financiera personal.

• Gráfico con meses de ejemplo para visualizar tendencias.
• Listado de compras con descripción y precio.
• Pantalla de transacciones con su contraseña asociada.
• Configuración del perfil del usuario.

El problema: ninguna de estas pantallas incluye todavía un botón para cerrar sesión. Ese es el punto que vamos a resolver en profile [04:15].

¿Cómo agregar el botón de logout en la pantalla de perfil?

Dentro de profile ya existe un widget reutilizable que renderiza opciones con icono y título. Vamos a sumar una nueva option para el cierre de sesión usando el icono Icons.logout, que visualmente comunica la acción al usuario.

El título de la opción es simplemente logout, y necesita un callback onTap que sea asíncrono, porque la llamada al servicio de Firebase devuelve un Future. Antes de ejecutar el cierre, conviene mostrar un cuadro de confirmación reutilizando el widget de diálogo del proyecto.

dart onTap: () async { final confirmed = await showConfirmationDialog(context); if (confirmed == true) { context.read<AuthBloc>().add(AuthLogoutRequested()); context.go('/login'); } }

Un detalle fácil de pasar por alto: si el widget padre está marcado como const, la opción con función dinámica no puede serlo. Quita el const solo de la opción que recibe el callback, no de las demás.

¿Por qué onTap debe ser async en el logout? Porque la confirmación del diálogo y la operación de Firebase devuelven Future. Sin async/await, no podrías esperar la respuesta antes de redirigir.

¿Cómo conectar el botón con el AuthBloc?

El AuthBloc funciona como centro de control del estado de autenticación. Desde el onTap se accede con context.read<AuthBloc>() y se dispara el evento AuthLogoutRequested, que internamente llama al repositorio para cerrar sesión en Firebase.

Después del evento, redirige con GoRouter usando context.go('/login'). Si la pantalla aún no tiene GoRouter importado, añade los imports de Flutter y go_router antes de compilar.

¿Por qué falla la redirección a login después del logout?

Al probar el flujo, la consola de debug mostraba una excepción de GoRouter indicando que no pudo crear la página de login. El path estaba bien escrito, así que el error venía de otro lado: del estado que devolvía el bloc tras cerrar sesión.

En el evento de logout, el state seguía marcando isAuthenticated: true, igual que en el inicio de sesión exitoso. Eso es incoherente: si cierras sesión, el estado debe pasar a false para que el router permita ir a login.

dart try { await authRepository.logout(); emit(state.copyWith(isAuthenticated: false)); } catch (e) { emit(state.copyWith( isAuthenticated: false, error: e.toString(), )); }

Envolver la operación en un try/catch te da dos beneficios: el happy path actualiza el estado correctamente, y si Firebase falla, capturas la excepción con exception.toString() para verla en consola y debuguear.

¿Qué hace context.read en un AuthBloc? Obtiene la instancia del bloc desde el árbol de widgets sin escuchar cambios. Es ideal para disparar eventos puntuales como un logout.

¿Cómo validar el flujo completo de autenticación?

Después de ajustar el estado y guardar, recarga la app, inicia sesión con tu usuario de Firebase y entra a profile. Al pulsar logout, el modal de confirmación aparece; al confirmar, confirmed se vuelve true, el bloc emite el nuevo estado y GoRouter redirige a /login sin excepciones.

Con esto tienes una app Flutter que autentica, mantiene sesión y la cierra correctamente. Te invito a crear varios usuarios desde Firebase y probar combinaciones: contraseñas inválidas, sesiones simultáneas y errores forzados. ¿Qué parte del flujo te dio más problemas al implementarlo?