Google authentication not working with AngularFire2

Question

I'm setting up Google Authentication through Firebase and AngularFire2. It's partially working, but not completely and the behavior is odd. The app loads fine initially and provides the Login button that's supposed to show if no user is logged in.

When I click the button, the redirect happens to the Google Auth dialog and that appears to all be working. However, on the redirect back to the app, two obscure errors appear in the Chrome console and the app loads again as if no user is authenticated.

When I look in the Firebase console, it shows that I logged in. This happens both through Firebase hosting and on a local debug instance. I had it working without Angular2/AngularFire2.

Any ideas?

The errors are:

Uncaught TypeError: Cannot read property 'dataset' of null o @ bundle.js:2518

Uncaught TypeError: Cannot read property 'appendChild' of null h @ content.js:1(anonymous function) @ content.js:1(anonymous function) @ content.js:1

Navigated to https://accounts.google.com/AccountChooser?continue=https://accounts.google…true%26from_login%3D8&btmpl=authsub&scc=1&oauth=1 Navigated to https://myapp-d20b8.firebaseapp.com/__/auth/handler

MyApp.component.ts

import { Component } from '@angular/core';
import { AngularFire, AuthProviders, AuthMethods, FirebaseAuth, FirebaseListObservable } from 'angularfire2';
    @Component({    
        moduleId: module.id,
        selector: 'myapp-app',
        templateUrl: 'myapp.component.html',
        styleUrls: ['myapp.component.css']
    })
        export class MyAppComponent {
        title = 'My App';
        items: FirebaseListObservable<any[]>;
        constructor(public af: AngularFire) {
            this.items = af.database.list('items');
        }
        login() {
        this.af.auth.login();
        }
    }

MyApp.component.html

<div *ngIf="auth | async">{{authInfo.email}} logged in</div>
<div *ngIf="!(auth | async)"> 
    <button (click)="login()">Login with Google</button>
</div>

Main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { MyAppComponent, environment } from './app/';

import {FIREBASE_PROVIDERS,
    defaultFirebase,
    AngularFire,
    AuthMethods,
    AuthProviders,
    firebaseAuthConfig
} from 'angularfire2';

if (environment.production) {
  enableProdMode();
}

bootstrap(MyAppComponent, [
  FIREBASE_PROVIDERS,
  defaultFirebase({
    apiKey: "<>",
    authDomain: "myapp.firebaseapp.com",
    databaseURL: "https://myapp.firebaseio.com",
    storageBucket: "myapp.appspot.com",
  }),
  firebaseAuthConfig({
    provider: AuthProviders.Google,
    method: AuthMethods.Redirect
  })
]);

Intellidroid Intellidroid · Accepted Answer · 2016-10-14T12:49:12

On your myapp.component.html.... I would suggest doing the following:

<div> {{(af.auth | async )?.auth.email}} logged in</div>
<div *ngIf="!(af.auth | async)">

Google authentication not working with AngularFire2

1 Answers