AngularFire2 app.auth is not a function

Question

So I have been trying to experiment with Angular and Firebase, and wanted to get the angularfire2 auth system working. I followed some online tutorials and frankensteined this app together. I have a little experience in Angular2 doing a project ionic app a year or so ago but have not worked with Firebase though.

The error is when I ng serve get hit with a blank screen and a console error:

TypeError app.auth is not a function

Seems this must be caused by an incorrect setup of the AngularFireAuthModule or something?

I referred to the https://github.com/angular/angularfire2/blob/master/docs/auth/getting-started.md and it seems correct. Here is a link to the app https://github.com/jburns24/angularfire2-auth-bad-demo.

Seems like the exact issue mentioned in this AngularFire2 TypeError: app.auth is not a function.

Looks as if this may be an issue with the angularfire2 and firebase package there is an open issue github.com/angular/angularfire2/issues/1707 — Buster

coder coder · Accepted Answer · 2018-07-21T06:09:20

You are currently following demo application and I show there are lot of conflicts. But your aim here is to experiment with Angular and Firebase. I'm suggesting you to follow these steps.

Before that create a new Angular project.

eg.

ng new my-app

Now install the angularfire2 and firbase:

npm install angularfire2 firebase --save

Add Firebase config to environments variable:

firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }

Setup @NgModule for the AngularFireModule and AngularFireAuthModule :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

In you AppComponent import AngularFireAuth and auth:

import { AngularFireAuth } from 'angularfire2/auth';
import { auth } from 'firebase';

And implement following functions:

export class AppComponent {
  constructor(public afAuth: AngularFireAuth) {
  }
  login() {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
  }
  logout() {
    this.afAuth.auth.signOut();
  }
}

HTML:

<div *ngIf="afAuth.user | async as user; else showLogin">
  <h1>Hello {{ user.displayName }}!</h1>
  <button (click)="logout()">Logout</button>
</div>
<ng-template #showLogin>
  <p>Please login.</p>
  <button (click)="login()">Login with Google</button>
</ng-template>

These steps are same as their DOC. Please refer bellow links:

Hope this will help you!

AngularFire2 app.auth is not a function

2 Answers