Flutter y Firebase login, todo lo que necesitas saber

Arnaudelub
Flutter España
Published in
4 min readMar 29, 2021

--

Usar el inicio de sesión de Firebase con Flutter es bastante fácil, ¡no puedo ver de qué quieres hablar, podrías pensar! bueno, eso es cierto, incluso el inicio de sesión social es muy fácil de implementar. Pero, ¿qué pasa si quiero que un usuario pueda iniciar sesión con Google, Facebook o Apple y que todas y cada una de ellas estén vinculadas a la misma cuenta de usuario? ¿Qué sucede si quiero que un usuario de mi aplicación pueda navegar y hacer cosas en mi aplicación sin tener que iniciar sesión y sin perder nada de lo que haya hecho después de registrarse?

Para este último punto, sé que hay muchas soluciones, pero la que ofrece Firebase es realmente una solución elegante y funcionará en todas las plataformas.

1. Login anónimo

Sí, así es, deberías usar el inicio de sesión anónimo en el primer lanzamiento de la aplicación para que el usuario pueda usar todas las funcionalidades de la aplicación sin tener que registrarse.

Entonces, en primer lugar, activa el inicio de sesión anónimo en tu consola de Firebase, para eso, simplemente selecciona Authentication en el menú de la izquierda, y luego selecciona la pestaña “Sign-in method” y activa el proveedor de inicio de sesión anónimo

Ahora, implementar este método de inicio de sesión es bastante fácil, y el único error que tienes que manejar es el error Operation Not Allowed que solo ocurrirá si no se has activado el inicio de sesión anónimo. Así es como lo estoy haciendo, personalmente estoy usando el paquete Dartz y la clase Either para manejar errores en mis repositorios:

Ten en cuenta que si el usuario se desconecta del inicio de sesión anónimo, ¡no podrá recuperar la misma cuenta!

Si tienes un observer registrado en el método authStateChanges(), se activará con un objeto User y el getter currentUser también devolverá un objeto User:

Entonces, ahora, este usuario anónimo puede trabajar con datos protegidos por reglas de seguridad sin tener que registrarse.

Así queda nuestro repository hasta ahora:

2. Vincula la cuenta anónima y conviértela en una cuenta permanente

Ok, entonces el usuario ha podido probar (¿casi?) toda la aplicación y cree que es realmente una muy buena aplicación, así que es hora de registrarse y la pregunta es, ¿cómo vinculo esta cuenta anónima a una cuenta permanente?

Bueno, FirebaseAuth le da al getter currentUser el método de enlace linkWithCredentials().

Así que empezamos con el método createUserWithEmailAndPassword(), si lo piensas, tal vez el usuario que inició sesión solo querrá cerrar la sesión y registrarse con un nuevo usuario, por lo que debes pasar un flag a su repositorio para saber si tiene que vincular la nueva cuenta o no, así es como suelo hacerlo:

Al usar el método createUserWithEmailAndPassword(), es posible que también quieras que el usuario verifique su correo electrónico una vez que haya iniciado sesión, bueno, para esto, simplemente llama al método sendVerificationEmail() en el objeto User.

auth.User user = _firebaseAuth.currentUser;if (!user.emailVerified) {await user.sendEmailVerification();}

Para el inicio de sesión social, simplemente sigue el mismo concepto, usa el proveedor correcto (GoogleAuthProvider, FacebookAuthProvider, OAuthProvider,…) y vincula las cuentas bajo el mismo Uuid de usuario de Firebase.

Os dejo el código para Google:

para Apple Sign in:

y para Facebook:

https://gist.github.com/arnaudelub/73e6d4ddb1670469ff94a009fd2a5d4a

3. Cambiar la contraseña

También es posible que quieras dejar que el usuario pueda actualizar su contraseña dentro de la aplicación o restablecerla si no la recuerda. Para esto, puede llamar a updatePassword() en el objeto User y sendPasswordResetEmail(String email).

Restablecer la contraseña es bastante sencillo:

@overrideFuture<void> resetPassword({@required EmailAddress email}) =>_firebaseAuth.sendPasswordResetEmail(email: email.getOrCrash());

Actualizar la contraseña es algo más complicado. Por ejemplo, si el usuario ha iniciado sesión desde hace bastante tiempo, puede ser necesario solicitar una nueva Authentication por motivos de seguridad, por lo que es posible que quieras pedirle al usuario que ingrese la contraseña original si es necesario en el UI.

Agrega el método de cierre de sesión a su repositorio y eso es todo. El inicio de sesión de Facebook, el inicio de sesión de Twitter, el inicio de sesión de github y unos cuantos más están disponibles, solo siga la documentación para cada uno y listo.

Aquí está el repositorio con todo lo que cubrimos hoy:

https://gist.github.com/arnaudelub/562982601fd7be6aa6866a10137577f2

Si quieres profundizar, también hay acceso telefónico y Email link Authentication.

Ahora puedes vincular todas las cuentas social del usuario a tu aplicación y puedes permitir que cualquier usuario nuevo navegue por su aplicación y se registre sin perder ningún dato que pueda haber generado.

¡Y eso es todo por hoy amigos!

Happy coding a Todos

--

--