fireship-io / fireship.io

Build and ship your app faster https://fireship.io
3.54k stars 1.31k forks source link

Property 'auth' does not exist on type 'AngularFireAuth' on Google Login Component #257

Open FesSpinosa opened 4 years ago

FesSpinosa commented 4 years ago

I try to create the login with Google account in the file google-signin.directiv.ts and the error message above appears.

this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());

replace this line of code

this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())then();

with this line of code.

And also in HTML file login-page.component.html substitute this line <button mat-stroked-button (click)="afAuth.auth.signOut()">Logout with this line <button mat-stroked-button (click)="afAuth.signOut()">Logout The used versions are Angular: 9.1.0 @angular/fire 6.0.0

fergardi commented 4 years ago

I'm facing the same problem. It seems that Angular9 with Firebase6 has deprecated the usage of this.afAuth.auth property.

Before:

import { Directive, HostListener } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';

@Directive({
  selector: '[appGoogleSignin]'
})
export class GoogleSigninDirective {
  constructor(private afAuth: AngularFireAuth) {}

  @HostListener('click')
  onclick() {
    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }
}

After:

import { Directive, HostListener } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

@Directive({
  selector: '[appGoogleSignin]'
})
export class GoogleSigninDirective {
  constructor(private afAuth: AngularFireAuth) {}

  @HostListener('click')
  onclick() {
    this.afAuth.signInWithPopup(new auth.GoogleAuthProvider());
  }
}

See https://dev.to/sreekanth_2108/upgrading-to-angularfire-6-with-angular-9-4ce1 for more details.

Cheers.