如何使用AngularFireAuth初始化FirebaseUI组件？——AngularFire最新版本移除auth属性后的初始化报错问题

Since newer AngularFire versions (v7+) removed the direct auth property from AngularFireAuth, passing this.auth.auth to initialize FirebaseUI's AuthUI won't work anymore. Here's a straightforward fix:

Step 1: Retrieve the Native Firebase Auth Instance #

AngularFire provides a helper method getAuth() to fetch the underlying Firebase Auth instance. First, import this method from @angular/fire/auth.

Step 2: Initialize FirebaseUI with the Native Instance #

Use the retrieved native auth object to create your FirebaseUI AuthUI instance.

Here's your updated code:

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth, getAuth } from '@angular/fire/auth';
import firebaseui from 'firebaseui';

@Component({
  // Your component metadata (selector, template, etc.) goes here
})
export class LoginComponent implements OnInit {
  ui!: firebaseui.auth.AuthUI;

  constructor(public auth: AngularFireAuth) { }

  ngOnInit() {
    // Get the native Firebase Auth instance
    const nativeAuth = getAuth();
    // Initialize FirebaseUI with the native instance
    this.ui = new firebaseui.auth.AuthUI(nativeAuth);

    // Add your FirebaseUI configuration here (example below)
    // this.ui.start('#firebaseui-auth-container', {
    //   signInOptions: [firebase.auth.EmailAuthProvider.PROVIDER_ID],
    //   signInSuccessUrl: '/'
    // });
  }
}

Quick Notes: #

• Double-check that your app module has been properly initialized with AngularFire and your Firebase project config.
• Ensure your FirebaseUI version matches the Firebase SDK version bundled with AngularFire to avoid compatibility issues.

内容的提问来源于stack exchange，提问作者sumit kushwah