What is the Angular/Fire best practice for using Auth?

[ronaldohoch]

Hi guys!

I'm developing a website and i decided to use firebase to learn. But the documentation of @angular/fire/auth seems not complete or out of date. So, i have 2 implementations of the same code.

Version 1
signupService.ts

import { Injectable } from '@angular/core';

//firebase
import {
  Auth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  UserCredential
} from '@angular/fire/auth';
import { AngularFireAuth } from '@angular/fire/compat/auth';
//rxjs
import { Observable, from } from 'rxjs';
import { tap } from 'rxjs/operators';
//environment
import { environment } from '../../../environments/environment';
@Injectable({
  providedIn: 'root'
})
export class SignupService {
  user = {} as any;
  // private $user: Observable<UserCredential>;
  constructor(
    private auth: Auth,
    private afAuth: AngularFireAuth,
  ) {
    this.afAuth.onAuthStateChanged(user=>{
      this.user = user;
      if(user){
        if(!user.emailVerified && environment.production){
          user.sendEmailVerification();
        }
      }
    })
  }

  emailLogin(email: string, password: string): Observable<UserCredential> {
    return from(signInWithEmailAndPassword(this.auth, email, password))
  }

  createUserWithEmail(email: string, password: string, name: string): Observable<UserCredential> {
    return from(createUserWithEmailAndPassword(this.auth, email, password))
      .pipe(tap(login => {
        this.user.updateProfile({
          displayName: name
        });
      }));
  }

  signOut(){
    this.auth.signOut();
  }
}

Version 2

import { Injectable } from '@angular/core';
//firebase
import { AngularFireAuth } from '@angular/fire/compat/auth';
//rxjs
import { Observable, from } from 'rxjs';
import { tap } from 'rxjs/operators';
//environment
import { environment } from '../../../environments/environment';
@Injectable({
  providedIn: 'root'
})
export class SignupService {
  user = {} as any;
  constructor(
    private afAuth: AngularFireAuth,
  ) {
    this.afAuth.onAuthStateChanged(user=>{
      this.user = user;
      if(user){
        if(!user.emailVerified && environment.production){
          user.sendEmailVerification();
        }
      }
    })
  }

  emailLogin(email: string, password: string): Observable<any> {
    return from(this.afAuth.signInWithEmailAndPassword(email, password))
  }

  createUserWithEmail(email: string, password: string, name: string) {
    return from(this.afAuth.createUserWithEmailAndPassword(email, password))
      .pipe(tap(login => {
        this.user.updateProfile({
          displayName: name
        });
      }));
  }

  signOut(){
    this.afAuth.signOut().then(data=>console.log(data));
  }
}

Both versions are using AngularFireAuth because i couldn't send email using only Auth. 🤔
The Auth code to send email:

    this.auth.onAuthStateChanged(user=>{
      this.user = user;
      if(user){
        user.sendEmailVerification();
      }
    })

Brings this error.

I can use both versions, but i can't unsubscribe when transforming Promise into Observable:

So, what should i use and how to unsubscribe it?

[marcellokabora]

I cant even login using this implementation I got TypeError: n.auth is not a function