getRedirectResult() always returns null - Unable to retrieve idToken after signInWithRedirect()
- 主要語言
- TypeScript
- 星號
- 7.8k
- 分支
- 2.2k
- 平均合併
- 22 小時 28 分鐘
- 30 天內合併 PR
- 6
描述
### Version info
**Angular:** 15
**Firebase:** 9
**AngularFire:** 7.5.0
### How to reproduce these conditions
**Steps to set up and reproduce**
> Note: I am testing this locally and on a mobile device. In both cases I am using Chrome. The application is hosted locally running `ng serve --watch --ssl --host 0.0.0.0` which means the SSL certificate is not valid. I mention this in case it is relevant.
I'm simply calling `signInWithRedirect()` and install an `APP_INITIALIZER` provider to make sure the `idToken` is loaded as the app starts.
However, the `idToken` (as well as the `credentials`) are always `null`/`undefined` and I have no idea why. Could be related to (https://github.com/angular/angularfire/issues/3208).
```typescript
public signInWithGoogle() {
return signInWithRedirect(this.auth, new GoogleAuthProvider());
}
```
```typescript
export const AUTH_ID_TOKEN_INITIALIZER_PROVIDER: Provider = {
provide: APP_INITIALIZER,
deps: [NGXLogger, AuthService],
multi: true,
useFactory: (logger: NGXLogger, authService: AuthService) => {
return async () => {
logger.info("Initializing App: Waiting for (API) idToken");
const credentials = await getRedirectResult(authService.auth);
console.log(credentials); // Is already null
const idToken = await credentials?.user.getIdToken();
console.log(idToken);
if (idToken) {
return idToken;
}
await authService.init(); // <-- Implementation below (put it here for testing)
return firstValueFrom(authService.idToken$);
}
},
};
```
I tried a different approach after reading that we have to wait for `onAuthStateChanged()` to fire and only after that we're supposed to fetch the `idToken`. The implementation looked like this (with the same result however):
```typescript
async init() {
this.logger.debug("Checking for token from redirect");
const credentials = await getRedirectResult(this.auth);
this.idToken = await credentials?.user.getIdToken();
await this.auth.onAuthStateChanged(
async () => {
const credentials = await getRedirectResult(this.auth);
this.idToken = await credentials?.user.getIdToken();
console.log("inner");
console.log(this.idToken);
}
);
console.log("outer");
console.log(this.idToken);
}
```
### Expected behavior
Receive a valid `idToken` after beind redirected.
### Actual behavior
Credentials & token are `null` / `undefined`.
貢獻指南
研究方向
首先使用 Angular 15、Firebase 9 和 AngularFire 7.5.0 重現 redirect 流程,重點關注 signInWithRedirect()、getRedirectResult()、APP_INITIALIZER 和 onAuthStateChanged()。追蹤 getRedirectResult() 的呼叫時機,並透過在 redirect 後接收到有效的 credential 和 idToken 來驗證流程已完成。
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- angular, firebase, typescript
- 領域
- authentication
- Issue 類型
- 缺陷
- 難度
- 3/5
- 預估耗時
- 1-2 天
- 活躍度
- 冷清
- 描述清晰度
- 基本清楚
- 新手友好度
- 48/100