angular / angular/angularfire

Auth Guard error when providing authpipe direct rather than as pipe generator (v9 new API not compat)

未关闭
#3,273 6 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
TypeScript
星标
7.8k
派生
2.2k
平均合并
22 小时 28 分钟
30 天内合并 PR
6

描述

### Version info

**Angular:** 14

**Firebase:** 9

**AngularFire:** ^7.4.1

**Other (e.g. Ionic/Cordova, Node, browser, operating system):**
Node, Firefox/Chrome, Windows

### How to reproduce these conditions

I've created stackoverflow Q&A of the issue https://stackoverflow.com/questions/73799781/how-to-create-auth-guard-in-angular-fire-v9-with-new-api-not-compat
I believe this is a bug and not a documentation issue given the naming of `authGuardPipe`

When using guard below and navigating to a guarded feature as a user with email not verified (used emulators) this throws the error `TypeError: Unable to lift unknown Observable type` triggered by https://github.com/angular/angularfire/blame/master/src/auth-guard/auth-guard.ts#L21

```
const redirectUnauthorizedAndUnverifiedToAuth: AuthPipe = map((user: User | null) => {
// if not logged in, redirect to `auth`
// if logged in and email verified, allow redirect
// if logged in and email not verified, redirect to `auth/verify`
return !!user ? (user.emailVerified ? true : ['auth', 'verify']) : ['auth']
})
```
Replacing `redirectUnauthorizedAndUnverifiedToAuth` in `data : { authGuardPipe: redirectUnauthorizedAndUnverifiedToAuth }` with `authPipeGenerator` fixes

**Failing test unit, Stackblitz demonstrating the problem**

Can't produce stackblitz due to error https://github.com/stackblitz/core/issues/2039

**Steps to set up and reproduce**

Created basic auth & my-feature modules, v9 new API angular imports

```
...
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
import {
provideFirestore,
getFirestore,
connectFirestoreEmulator,
} from '@angular/fire/firestore';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
provideFirebaseApp(() => initializeApp(firebase)), <--- provide firebase
provideAuth(() => {
const auth = getAuth();
// connectAuthEmulator(auth, 'http://localhost:9099')
return auth;
}),
provideFirestore(() => {
const firestore = getFirestore();
// connectFirestoreEmulator(firestore, 'localhost', 8080)
return firestore;
}),
],
declarations: [AppComponent, HelloComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
```

app-routing.module.ts
```
import { NgModule } from '@angular/core';
import { User } from '@angular/fire/auth';
import { AuthGuard, AuthPipe, AuthPipeGenerator } from '@angular/fire/auth-guard';
import { Routes, RouterModule } from '@angular/router';
import { map } from 'rxjs';

const redirectUnauthorizedAndUnverifiedToAuth: AuthPipe = map((user: User | null) => {
// if not logged in, redirect to `auth`
// if logged in and email verified, allow redirect
// if logged in and email not verified, redirect to `auth/verify`
return !!user ? (user.emailVerified ? true : ['auth', 'verify']) : ['auth']
})
const authPipeGenerator: AuthPipeGenerator = () => redirectUnauthorizedAndUnverifiedToAuth

const routes: Routes = [
{
path: "auth",
loadChildren: () => import("./auth/auth.module").then(m => m.AuthModule)
},
{
path: "my-feature",
loadChildren: () => import("./my-feature/my-feature.module").then(m => m.MyFeatureModule),
canActivate: [AuthGuard],
data: { authGuardPipe: redirectUnauthorizedAndUnverifiedToAuth }
},
{ path: "", redirectTo: "auth", pathMatch: "full" },
{ path: "**", redirectTo: "auth" }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
```

### Expected behavior

if you provide pipe this should work esp. given the name `authGuardPipe`
```
{
path: "my-feature",
loadChildren: () => import("./my-feature/my-feature.module").then(m => m.MyFeatureModule),
canActivate: [AuthGuard],
data: { authGuardPipe: redirectUnauthorizedAndUnverifiedToAuth }
},
```

### Actual behavior

Error `TypeError: Unable to lift unknown Observable type`

贡献指南

打开贡献指南

调研方向

从触发错误的那一行开始查看 src/auth-guard/auth-guard.ts,然后使用 issue 中展示的 AngularFire v9 API 通过 authGuardPipe 复现路由配置。当直接使用 AuthPipe 时不再出现“Unable to lift unknown Observable type”,同时现有的 auth guard 行为仍按描述重定向未认证和未验证的用户时,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, firebase, typescript
领域
authentication
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。