0

I'm initializing a new app with angular 13 and angular fire 7.

when using AngularFireAuthGuard I got nullInjetor error

import { AngularFireAuthGuard } from '@angular/fire/compat/auth-guard';

I change it to AuthGuard and every thing works great

import { AuthGuard } from '@angular/fire/auth-guard';

is that valid and good way ? or I have to provide any thing to use AngularFireAuthGuard !!

imports that works:

import {redirectLoggedInTo,redirectUnauthorizedTo,} from '@angular/fire/compat/auth-guard';
import { AuthGuard } from '@angular/fire/auth-guard';
Ali Maher
  • 251
  • 2
  • 8

1 Answers1

1

try to use ...canActivate

import { canActivate } from '@angular/fire/compat/auth-guard';

const adminOnly = () => hasCustomClaim('admin');
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
const redirectLoggedInToItems = () => redirectLoggedInTo(['items']);
const belongsToAccount = (next) => hasCustomClaim(`account-${next.params.id}`);

export const routes: Routes = [
    { path: '',             component: AppComponent },
    { path: 'login',        component: LoginComponent,    ...canActivate(redirectLoggedInToItems) },
    { path: 'items',        component: ItemListComponent, ...canActivate(redirectUnauthorizedToLogin) },
    { path: 'admin',        component: AdminComponent,    ...canActivate(adminOnly) },
    { path: 'accounts/:id', component: AdminComponent,    ...canActivate(belongsToAccount) }
];

I got the solution from AngularFire docs through this link AngularFire GitHub docs

Anan
  • 11
  • 5