CODEWITHSUNDEEP
angularangular-materialangularfire
ebem
ebem

Reputation: 75

Angularfire auth guard and angular material not working together

I am trying out angularfire and their auth guards. I used their documentation to learn how to setup my auth guards. And everything seemed perfect, but then I noticed that in my login page angular material input fields aren't responding anymore. And there are no error messages in console. If I remove canActivate guard, then angular material input works. What could be the issue here, did I miss some step or I need some additional setup? I created a small demo app to test it and it had the same issue. demo app in github

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {LoginComponent} from './login/login.component';
import {canActivate, redirectLoggedInTo, redirectUnauthorizedTo} from '@angular/fire/auth-guard';
import {DashboardComponent} from './dashboard/dashboard.component';

const redirectLoggedInToDashboard = () => redirectLoggedInTo(['dashboard']);
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);


const routes: Routes = [
  {path: '', redirectTo: 'login', pathMatch: 'full'},
  {path: 'login', component: LoginComponent, ...canActivate(redirectLoggedInToDashboard)},
  {path: 'dashboard', component: DashboardComponent, ...canActivate(redirectUnauthorizedToLogin)},
  {path: '**', redirectTo: 'login'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

login.component.html

<div class="login">
  <mat-form-field appearance="legacy">
    <mat-label>Legacy form field</mat-label>
    <input matInput placeholder="Placeholder">
    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    <mat-hint>Hint</mat-hint>
  </mat-form-field>
</div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AngularFireModule } from '@angular/fire';
import {environment} from '../environments/environment';
import {AngularFirestoreModule} from '@angular/fire/firestore';
import {AngularFireAnalyticsModule} from '@angular/fire/analytics';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {AngularFireAuthGuardModule} from '@angular/fire/auth-guard';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireAnalyticsModule,
    BrowserAnimationsModule,
    AngularFireAuthGuardModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Input is not responding - no borders around, label isn't at the top

Update: After opening the console I get this warning: Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

Upvotes: 4

Views: 2309

Answers (1)

Wilmar
Wilmar

Reputation: 273

Your setup is correct. However there is a current issue with the Angularfireguard interfering with Angular Zones hence this is why you are seeing this weird issues in Angular Material. You can check the following link for the issue which is already reported on the Angularfire repo https://github.com/angular/angularfire/issues/2355

I added your github repo and issue report there since I am having the same exact problem. As a workaround, you can setup your own custom auth guard which should resolve the error for now. Hopefully this will be resolved soon.

Upvotes: 5

Related Questions