使用Auth0令牌/Open ID Connect登录Firebase遇配置错误

问题描述 #

尝试通过Auth0与Firebase Authentication联动登录以访问数据库：已实现从Angular应用跳转至Auth0完成登录并返回，能通过监听器获取Auth0的原始ID Token；随后调用Firebase Auth的signInWithCredential方法，结合该令牌与提供商信息尝试登录，已完成Auth0与Firebase Open ID Connect的关联配置，代码中使用OAuthProvider('oidc.test')。

期望结果 #

通过Auth0的Open ID Connect令牌成功登录Firebase Authentication。

遇到的错误 #

signInWithCredential方法返回错误：

OPERATION_NOT_ALLOWED : The identity provider configuration is not found.

技术栈 #

Angular 15、Firebase、TypeScript、Firebase Authentication Open ID Connect、第三方Auth0。

Angular组件代码示例 #

ngOnInit(): void {
  // Auth0监听器 - 获取令牌
  this.authService.idTokenClaims$.subscribe(data => {
    if (data) {
      this.token = data.__raw;
    }
  })

  // Auth0监听器 - 获取用户
  this.authService.user$.subscribe(user => {
    if (user) {
      setTimeout(() => {
        this.login();
      }, 1500);
    }
  })
}

logOut(): void {
  this.authService.logout({ logoutParams: { returnTo: document.location.origin } })
}

sso(): void {
  this.authService.loginWithRedirect();
}

login(): void {
  const auth = getAuth();
  const provider = new OAuthProvider('oidc.test');
  const credential = provider.credential({
    idToken: this.token,
  });

  signInWithCredential(auth, credential)
    .then((result) => {
      console.log(result);
    })
    .catch((error) => {
      console.log(error);
    });
}

控制台错误截图 #

Firebase配置截图 #

参考文档 #

• Firebase手动登录流程（Open ID Connect）
• Auth0 Angular快速开始

解决方法 #

1. 匹配提供商ID
   代码中new OAuthProvider('oidc.test')的参数必须与Firebase控制台中配置的OIDC提供商ID完全一致。打开Firebase控制台的「Authentication > 登录方法 > OIDC提供商」，查看你创建的Auth0关联条目里的“提供商ID”，替换代码中的字符串。

2. 验证Firebase配置正确性
   确认Firebase里OIDC提供商的授权端点、令牌端点、Issuer URL都与Auth0的对应地址一致，证书配置正确（Auth0的JWKS URL格式通常为https://<你的Auth0域名>/.well-known/jwks.json）。

3. 检查ID Token有效性
   确保Auth0返回的ID Token的iss字段与Firebase配置中的Issuer匹配，令牌未过期，且签名算法符合Firebase要求（推荐使用RS256）。

4. 优化代码逻辑
   原代码中的setTimeout延迟可能导致令牌未就绪，建议合并订阅逻辑，等令牌和用户信息都获取到后再执行登录：

   import { combineLatest } from 'rxjs';
   import { filter } from 'rxjs/operators';
   
   ngOnInit(): void {
     combineLatest([this.authService.idTokenClaims$, this.authService.user$])
       .pipe(filter(([claims, user]) => !!claims && !!user))
       .subscribe(([claims, user]) => {
         this.token = claims.__raw;
         this.login();
       });
   }
   

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