Crear Login con Firebase y Ionic 5, Autenticacion con Correo Electronico

Login hecho con Ionic y autenticacion mediante Firebase

Vamos a detallar los pasos para crear este login y todo lo que necesitas

Requerimentos

• Un editor de codigo por ejemplo Visual Studio Code
• Un navegador instalado
• Node js,Ionic,Angular
• Una cuenta de google

Pasos

1. Crearemos en Firebase un Proyecto del tipo web y en nuestra maquina un proyecto de Ionic, en este caso un proyecto en blanco
2. En ajustes del Proyecto, Guardaremos las variables que nos da Firebase que se obtinene en nuestro proyecto de Firebase en los ajustes de la consola en sdk snippet
   
   firebaseConfig = {
   apiKey: "AIzaSyBvWAwkse4Vh_AIzaSyBvWAwkse4Vh",
   authDomain: "AIza_AIzaSyBvWAwkse4Vh",
   databaseURL: "https://aswc-ff66a4.firebaseio.com",
   projectId: "a-ff66a4",
   storageBucket: "a-ff66a4.appspot.com",
   messagingSenderId: "a-ff66a422",
   appId: "1:a-jjjjff66a4:web:a-ff66a4a-ff66a4",
   measurementId: "G-a-ff66a4"
   };
3. Copia estos datos y proyecto en enviorement crearemos una constante que guarde estos datos y en ambos enviorement de nuestro Proyecto de Ionic en la carpeta src app enviorement
   
   export const firebaseConfig = {
   apiKey: "AIzaSyBvWAwkse4Vh_AIzaSyBvWAwkse4Vh",
   authDomain: "AIza_AIzaSyBvWAwkse4Vh",
   databaseURL: "https://aswc-ff66a4.firebaseio.com",
   projectId: "a-ff66a4",
   storageBucket: "a-ff66a4.appspot.com",
   messagingSenderId: "a-ff66a422",
   appId: "1:a-jjjjff66a4:web:a-ff66a4a-ff66a4",
   measurementId: "G-a-ff66a4"}
4. Ahora instalaremos el paquete desde nuestra consola en la ruta del proyecto de Ionic o si tienen VS code abrir terminal y mientras se instala crearemos el diseño:
   npm install firebase @angular/fire --save
5. En src/app/home/home.html agregaremos el diseño de nuestra app en este caso el login
   
6. Ya tenemos el npm y nuestro login con diseño ahora recuerdas el enviorement lo vamos a importar en nuestro app.module.ts junto al npm que instalamos
   import{ firebaseConfig} from '../environments/environment';
   import { AngularFireModule } from '@angular/fire';
   import {AngularFireAuthModule} from '@angular/fire/auth';
   
7. Y ahora vamos a inicializar nuestra app con los parametros de configuracion de la app en el NGModule
   imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,AngularFireModule.initializeApp(firebaseConfig),AngularFireAuthModule],
8. Con esto ya tenemos Firebase en nuestro proyecto y ahora vamos a abrir la consola para manejar los servicios y proveedores de datos
   ionic generate service servicios/auth
9. Nos crea una carpeta y archivo abrimos el archivo y importamos
   import {AngularFireAuth} from'@angular/fire/auth';
10. En el constructor creamos un parametro privado de nombre AFauthy del tipo AngularFireAuth              
    constructor(private AFauth: AngularFireAuth) { }
11. Ahora en la clase del seervicio creamos las funciones, la primera sera de Login
    login(email:string,password:string){ this.AFauth.signInWithEmailAndPassword(email,password).then(res=>{ console.log("Resultado:"+res); }).catch(err=>console.log("Error:"+err)) }
12. Ahora nos dirigimos a home.ts y agregamos el servicio al login importandolo
    import{AuthService} from'../servicios/auth.service';
13. Y importamos a nuestro constructor del home.ts un valor privado de nombre authservice del tipo AuthService y con esto tenemos acceso a todos los metodos del servicio
    constructor(private authservice: AuthService) {}
14. Y creamos en el home.ts la funcion para el boton Entrar y las variables email y password
    email:string;
    password:string;
    constructor(private authservice: AuthService) {}
    onsubmitlogin(){
    this.authservice.login(this.email,this.password); }
15. En el home.html llamamos a esta funcion
    
16. Y en el html a cada imput le damos los valores que creamos en el home.ts
    
17. Nos diirigimos a Firease y en nuestro proyecto en autenticacion activamos correo electronico y como es un login en usuarios agregamos un correo y contraseña
18. Si todo hicimos bien en la consola nos aparecera Resultado:Object Object
19. Nuestra app cumple pero vamos a mejorarla cambiando en el servicio usando una promesa que nos devuelve un
    login(email:string,password:string){
    return new Promise((resolve,rejected)=>{
    this.AFauth.signInWithEmailAndPassword(email,
    password).then(user => {
    resolve(user);
    }).catch(err => rejected(err));
    });
    }
20. En el home.ts modificamos nuestra funcion para trabajar con la promesa y si es res nos dirigira a una nueva pagina en este caso la llamaremos dash
    import { Router}from'@angular/router'
    constructor(private authservice:
    AuthService,public router:Router) {}
    onsubmitlogin(){
    this.authservice.login(this.email,this.password).then(res=>{
    this.router.navigate(['/dash'])
    }).catch(err=>alert("Los datos son incorrectos o no existe el usuario")); }
21. Creemos nuestra pagina dash y en ella un boton que nos diriga al home y listo hemos acabado
    ionic generate page dash
    en el dash.ts
    import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    @Component({ selector: 'app-dash',
    templateUrl: './dash.page.html',
    styleUrls: ['./dash.page.scss'],
    })
    export class DashPage implements OnInit {
    constructor(public router: Router) { }
    ngOnInit() { }
    sfuera(){
    this.router.navigate(['/home'])
    } }
    en el dash.html Salir