Primeros pasos con Firebase Authentication en Flutter

Conecta tu app a Firebase

Instala e inicializa los SDK de Firebase para Flutter si aún no lo has hecho.

Agrega Firebase Authentication a la app

  1. Desde la raíz de tu proyecto de Flutter, ejecuta el siguiente comando para instalar el complemento:

    flutter pub add firebase_auth

  2. Cuando termines, vuelve a compilar tu aplicación de Flutter:

    flutter run

  3. Importa el complemento en tu código Dart:

    import 'package:firebase_auth/firebase_auth.dart';

Para usar un proveedor de autenticación, necesitas habilitarlo en Firebase console. Ve a la página de método de acceso en la sección Firebase Authentication para habilitar el acceso con correo electrónico y contraseña, y cualquier otro proveedor de identidad que desees en tu app.

Crea prototipos y realiza pruebas con Firebase Local Emulator Suite (opcional)

Antes de explicar cómo tu app autentica a los usuarios, veremos un conjunto de herramientas que puedes usar para crear prototipos y probar la funcionalidad de Authentication: Firebase Local Emulator Suite. Si aún no elegiste una técnica de autenticación o un proveedor específico, estás probando varios modelos de datos con información pública y privada mediante Authentication y las Reglas de seguridad de Firebase, o bien si estás creando prototipos de diseños con IU de acceso, poder trabajar de manera local sin implementar servicios en ejecución será de gran ayuda.

Los emuladores de Authentication forman parte de Local Emulator Suite, que permite que tu app interactúe con el contenido y la configuración emulados de la base de datos y, si lo deseas, con los recursos emulados del proyecto (funciones, otras bases de datos y reglas de seguridad).

El uso del emulador de Authentication solo requiere algunos pasos sencillos:

  1. Agrega una línea de código a la configuración de prueba de tu app para conectarte al emulador.

  2. Desde la raíz del directorio de tu proyecto local, ejecuta firebase emulators:start.

  3. Usa la IU de Local Emulator Suite para crear un prototipo interactivo, o la API de REST del emulador de Authentication a fin de realizar pruebas no interactivas.

  4. Llama a useAuthEmulator() para especificar la dirección y el puerto del emulador:

    Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();

// Ideal time to initialize
await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
//...
}

Puedes encontrar una guía detallada en el artículo Conecta tu app al emulador de Authentication. Para obtener más información, consulta la introducción a Local Emulator Suite.

Ahora veamos cómo autenticar a los usuarios.

Comprueba el estado de autenticación actual

Firebase Auth proporciona muchos métodos y utilidades para que puedas integrar la autenticación segura en tu aplicación de Flutter nueva o existente. En muchos casos, deberás conocer el estado de autenticación de tu usuario, como si accedió o no a su cuenta.

Firebase Auth te permite suscribirte en tiempo real a este estado mediante un Stream. Una vez realizada la llamada, la transmisión proporciona un evento inmediato del estado de autenticación actual del usuario y, luego, proporciona eventos subsecuentes cada vez que cambia el estado de autenticación.

Existen tres métodos para detectar los cambios en el estado de la autenticación:

authStateChanges()

Para suscribirte a estos cambios, llama al método authStateChanges() en la instancia FirebaseAuth:

FirebaseAuth.instance
  .authStateChanges()
  .listen((User? user) {
    if (user == null) {
      print('User is currently signed out!');
    } else {
      print('User is signed in!');
    }
  });

Los eventos se activan en los siguientes casos:

  • Inmediatamente después de que se registra el objeto de escucha
  • Cuando un usuario accede
  • Cuando el usuario actual sale de su cuenta

idTokenChanges()

Para suscribirte a estos cambios, llama al método idTokenChanges() en la instancia FirebaseAuth:

FirebaseAuth.instance
  .idTokenChanges()
  .listen((User? user) {
    if (user == null) {
      print('User is currently signed out!');
    } else {
      print('User is signed in!');
    }
  });

Los eventos se activan en los siguientes casos:

  • Inmediatamente después de que se registra el objeto de escucha
  • Cuando un usuario accede
  • Cuando el usuario actual sale de su cuenta
  • Cuando hay un cambio en el token del usuario actual

userChanges()

Para suscribirte a estos cambios, llama al método userChanges() en la instancia FirebaseAuth:

FirebaseAuth.instance
  .userChanges()
  .listen((User? user) {
    if (user == null) {
      print('User is currently signed out!');
    } else {
      print('User is signed in!');
    }
  });

Los eventos se activan en los siguientes casos:

  • Inmediatamente después de que se registra el objeto de escucha
  • Cuando un usuario accede
  • Cuando el usuario actual sale de su cuenta
  • Cuando hay un cambio en el token del usuario actual
  • Cuando se llama a los siguientes métodos que proporciona FirebaseAuth.instance.currentUser:
    • reload()
    • unlink()
    • updateEmail()
    • updatePassword()
    • updatePhoneNumber()
    • updateProfile()

Estado de autenticación persistente

Los SDK de Firebase para todas las plataformas ofrecen compatibilidad lista para usar a fin de garantizar que el estado de autenticación del usuario persista en los reinicios de la app o cuando se vuelva a cargar la página.

En plataformas nativas, como iOS y Android, este comportamiento no se puede configurar y el estado de autenticación del usuario persistirá en el dispositivo entre los reinicios de la app. El usuario puede borrar los datos almacenados en caché de las apps mediante la configuración del dispositivo, que limpiará cualquier estado existente que se almacene.

En las plataformas web, el estado de autenticación del usuario se almacena en IndexedDB. Puedes cambiar la persistencia para almacenar datos en el almacenamiento local con Persistence.LOCAL. Si es necesario, puedes cambiar este comportamiento predeterminado a fin de que solo persista el estado de autenticación para la sesión actual o para nada. Para establecer esta configuración, llama al método FirebaseAuth.instanceFor(app: Firebase.app(), persistence: Persistence.LOCAL);. Aún puedes actualizar la persistencia de cada instancia de Auth con setPersistence(Persistence.NONE).

// Disable persistence on web platforms. Must be called on initialization:
final auth = FirebaseAuth.instanceFor(app: Firebase.app(), persistence: Persistence.NONE);
// To change it after initialization, use `setPersistence()`:
await auth.setPersistence(Persistence.LOCAL);

Próximos pasos

Explora las guías para acceder y registrar usuarios con los servicios de identidad y autenticación compatibles.