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

[n3nikita]

Version info

Angular:
"@angular/cdk": "^9.2.1"

Firebase:
"firebase": "^7.14.1"

AngularFire:
"@angular/fire": "^6.0.0"

It works well before I've updated npm packges to the latest versions. After update I get error:

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

Steps to set up and reproduce

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private authFire: AngularFireAuth) { }

  initAuthListener(){
    this.authFire.auth.onAuthStateChanged(user => {
      if(user) {
        // code
      } else {
        this.authFire.auth.signOut();
      }
    })
  }
}

* Screenshots *

[Paulovsr]

See the changelog item 6.0.0-rc.0 (2020-01-30)

@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

[sumpton]

An upgrade guide would be brilliant. I did see the changelog a few days ago, and I am not clear to me yet what I will need to do.

I hope this example will change.
https://github.com/angular/angularfire/blob/master/docs/auth/getting-started.md https://github.com/angular/angularfire/blob/master/docs/auth/getting-started.md
because it looks like “auth” is defined twice.

For examples, and my own code, I prefer avoiding shortcuts and using

public angularFireAuth: AngularFireAuth

On Apr 18, 2020, at 5:37 PM, Paulovsr [e-mail] wrote:

See the changelog item 6.0.0-rc.0 (2020-01-30)

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

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub https://github.com/angular/angularfire/issues/2409#issuecomment-615993136, or unsubscribe https://github.com/notifications/unsubscribe-auth/AALZN6PFRARYI2UYMB3RH3TRNJBTRANCNFSM4MLQ6FIQ.

[Unkn0wn0x]

The documentation should be fine so far. If you just updated your dependencies / packages, don't forget to restart or reload your code editor. May some old / false references are loaded.

For VS Code for example (macOS), hit Command + Shift + P and search for reload, hit enter.

After restarting / reloading your code editor, it should work without the .auth call, this.authFire.auth.* -> this.authFire.*. If you try to access the currentUser you need to change your code like following, a few examples:

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

[...]

constructor(
  private authFire: AngularFireAuth
) {}

Update Password
Old way:
await this.authFire.currentUser.updatePassword('Passw0rd!');
New way:
await (await this.authFire.currentUser).updatePassword('Passw0rd!');

Delete User
Old way:
await this.authFire.auth.currentUser.delete();
New way:
(await this.authFire.currentUser).delete;

Sign out
Old way:
await this.authFire.auth.signOut();
New way:
await this.authFire.signOut();

Auth state changed
Old way:
this.authFire.auth.onAuthStateChanged(...);
New way:
this.authFire.onAuthStateChanged(...);

Update mail
Old way:
await this.authFire.auth.currentUser.updateEmail('[email protected]');
New way:
await (await this.authFire.currentUser).updateEmail('[email protected]');

Reauthenticate user
Old way:
await this.authFire.auth.currentUser.reauthenticateWithCredential(firebase.auth.EmailAuthProvider.credential(this.authFire.auth.currentUser.email, 'Passw0rd!'));
New way:
await (await this.authFire.currentUser).reauthenticateWithCredential(firebase.auth.EmailAuthProvider.credential((await this.authFire.currentUser).email, 'Passw0rd!'));

Send password reset mail
Old way:
await this.authFire.auth.sendPasswordResetEmail(mail);
New way:
await this.authFire.sendPasswordResetEmail(mail);

Fetch sign in methods
Old way:
await this.authFire.auth.fetchSignInMethodsForEmail('[email protected]');
New way:
await this.authFire.fetchSignInMethodsForEmail('[email protected]');

Hope it helps.

Cheers
Unkn0wn0x

[n3nikita]

Thank you guys

[sumpton]

Super helpful, @Unkn0wn0x. I really appreciate this helpful guide. I would have struggled awhile without it.

[Villanuevand]

Hello folks!
Thanks @Unkn0wn0x for this helpful thread...
Im having some issues after my v9 upgrade.

TypeError: Cannot read property 'GoogleAuthProvider' of undefined

import {AngularFireAuth} from '@angular/fire/auth';
import {auth} from 'firebase/app';
...
constructor(private afAuth: AngularFireAuth )
...
const provider = new auth.GoogleAuthProvider();
const credential = await this.afAuth.signInWithPopup(provider);

-- version --

"@angular/fire": "^6.0.0",
 "firebase": "7.14.2"

Any having the same issue?
thanks...

Update: 35 minutes after this post...

I had a wrong reference:

import {AngularFireAuth} from '@angular/fire/auth';
import {auth} from 'firebase/app'; // Wrong 
import {auth} from 'firebase'; // Good
...
constructor(private afAuth: AngularFireAuth )
...
const provider = new auth.GoogleAuthProvider();
const credential = await this.afAuth.signInWithPopup(provider);

[bfromager]

How are we supposed to use this?
The doc really need to be updated.
I really dont understand where the signin/signout/create user etc... might come from

export declare class AngularFireAuth {
/*
* Observable of authentication state; as of Firebase 4.0 this is only triggered via sign-in/out
*/
readonly authState: Observable;
/*
* Observable of the currently signed-in user's JWT token used to identify the user to a Firebase service (or null).
/
readonly idToken: Observable;
/*
* Observable of the currently signed-in user (or null).
/
readonly user: Observable;
/*
* Observable of the currently signed-in user's IdTokenResult object which contains the ID token JWT string and other
* helper properties for getting different data associated with the token as well as all the decoded payload claims
* (or null).
*/
readonly idTokenResult: Observable;
constructor(options: FirebaseOptions, nameOrConfig: string | FirebaseAppConfig | null | undefined, platformId: Object, zone: NgZone);
}

[harish1995]

this is old way..
this.afAuth.auth.currentUser.sendEmailVerification()

can any one explain how to used sendEmailVerification() method of updated firebase

[CaYz001]

@harish1995

this.afAuth.onAuthStateChanged((user) => {
      user.sendEmailVerification();
});

Also look here: https://stackoverflow.com/questions/37431128/firebase-confirmation-email-not-being-sent

[HnainiaHend]

Property 'signInwithEmailAndPassword' does not exist on type 'AngularFireAuth'.

[Unkn0wn0x]

@HnainiaHend Did you checked my comment here?

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

May you need to restart your Code Editor to get the latest references.

Hope it helps.

Cheers
Unkn0wn0x

[yashupadhyay192001]

@HnainiaHend the letter "w" in your property signInwithEmailAndPassword should be in upper case.

[rahilfaizan]

return await firebase.auth() .createUserWithEmailAndPassword(email,password) .then(newUser =>{ firebase.auth().currentUser.sendEmailVerification()} what should I change in this??

[yashupadhyay192001]

@rahilfaizan can you tell me the error you are receiving.

[rahilfaizan]

@rahilfaizan can you tell me the error you are receiving.

I actually resolved it.thank you

[luciano1997]

Como lo solucionaste ?
how did you solve it ?

[02jaysenghani]

The documentation should be fine so far. If you just updated your dependencies / packages, don't forget to restart or reload your code editor. May some old / false references are loaded.

For VS Code for example (macOS), hit Command + Shift + P and search for reload, hit enter.

After restarting / reloading your code editor, it should work without the .auth call, this.authFire.auth.* -> this.authFire.*. If you try to access the currentUser you need to change your code like following, a few examples:

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

[...]

constructor(
  private authFire: AngularFireAuth
) {}

Update Password
Old way:
await this.authFire.currentUser.updatePassword('Passw0rd!');
New way:
await (await this.authFire.currentUser).updatePassword('Passw0rd!');

Delete User
Old way:
await this.authFire.auth.currentUser.delete();
New way:
(await this.authFire.currentUser).delete;

Sign out
Old way:
await this.authFire.auth.signOut();
New way:
await this.authFire.signOut();

Auth state changed
Old way:
this.authFire.auth.onAuthStateChanged(...);
New way:
this.authFire.onAuthStateChanged(...);

Update mail
Old way:
await this.authFire.auth.currentUser.updateEmail('[email protected]');
New way:
await (await this.authFire.currentUser).updateEmail('[email protected]');

Reauthenticate user
Old way:
await this.authFire.auth.currentUser.reauthenticateWithCredential(firebase.auth.EmailAuthProvider.credential(this.authFire.auth.currentUser.email, 'Passw0rd!'));
New way:
await (await this.authFire.currentUser).reauthenticateWithCredential(firebase.auth.EmailAuthProvider.credential((await this.authFire.currentUser).email, 'Passw0rd!'));

Send password reset mail
Old way:
await this.authFire.auth.sendPasswordResetEmail(mail);
New way:
await this.authFire.sendPasswordResetEmail(mail);

Fetch sign in methods
Old way:
await this.authFire.auth.fetchSignInMethodsForEmail('[email protected]');
New way:
await this.authFire.fetchSignInMethodsForEmail('[email protected]');

Hope it helps.

Cheers
Unkn0wn0x

Thank you

[parthdevloper]

Como lo solucionaste ?
how did you solve it ?

Here is your solution:

SendVerificationMail() {
return this.afAuth.currentUser.then(u => u.sendEmailVerification())
.then(() => {
this.router.navigate(['verify-email-address']);
})
}

[jonathan-chin]

thanks for this. I'm trying to set the languageCode here. This works:

firebase.auth().languageCode = language;

but this does not:

this.angularFireAuth.languageCode = language;

is languageCode exposed through AngularFireAuth?

[axul]

I'm having the same problem as @jonathan-chin

[barun1994]

I have got an error that I have attached. Can you please tell me what I will do?

[Keawkanok]

Hi well if it's true 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

5 - npm i @angular/[email protected]

6 - npm install --save firebase

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

• save

[cfficaurzua]

HI everyone,
I'm trying to grant offline access to use google apis.
This works great with the google Sign In for websites.

grantOfflineAccess(){
   return new Promise((resolve, reject)=>{ 
    this.googleAuth.getAuth().subscribe((authInstance:any)=>{
      authInstance.grantOfflineAccess({
        access_type: 'offline',
        redirect_uri: 'postmessage',
        prompt: 'consent',
        approval_prompt: null,
      }).then(offlineAccessExchangeCode =>{
          const authResp = authInstance.currentUser.get().getAuthResponse();
          console.log(authResp)
          const credential = auth.GoogleAuthProvider.credential(authResp.id_token);
          this.afAuth.signInWithCredential(credential).then(credential=>{
          const callable = this.fns.httpsCallable('offlineAccessExchangeCode');
          callable(offlineAccessExchangeCode).subscribe((tokens)=>{
            resolve(this.updateUserData(credential, tokens))
          }
          );     
        });
      })
    })
   })

but is it possible to use the firebase auth to achieve the same?

I have tried

this.afAuth.grantOfflineAccess()
this.afAuth.auth.grantOfflineAccess()

[whoiscarlo]

The fix is to use firebase.default.auth instead of firebase.auth