Registrando usuarios

Aprende a implementar un flujo de registro robusto en Angular con Firebase Authentication. Verás cómo inyectar AngularFireAuth, usar el método createUserWithEmailAndPassword, manejar errores con .then y .catch, y conectar tu formulario con two-way data binding mediante ngModel. Todo optimizado para un desarrollo claro y mantenible.

¿Cómo registrar usuarios en Firebase con Angular?

Para habilitar el registro, se agrega un constructor al servicio de autenticación e inyecta AngularFireAuth. Este objeto permite ejecutar operaciones de autenticación en Firebase y acceder a su API de usuario.

• Inyectar el service de AngularFireAuth en el constructor.
• Usar el objeto auth y el método createUserWithEmailAndPassword.
• Manejar la respuesta con .then y los errores con .catch.

¿Qué hace AngularFireAuth y cómo inyectarlo?

Este objeto expone las operaciones de autenticación. Se inyecta como dependencia privada para usarlo dentro del servicio.

// authorizationService.ts
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';

@Injectable({ providedIn: 'root' })
export class AuthorizationService {
  constructor(private angularFireAuth: AngularFireAuth) {}

  registro(email: string, password: string) {
    return this.angularFireAuth.auth
      .createUserWithEmailAndPassword(email, password)
      .then((response) => {
        alert('Usuario registrado con éxito');
        console.log(response);
      })
      .catch((error) => {
        alert('Un error ha ocurrido');
        console.log(error);
      });
  }
}

¿Cómo usar createUserWithEmailAndPassword con promesas?

El flujo usa promesas. A diferencia de .subscribe en Observables, aquí se encadenan .then y .catch para éxito y error.

• .then(response) para confirmar el registro y depurar con console.log.
• .catch(error) para informar al usuario y registrar el error.

¿Cómo manejar errores de autenticación correctamente?

Es clave informar al usuario y registrar el detalle técnico. Por ejemplo, mostrar un alert y usar console.log(error) para el diagnóstico.

• Mensaje claro para el usuario.
• Registro del error para depuración.

¿Cómo conectar el formulario de registro con el servicio?

El botón de “Registrar” debe llamar una función registrar() en el componente. Los datos del formulario viajan mediante two-way data binding con ngModel hacia un objeto registro con email y password.

¿Cómo preparar registro.component.ts con two-way data binding?

Se crea un objeto local y una función que delega en el servicio.

// registro.component.ts
import { Component } from '@angular/core';
import { AuthorizationService } from './authorizationService';

@Component({
  selector: 'app-registro',
  templateUrl: './registro.component.html'
})
export class RegistroComponent {
  registro: any = { email: '', password: '' };

  constructor(private authService: AuthorizationService) {}

  registrar() {
    this.authService.registro(this.registro.email, this.registro.password);
  }
}

¿Cómo enlazar el botón Registrar en registro.component.html?

Se usa two-way data binding con ngModel y se llama a registrar() en el click.

<!-- registro.component.html -->
<input type="email" [(ngModel)]="registro.email" placeholder="Correo" />
<input type="password" [(ngModel)]="registro.password" placeholder="Contraseña" />
<button (click)="registrar()">Registrarse</button>

• Datos sincronizados con el objeto registro.
• Acción centralizada en la función registrar().

¿Cómo habilitar el método email/password en Firebase Authentication?

Si aparece un error de “operación no permitida” y falta un provider para sign-in, es porque el método Email/Password está deshabilitado en Firebase.

¿Qué mensaje de error indica que falta un provider?

El sistema notifica que la operación no está permitida y que no existe un provider para ese sign-in. Esto apunta a la configuración de Authentication en el panel de Firebase.

• Error visible tras intentar registrarse.
• Indica que falta habilitar el método.

¿Cómo verificar el usuario creado en el dashboard?

Tras habilitar Email/Password en Authentication y repetir el registro, se confirma el éxito con un alert. Luego, en el dashboard de Firebase, en la sección Users, aparece el nuevo usuario.

• Habilitar Email/Password con el lápiz y el switch.
• Guardar la configuración con “save”.
• Revisar la lista de usuarios en Users.

¿Tienes dudas sobre la integración con AngularFireAuth o el enlace con ngModel? Cuéntame en comentarios qué parte te gustaría ver en más detalle.