angular / angular/angularfire

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

Đang mở
#3,273 6 bình luận 1 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
TypeScript
Star
7.8k
Fork
2.2k
Merge trung bình
22 giờ 28 phút
Pull request đã merge (30 ngày)
6

Mô tả

### 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`

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với src/auth-guard/auth-guard.ts tại dòng gây ra lỗi, sau đó tái hiện cấu hình route bằng authGuardPipe với API AngularFire v9 được nêu trong issue. Hoàn tất khi một AuthPipe trực tiếp hoạt động mà không có “Unable to lift unknown Observable type”, trong khi hành vi hiện có của auth guard vẫn chuyển hướng người dùng chưa xác thực và chưa được xác minh như mô tả.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, firebase, typescript
Lĩnh vực
authentication
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.