Angular 17 + @angular/fire 17.0.0使用signInWithCustomToken报错求助

问题原因 #

你直接调用了@angular/fire/auth中的signInWithCustomToken和getAuth函数，但在Angular独立应用模式下，需要通过依赖注入AngularFireAuth服务完成认证操作，而非直接调用底层函数，这导致AngularFire上下文未被正确识别，触发了错误。

解决方案 #

1. 修改服务文件，依赖注入AngularFireAuth #

将服务中的直接调用改为注入AngularFireAuth实例，通过实例调用认证方法：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { from } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(private afAuth: AngularFireAuth) {}

  async signInWithCustomToken() {
    const token = await this.getToken(); // 你的令牌获取逻辑
    return from(this.afAuth.signInWithCustomToken(token));
  }

  private async getToken() {
    // 调用Firebase函数获取自定义令牌的逻辑
    const response = await fetch('你的Firebase函数接口地址');
    const data = await response.json();
    return data.customToken;
  }
}

2. 验证app.config.ts的Firebase配置 #

现有配置基本正确，确保provideAuth已正确添加到提供者列表中：

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    importProvidersFrom(
      provideFirebaseApp(() => initializeApp(firebaseConfig)),
      provideFirestore(() => getFirestore()),
      provideStorage(() => getStorage()),
      provideAuth(() => getAuth()) // 确认该行存在
    ),
    provideAnimations(),
    provideHttpClient(),
    DatePipe
  ],
};

3. 确保在Angular上下文内调用方法 #

认证方法必须在Angular注入的服务或组件中执行，不能在Angular上下文外（比如全局函数、非注入类）调用，否则会再次触发上下文缺失的错误。

关键说明 #

@angular/fire的认证方法依赖Angular的依赖注入上下文，使用AngularFireAuth服务而非直接调用firebase/auth的原生函数，能确保AngularFire的配置被正确识别，避免出现模块未提供的错误。

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