Auth Guard error when providing authpipe direct rather than as pipe generator (v9 new API not compat)
- 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
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