angular / angular/angularfire

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

Abierto
#3,273 6 comentarios 1 reacción 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
7.8k
Forks
2.2k
Merge medio
22 h 28 min
PR fusionados (30 d)
6

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con src/auth-guard/auth-guard.ts en la línea que desencadena el error y, a continuación, reproduce la configuración de la ruta usando authGuardPipe con la API de AngularFire v9 mostrada en el issue. La tarea estará terminada cuando un AuthPipe directo funcione sin “Unable to lift unknown Observable type”, mientras el comportamiento existente del auth guard siga redirigiendo a los usuarios no autenticados y no verificados como se describe.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, firebase, typescript
Área
authentication
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.