CODEWITHSUNDEEP
angularfirebaseangularfire
Karl Mcgeough
Karl Mcgeough

Reputation: 489

Property 'auth' does not exist on type 'AngularFireAuth'

Getting this error when using angularfire. Have checked my imports and they seem to be correct. I have tried to reinstall angularfire however it is still throwing this error. Is there issues with angularfire?

import { Injectable, NgZone } from '@angular/core';
import { User } from "../services/user";
import { auth } from 'firebase/app';
import { AngularFireAuth } from "@angular/fire/auth";
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
import { Router } from "@angular/router";


@Injectable({
  providedIn: 'root'
})

export class AuthService {
  userData: any; // Save logged in user data

  constructor(
    public afs: AngularFirestore,   // Inject Firestore service
    public afAuth: AngularFireAuth, // Inject Firebase auth service
    public router: Router,  
    public ngZone: NgZone // NgZone service to remove outside scope warning
  ) {    
    /* Saving user data in localstorage when 
    logged in and setting up null when logged out */
    this.afAuth.authState.subscribe(user => {
      if (user) {
        this.userData = user;
        localStorage.setItem('user', JSON.stringify(this.userData));
        JSON.parse(localStorage.getItem('user'));
      } else {
        localStorage.setItem('user', null);
        JSON.parse(localStorage.getItem('user'));
      }
    })
  }

  // Sign in with email/password
  SignIn(email, password) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
      .then((result) => {
        this.ngZone.run(() => {
          this.router.navigate(['dashboard']);
        });
        this.SetUserData(result.user);
      }).catch((error) => {
        window.alert(error.message)
      })
  }

Upvotes: 28

Views: 33191

Answers (9)

Kapil Soni
Kapil Soni

Reputation: 1041

Below solution worked for me:

1. Import firebase

import firebase from "firebase/app";
import "firebase/auth";

2. then in the constructor use firebase like this:

  this.auth = firebase.auth;

3. then use function like below:

this.auth.signInWithEmailAndPassword(email, password)
.then((result) => {
  this.ngZone.run(() => {
    this.router.navigate(['dashboard']);
  });
  this.SetUserData(result.user);
}).catch((error) => {
  window.alert(error.message)
})

Upvotes: 1

Muhammed Moussa
Muhammed Moussa

Reputation: 5195

Just delete the "auth", and it will work

Property 'auth' does not exist on type 'AngularFireAuth' #2409

Upvotes: 9

nipun-kavishka
nipun-kavishka

Reputation: 922

This one happens because of the new update. Check the release note! changelog.

@angular/fire/auth AngularFireAuth has dropped the auth property and instead Promise Proxies the underlying Firebase auth.Auth instance

Just delete the "auth", and it will work

Upvotes: 1

Ghislain Zabatio
Ghislain Zabatio

Reputation: 214

You should import the right Firebase:

import firebase from 'firebase/app';

and then for example:

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

Upvotes: 4

user216672
user216672

Reputation: 151

https://github.com/angular/angularfire/blob/master/docs/version-6-upgrade.md

"AngularFireAuth has dropped the auth property and instead Promise Proxies the underlying Firebase auth.Auth instance; allowing your development experience to more closely mirror the JS SDK. Similar changes have been made to AngularFireFunctions, AngularFireMessaging, and AngularFirePerformance."

Upvotes: 0

Marc
Marc

Reputation: 2410

After checking different combinations, the latest version of @angular/fire that works with Angular 9.1.6 is 5.4.2.

Any version above would not allow you to use the auth AngularFireAuth property, even though I could not find any explicit deprecation notice in the docs.

Upvotes: 0

Anish K Pillai
Anish K Pillai

Reputation: 796

Had the same problem. Seems starting "@angular/fire": "^6.0.0" AngularFireAuth has dropped the auth property.

Just delete auth & it should work

https://github.com/angular/angularfire/issues/2409#issuecomment-615993136

Upvotes: 55

edgartank
edgartank

Reputation: 21

hello noce if it's the truth but this worked for me

1 - npm uninstall firebase @angular/fire

2- package.json

3 - dependencies { ... "@angular/fire": "6.0.0", "firebase": "7.14.1", ... }

4 - change

dependencies { ... "@angular/fire": "^5.4.2",

    ...

5 - save

6 - npm install firebase @angular/fire

if you find another much better solution but for now this worked

Upvotes: 2

andrea simeoni
andrea simeoni

Reputation: 176

I had the same problem and it was related to version mismatch in package.json. I had

dependencies {
        ...
        "@angular/fire": "latest", // It was 6.0.0
        "firebase": "5.4.2",
        ...
}

Then I changed to

dependencies {
        ...
        "@angular/fire": "5.4.2",
        "firebase": "5.4.2",
        ...
}

Also ensure to import AngularFireAuthModule in your app.module.ts

import { AngularFireAuthModule } from '@angular/fire/auth';

...
@NgModule({
    imports: [
        AngularFireAuthModule
    ],
    ....
})
export class AppModule { }

Upvotes: 5

Related Questions