6: Implementar Autenticación con Firebase

Objetivo

Implementar autenticación de usuarios en la aplicación utilizando Firebase Authentication.

Configurar Firebase Authentication

Abre src/app/app.module.ts y asegúrate de que el módulo AngularFireAuthModule esté importado:

import { AngularFireAuthModule } from '@angular/fire/compat/auth';

Implementar Registro y Autenticación

Abre src/app/home/home.page.ts y agrega la lógica para registrar y autenticar usuarios:

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  email: string = '';
  password: string = '';
  user: any;

  constructor(private afAuth: AngularFireAuth) {}

  async register() {
    const userCredential = await this.afAuth.createUserWithEmailAndPassword(this.email, this.password);
    this.user = userCredential.user;
  }

  async login() {
    const userCredential = await this.afAuth.signInWithEmailAndPassword(this.email, this.password);
    this.user = userCredential.user;
  }

  logout() {
    this.afAuth.signOut();
    this.user = null;
  }
}

Editar `home.page.html`

Abre src/app/home/home.page.html y agrega el siguiente contenido:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Firebase Auth
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-item *ngIf="!user">
    <ion-label position="floating">Email</ion-label>
    <ion-input [(ngModel)]="email"></ion-input>
  </ion-item>
  <ion-item *ngIf="!user">
    <ion-label position="floating">Contraseña</ion-label>
    <ion-input [(ngModel)]="password" type="password"></ion-input>
  </ion-item>
  <ion-button expand="full" *ngIf="!user" (click)="register()">Registrar</ion-button>
  <ion-button expand="full" *ngIf="!user" (click)="login()">Iniciar Sesión</ion-button>
  <ion-button expand="full" *ngIf="user" (click)="logout()">Cerrar Sesión</ion-button>
  <div *ngIf="user">
    <p>Usuario: {{ user.email }}</p>
  </div>
</ion-content>

Conceptos Básicos

Firebase Authentication proporciona servicios de autenticación fáciles de usar, permitiendo autenticar usuarios mediante correo electrónico, redes sociales y otros métodos.

Ejercicio