TypeError: app.auth is not a function

[ramen-mukherjee]

Introduction

After the recent updates (I update regularly), I am getting following error while running the application. Project is created with Angular CLI. As of now, no build errors.

System

• Operating System version: Windows 10 (v1803 - OS Build 17134.753) & 8 x64
• Browser version: Chrome v74.0.3729.131 x64
• Firebase SDK version: v6.0.2
• Firebase Product: auth
• Node: v12.2.0
• NPM: v6.9.0
• Angular: v7.2.15
• Angular CLI: v7.3.9
• @angular/fire: v5.1.3

Steps to reproduce:

1. Update your existing App.
2. Either use JIT or AOT build of Angular.
3. Observe the below error in browser console at runtime.

Screenshot

Code

`import { User } from './../models/user.model';
import { Observable, Observer } from 'rxjs';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

@Injectable({
providedIn: 'root'
})
export class AuthService {
user: User = {
name: '',
email: '',
photo: '',
token: {
value: '',
uid: '',
createdOn: '',
expiredOn: '',
isAuthenticated: false,
isAdmin: false
}
};

constructor(public afAuth: AngularFireAuth) { }

observable$ = Observable.create((observer) => {
try {
this.getUserDetails();
observer.next(this.user);
} catch {
this.resetUserData();
observer.error();
} finally {
observer.complete();
}
});

getAuthUser(): Observable {
return this.observable$;
}

login(): User | void {
this.afAuth.auth.setPersistence(auth.Auth.Persistence.SESSION);
this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider())
.then((user) => {
if (user) {
this.getUserDetails();
}
})
.catch((error) => {
this.resetUserData();
console.error(error);
});
return this.user;
}

logout(): void {
this.afAuth.auth.signOut()
.then(() => {
this.resetUserData();
})
.catch(
response => console.error('Error Occured While Logging Out' + response)
);
}

getUserDetails(): User | void {
this.afAuth.auth.onAuthStateChanged((currentUser) => {
if (currentUser) {
this.user.name = currentUser.displayName;
this.user.email = currentUser.email;
this.user.photo = currentUser.photoURL;
this.getUserToken();
} else {
this.resetUserData();
console.error('No user present. Please login');
}
});
return this.user;
}

async getUserToken(): Promise {
await this.afAuth.auth.currentUser.getIdTokenResult()
.then((token) => {
if (token) {
this.user.token.value = token.token ? token.token : '';
this.user.token.createdOn = token.issuedAtTime ? token.issuedAtTime : '';
this.user.token.expiredOn = token.expirationTime ? token.expirationTime : '';
this.user.token.uid = token.claims ? (token.claims.user_id ? token.claims.user_id : '') : '';
this.user.token.isAuthenticated = this.isAuthenticated();
}
})
.catch(() => {
this.resetUserData();
console.error('error while getting the token');
});
}

isAuthenticated(): boolean {
if (this.user.token.createdOn && this.user.token.expiredOn) {
const expiryTime = new Date(this.user.token.expiredOn).getTime();
const creationTime = new Date(this.user.token.createdOn).getTime();
const currentTime = new Date().getTime();
if (expiryTime > creationTime && expiryTime > currentTime) {
return true;
} else {
console.error('Evicting Unauthenticated user');
this.logout();
return false;
}
} else {
console.error('Evicting Unauthenticated user');
this.logout();
return false;
}
}

resetUserData(): User | void {
this.user = {
name: '',
email: '',
photo: '',
token: {
value: '',
uid: '',
createdOn: '',
expiredOn: '',
isAuthenticated: false,
isAdmin: false
}
};
return this.user;
}
}
`

Error 1:

AppComponent.html:1 ERROR TypeError: app.auth is not a function
at auth.js:24
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:7929)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (polyfills.js:7688)
at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:17258)
at new AngularFireAuth (auth.js:22)
at createClass (core.js:21273)
at createProviderInstance (core.js:21235)
at resolveNgModuleDep (core.js:21199)
at NgModuleRef.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef.get (core.js:21907)
at resolveDep (core.js:22278)

Error 2:

AppComponent.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 1, nodeDef: {…}, elDef: {…}, elView: {…}}
View_AppComponent_0 @ AppComponent.html:1
proxyClass @ compiler.js:18239
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:24139
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15777
(anonymous) @ core.js:17870
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17258
(anonymous) @ core.js:17870
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.js:17299
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
(anonymous) @ zone.js:889
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:17290
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
drainMicroTaskQueue @ zone.js:601
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
ZoneAwarePromise.then @ zone.js:1012
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:17803
./src/main.ts @ main.ts:14
webpack_require @ runtime.js:84
0 @ polyfills.ts:81
webpack_require @ runtime.js:84
checkDeferredModules @ runtime.js:46
webpackJsonpCallback @ runtime.js:33
(anonymous) @ main.js:1

Dependency List

"dependencies": {
"@angular/animations": "^7.2.15",
"@angular/cdk": "^7.3.7",
"@angular/common": "^7.2.15",
"@angular/compiler": "^7.2.15",
"@angular/core": "^7.2.15",
"@angular/fire": "^5.1.3",
"@angular/flex-layout": "^7.0.0-beta.24",
"@angular/forms": "^7.2.15",
"@angular/http": "^7.2.15",
"@angular/material": "^7.3.7",
"@angular/platform-browser": "^7.2.15",
"@angular/platform-browser-dynamic": "^7.2.15",
"@angular/pwa": "^0.13.9",
"@angular/router": "^7.2.15",
"@angular/service-worker": "^7.2.15",
"@ngrx/core": "^1.2.0",
"@ngrx/effects": "^7.4.0",
"@ngrx/entity": "^7.4.0",
"@ngrx/router-store": "^7.4.0",
"@ngrx/schematics": "^7.4.0",
"@ngrx/store": "^7.4.0",
"@ngrx/store-devtools": "^7.4.0",
"@trademe/ng-defer-load": "^2.0.0",
"@types/angular": "^1.6.54",
"@types/angular-material": "^1.1.68",
"@types/firebase-client": "^0.1.32",
"@types/firebase-token-generator": "^2.0.28",
"classlist.js": "^1.1.20150312",
"core-js": "^2.6.5",
"firebase": "^6.0.2",
"firebase-admin": "^6.5.1",
"firebase-functions": "^2.3.1",
"firebase-tools": "^6.9.2",
"hammerjs": "^2.0.8",
"node-sass": "^4.12.0",
"rxjs": "^6.5.2",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.29"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.13.9",
"@angular/cli": "^7.3.9",
"@angular/compiler-cli": "^7.2.15",
"@angular/language-service": "^7.2.15",
"@types/jasmine": "^3.3.12",
"@types/jasminewd2": "^2.0.6",
"@types/node": "^10.14.6",
"codelyzer": "^4.5.0",
"jasmine-core": "~3.3.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^3.1.4",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.5",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "^5.4.2",
"ts-node": "~7.0.1",
"tslint": "~5.11.0",
"tslint-angular": "^1.1.2",
"types-installer": "^1.6.3",
"typescript": "^3.2.4"
}

Thank You

Regards

[Feiyang1]

I'm not able to reproduce the issue, though I didn't use @angluar/fire.
Can you show me how you import and initialize firebase and auth?
Better yet, can you create a minimal repro?

[ramen-mukherjee]

Dear @Feiyang1 ,

I have updated the main issue with latest details. Along with that below is the code for my Auth Service by which I am importing firebase. This only got broke when the firebase got updated. My working code from master is available at - https://angular6-201.firebaseapp.com/dashboard

`import { User } from './../models/user.model';
import { Observable, Observer } from 'rxjs';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

@Injectable({
providedIn: 'root'
})
export class AuthService {
user: User = {
name: '',
email: '',
photo: '',
token: {
value: '',
uid: '',
createdOn: '',
expiredOn: '',
isAuthenticated: false,
isAdmin: false
}
};

constructor(public afAuth: AngularFireAuth) { }

observable$ = Observable.create((observer) => {
try {
this.getUserDetails();
observer.next(this.user);
} catch {
this.resetUserData();
observer.error();
} finally {
observer.complete();
}
});

getAuthUser(): Observable {
return this.observable$;
}

login(): User | void {
this.afAuth.auth.setPersistence(auth.Auth.Persistence.SESSION);
this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider())
.then((user) => {
if (user) {
this.getUserDetails();
}
})
.catch((error) => {
this.resetUserData();
console.error(error);
});
return this.user;
}

logout(): void {
this.afAuth.auth.signOut()
.then(() => {
this.resetUserData();
})
.catch(
response => console.error('Error Occured While Logging Out' + response)
);
}

getUserDetails(): User | void {
this.afAuth.auth.onAuthStateChanged((currentUser) => {
if (currentUser) {
this.user.name = currentUser.displayName;
this.user.email = currentUser.email;
this.user.photo = currentUser.photoURL;
this.getUserToken();
} else {
this.resetUserData();
console.error('No user present. Please login');
}
});
return this.user;
}

async getUserToken(): Promise {
await this.afAuth.auth.currentUser.getIdTokenResult()
.then((token) => {
if (token) {
this.user.token.value = token.token ? token.token : '';
this.user.token.createdOn = token.issuedAtTime ? token.issuedAtTime : '';
this.user.token.expiredOn = token.expirationTime ? token.expirationTime : '';
this.user.token.uid = token.claims ? (token.claims.user_id ? token.claims.user_id : '') : '';
this.user.token.isAuthenticated = this.isAuthenticated();
}
})
.catch(() => {
this.resetUserData();
console.error('error while getting the token');
});
}

isAuthenticated(): boolean {
if (this.user.token.createdOn && this.user.token.expiredOn) {
const expiryTime = new Date(this.user.token.expiredOn).getTime();
const creationTime = new Date(this.user.token.createdOn).getTime();
const currentTime = new Date().getTime();
if (expiryTime > creationTime && expiryTime > currentTime) {
return true;
} else {
console.error('Evicting Unauthenticated user');
this.logout();
return false;
}
} else {
console.error('Evicting Unauthenticated user');
this.logout();
return false;
}
}

resetUserData(): User | void {
this.user = {
name: '',
email: '',
photo: '',
token: {
value: '',
uid: '',
createdOn: '',
expiredOn: '',
isAuthenticated: false,
isAdmin: false
}
};
return this.user;
}
}
`

[hsubox76]

I created a fresh angularfire project with auth using the steps here: https://github.com/angular/angularfire2/blob/master/docs/auth/getting-started.md

It seemed to work, I wasn't able to reproduce the error.

I went to the url you provided above, which seems to be your deployed project, and it seems to be working. Did you get this working since you last posted, or is that an older version that's deployed?

If it's still not working, can you share the code for initializing your app, such as:

    AngularFireModule.initializeApp(environment.firebase)

Thanks!

[ramen-mukherjee]

Dear @hsubox76 ,

1. I updated Node and all packages as well. Issue is still reproducible.
2. The link which I have provided is from my master branch which holds the old code where authentication is working.
3. There is no code (logic) change from my side. All I did is to upgrade everything, because that was the NFR for the work.
4. This is the code I used to initialize my app-
   AngularFireModule.initializeApp(environment.firebase, 'angular6-201'),

Thank You
Regards