Angular中使用Firebase实现身份认证，导入auth无导出成员如何解决

报错根因 #

你遇到的'"firebase/app"' has no exported member 'auth'报错，是Firebase JS SDK版本语法不匹配导致的：

• 参考的公开教程对应Firebase v8及更早版本，该版本会从firebase/app导出全局auth命名空间
• 当前项目安装的是Firebase v9+版本，为了支持Tree Shaking优化，官方重构了所有模块的导出入口，不再从firebase/app导出auth相关功能，沿用老教程写法就会触发找不到导出成员的编译错误。

代码修正方案 #

根据项目对应的Firebase版本，调整导入和调用逻辑即可：

场景1：使用Firebase v9+（当前主流版本，配套@angular/fire v7+） #

不需要再从firebase/app引入auth相关能力，直接从独立的auth模块入口导入所需功能，适配新版@angular/fire的API，修正后的AuthService代码如下：

import { Injectable } from '@angular/core';
// 从独立的firebase/auth模块导入需要的认证类
import { FacebookAuthProvider } from 'firebase/auth';
import { AngularFireAuth } from '@angular/fire/auth';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(
    public afAuth: AngularFireAuth,
  ) { }

  // Facebook登录入口
  FacebookAuth() {
    return this.AuthLogin(new FacebookAuthProvider());
  }  

  // 通用授权登录逻辑
  AuthLogin(provider: FacebookAuthProvider) {
    // 适配新版@angular/fire的API，不再使用旧版afAuth.auth.xxx的嵌套调用方式
    return this.afAuth.signInWithPopup(provider)
      .then((result) => {
        console.log('登录成功', result.user);
      })
      .catch((error) => {
        console.log('登录失败', error);
      });
  }
}

注意：如果需要其他社交登录（Google、Apple、GitHub等），只需要从firebase/auth导入对应XXXAuthProvider类，按相同逻辑传入signInWithPopup即可，不需要额外引入第三方适配库。

场景2：仍使用Firebase v8版本 #

如果项目锁定的是Firebase 8.x版本，不能沿用import { auth } from 'firebase/app'的写法，正确导入方式为：

import * as firebase from 'firebase/app';
// 引入auth模块的扩展
import 'firebase/auth';

// 之后即可正常使用 new firebase.auth.FacebookAuthProvider() 创建实例

无第三方依赖的认证实现能力 #

完全可以不依赖angularx-social-login、ngx-auth-firebaseui这类第三方库，仅靠官方Firebase SDK + @angular/fire 实现完整的认证流程：

• 全类型认证支持：覆盖邮箱密码登录、手机号登录、Google/Facebook/Apple/GitHub等所有Firebase支持的社交登录方式
• 登录态全局响应：直接调用@angular/fire提供的authState可观察对象，即可在应用任意位置获取当前登录用户信息，响应登录、登出状态变化
• 平台侧能力托管：所有社交登录的OAuth配置、域名校验、回调处理都由Firebase控制台完成，前端不需要写额外的授权适配逻辑
• 常用方法直连：登出、获取当前用户、更新用户信息等能力，都可以直接通过afAuth实例的对应方法调用，没有额外的适配层

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