Flutter Firebase Authentication por Email

Alejandro Mancilla Umsa
4 min readMar 22, 2021

--

Previamente a implementar Firebase Authentication debemos conectar el proyecto Flutter a Firebase, si aun no conectaste tu proyecto sigue el siguiente post antes de continuar: https://alejandro-mancilla-umsa.medium.com/conecta-tu-proyecto-flutter-con-firebase-266cb858618

Para esta guía nos basaremos en la versión firebase_auth: “^0.20.1” y en la documentacion oficial que se puede encontrar en el siguiente enlace: https://firebase.flutter.dev/docs/auth/overview

1. Agregar dependencia

Agregue la firebase_authdependencia a su archivopubspec.yaml

firebase_auth: “^0.20.1”

agregando firebase_auth a pubspec.yaml

Descargue la dependencia ejecutando el siguiente comando en su proyecto:

$ flutter pub get

2. CÓDIGO BASE

Trabajaremos en base a dos pantallas con código simple y directo para evitar confusiones, las pantallas a continuacion seran LoginEmail.dart y RegisterEmail.dart.

código de LoginEmail.dart

código de RegisterEmail.dart

3. HABILITAR LA AUTHENTICACION EN FIREBASE

Debemos dirigirnos a nuestro proyecto Firebase en el apartado de Authentication y habilitaremos el login por correo electronico/contraseña

metodo de autenticacion habilitada

4. REGISTRAR UN NUEVO USUARIO

el método para registrar a un nuevo usuario es createUserWithEmailAndPassword y podemos aplicarlo de la siguiente manera:

en este caso creamos una función llamada _registrarUsuario que esta recibiendo dos parámetros que son necesarios, el EMAIL y la CONTRASEÑA, y ponemos la función createUserWithEmailAndPassword en un try{}catch(e){} para evitar cualquier problema en el caso de que surja.

5. INICIAR SESION CON USUARIO EXISTENTE

el método para iniciar sesión con un usuario existente es signInWithEmailAndPassword y podemos aplicarlo de la siguiente manera:

en este caso creamos una función llamada _registrarUsuario que esta recibiendo dos parámetros que son necesarios, el EMAIL y la CONTRASEÑA, y ponemos la función createUserWithEmailAndPassword en un try{}catch(e){} para evitar cualquier problema en el caso de que surja.

Con todo esto solo falta las acciones a realizar cuando el usuario se Registe o inicie sesion:

Navegamos a HomePage cuando inicie sesion
Navegamos a HomePage cuando se registre

6. FUNCIONAMIENTO

Es hora de ver el código en funcionamiento y empezaremos con Registrar un usuario nuevo:

Registrando Usuario
Usuario creado correctamente

Ahora probaremos iniciando sesión con un usuario existente:

7. COMPROBANDO ESTADO DE SESIÓN

Comprobaremos el estado de sesión para no volver a iniciar sesión cada que inicia la aplicación, en otras palabras verificaremos si previamente ya inicio la sesión y si es así entonces se dirigirá automáticamente a la pantalla de inicio, para lo cual solo basta con que usemos el siguiente código:

Este código generalmente se pone en una pantalla usada como “SplashScreen”, pero en nuestro caso pondremos esta función en la pantalla de LoginEmail.dart, y lo llamaremos en la función InitState

Con esto nos permitirá preguntar si previamente ya se inicio sesión.

8. CERRANDO SESIÓN

para cerrar sesion basta con la siguiente linea de codigo:

await FirebaseAuth.instance.signOut();

Despues de cerrar sesión lo lógico es volver a la pantalla de Inicio de Sesión

--

--