property auth doesn't exist on type AngularFireAuth : cannot find name 'auth' (error: T2304)

user_14786316 0
Viewed 1146

I have an issue, implementing "Firebase authentication with Google" in my angular 8 app. It seems that "auth" property is not at all supported working since @angular/fire's version 6.0.0 !!!

Here are my dependencies :

"@angular/cdk": "^11.0.1", "@angular/fire": "^6.1.4", "firebase": "^8.1.2",

My Login service : (login.service.ts) :

import { Injectable } from '@angular/core';
// import { auth } from 'firebase/app';
import { AngularFireAuth } from "@angular/fire/auth";


@Injectable({
  providedIn: 'root'
})

export class LoginService {

  constructor(
    public afAuth: AngularFireAuth, // Inject Firebase auth service
  ) { }

  // Sign in with Google
  GoogleAuth() {
    return this.AuthLogin(new auth.GoogleAuthProvider());
  }  

  // Auth logic to run auth providers
  AuthLogin(provider: any) {
    return this.afAuth.signInWithPopup(provider)
    .then((result: any) => {
        console.log('You have been successfully logged in!')
    }).catch((error: any) => {
        console.log(error)
    })
  }

}

My login.component.ts :

import { Component, OnInit } from '@angular/core';
import { LoginService } from '../../services/login.service';


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {

  constructor(public loginService: LoginService) { }

  ngOnInit() { }

}

My login.component.html :

<button mat-raised-button  (click)="LoginService.GoogleAuth()" color="primary" >Login with Google</button>

Can someone help me to solve this issue ? Thanks for you help

angular authentication
2 Answers

Install firebase

npm i firebase --save

Import firebase as:

import * as firebase from 'firebase';

and then use it as,

return firebase.auth().signInWithPopup((new firebase.auth.GoogleAuthProvider()));
user_143387700

I had the same issue, specifically this part:

 // Sign in with Google
  GoogleAuth() {
    return this.AuthLogin(new auth.GoogleAuthProvider());
  }

I resolved it by following the instructions here: https://github.com/angular/angularfire/blob/master/docs/auth/getting-started.md

In short, I removed the { auth } import (like you did), and imported firebase instead:

// import { auth } from 'firebase/app';
import firebase from 'firebase/app';

Now you can transform the above part of the code as follows:

  // Sign in with Google
  GoogleAuth() {
    return this.AuthLogin(new firebase.auth.GoogleAuthProvider());
  }

Keep in mind that the firebase import should be import firebase from 'firebase/app';, and not import * as firebase from 'firebase/app'; - but I don't really know why.

user_85588670
Related