Flutter: Login en Firebase usando el paquete Provider

Carlos Millan
22 mayo, 2019

. . .

Fuente del artículo

Hace algunos días publiqué un artículo sobre cómo usar el paquete Provider con un ejemplo de contador simple. Puede leer la administración del estado pragmático utilizando Provider aquí. Hoy usaremos el mismo paquete para crear una aplicación Flutter que se integre con Firebase para autenticar a los usuarios.

Requisitos previos:

  • Primero que todo, ponga esta dependencia en su archivo pubspec.yaml.
  • 2. Configura tu App con Firebase
  • Habilitar el campo Nombre de usuario / Contraseña en la Consola de autenticación Firebase.

Escribamos Código

Crea un nuevo proyecto y agrega integración con Firebase. Lo Primero es lo Primero, nuestra aplicación puede ser cualquiera de estos cuatro estados.

  • Sin inicializar: comprobar si el usuario ha iniciado sesión o no. En este estado, estaremos mostrando una pantalla de bienvenida.
  • No autenticado: el usuario no está autenticado. En este estado, mostraremos la página de inicio de sesión para ingresar las credenciales.
  • Autenticando: el usuario ha presionado el botón de inicio de sesión y estamos autentificando al usuario. En este estado, estaremos mostrando una barra de progreso.
  • Autenticado: el usuario es autenticado. En este estado, estaremos mostrando la página de inicio.

Comenzaremos haciendo la clase UserRepository para administrar nuestro estado de usuario. Para eso creamos un archivo llamado user_repository.dart en la carpeta /lib.

Hemos definido una enumeración para rastrear el estado del usuario.

Los diferentes estados con diferentes UI´s

Inicialmente, nuestro estado es inicializado. En nuestro constructor de instancia UserRepository, estamos inicializando el objeto FirebaseAuth y escuchando los cambios de autenticación.

Se llama a la función _onAuthStateChanged cada vez que se cambia el estado del usuario de Firebase. En esto tenemos dos posibilidades, ya sea que obtengamos el usuario o no. Si el FirebaseUser es nulo, cambiaremos el estado a No autenticado o autenticado. Pase lo que pase, queremos mostrarle al usuario los cambios por los que llamamos a notificationListener() para notificar a nuestra UI que se vuelva a representar.

En el Método SignIn, cuando se llama al método, cambiamos el estado a autenticando y notifyListener() muestra que estamos intentando iniciar sesión. Si todo va bien, devolveremos true indicando que el usuario ha iniciado sesión. Si desafortunadamente no ha iniciado sesión (tal vez debido a una mala red o credenciales no válidas) cambiaremos el estado a No autenticado y notifyListeners() retornará false para mostrar al usuario que algo malo sucedió -.-

En el método SignOut, simplemente cerramos la sesión y el usuario cambia su estado a No autenticado y notifyListeners() actualizará la UI. Y hemos terminado con la lógica de negocios.


Nuestra aplicación tiene tres pantallas Splash, Login y UserInfoPage.

Comenzaremos por el archivo main.dart.

Aparte de la Estructura Básica, hemos definido Nuestro
ChangeNotifierProvider en la línea 24 e inicializado nuestra Instancia de UserRepository en el builder. Como hemos definido a nuestro provider en el root, ahora todos los widgets secundarios pueden acceder fácilmente a UserRepository, ya sea utilizando Consumer o
Provider.of<Object>(context) . En el método builder de Consumer, estamos mostrando diferentes pantallas en función del estado de UserRepository. Si el estado es Sin Inicializar, mostraremos el Splash definido en las líneas 69–78. Si el estado es Autenticado, mostraremos
UserInfoPage definido en las líneas 43–67. Si el estado es Autenticado o Autenticando, mostraremos la página de inicio de sesión.

Dentro del método build, estamos tomando una decisión. Si el usuario ha presionado el botón de sign-in, nuestro estado cambiará de No autenticado a Autenticando, ahora ocultaremos el botón de sign-in y mostraremos el indicador de progreso para notificar a la interfaz de usuario que estamos procesando lo que estamos haciendo en la línea 64. En la línea 74 iniciamos sesión en el usuario y comprobamos si nuestro método de inicio de sesión devolvió true o false. Si obtuviéramos el estado true, se autenticará y se mostrará la página de información del usuario. De lo contrario, si obtuvimos el valor false, significa que nuestro estado no ha cambiado, hemos recibido algún error. En este caso, mostraremos el snackbar para mostrar algo ha salido mal, línea 75-80.

Resultado Final:


Conclusión

En este punto, tenemos una sólida implementación de Firebase Sign in. Y lo que es incluso emocionante es que es muy extensible, podemos definir fácilmente el inicio de sesión de Google u otros métodos de proveedores en UserRepository y extender nuestro flujo de inicio de sesión aún más. También he implementado el inicio de sesión de Google que puede consultar desde mi repositorio de aplicaciones de GitHub aquí.

Eso es todo. Saludos!!!

38

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comunidades en Español