Auth Guard error when providing authpipe direct rather than as pipe generator (v9 new API not compat)
- Dominant language
- TypeScript
- Stars
- 7.8k
- Forks
- 2.2k
- Avg merge
- 22h 28m
- Merged PRs (30d)
- 6
Description
### 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`
Contributor guide
Research direction
Start with src/auth-guard/auth-guard.ts at the line that triggers the error, then reproduce the route configuration using authGuardPipe with the AngularFire v9 API shown in the issue. Done means a direct AuthPipe works without “Unable to lift unknown Observable type,” while the existing auth guard behavior still redirects unauthenticated and unverified users as described.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, firebase, typescript
- Domain
- authentication
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100