TypeError: app.auth is not a function

  • Operating System version: Windows 10
  • Browser version: Google Chrome Version 69.0.3497.100 (Official Build) (64-bit)
  • Firebase SDK version: 5.5.1
  • Firebase Product: auth

I got this error when I upgraded to Firebase 5.5.1
But same code works when I downgrade to Firebase 5.4.2 (no error)

ERROR Error: Uncaught (in promise): TypeError: app.auth is not a function
TypeError: app.auth is not a function
at auth.js:12

Firebase 5.5.1
@angular/fire 5.0.0

1 possible answer(s) on “TypeError: app.auth is not a function

  1. Found (my/the) problem!!!

    I also tried building an app from scratch, using my existing app as reference. This way it worked fine!
    But after copying package.json and removing node_modules, my old app still didn’t work.

    Then i checked the differences in package-lock.json and found A LOT of minor version differences for firebase!
    So i removed package-lock.json and node_modules (again) en reinstalled.
    Now everything works fine!

TypeError: app.auth is not a function

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

app variable

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

4 thoughts on “TypeError: app.auth is not a function

  1. @Feiyang1 I don’t think it is resolved. The fact that you need to select particular version combinations of the two will cause headaches for new users, and closing this suggests Google is ok with it not being reliable to use the firebase package in node (which there are good reasons for doing). If I build my product based on this, will I be at risk in the future of not being able to upgrade, because there is no pair of versions that works? e.g. currently, I’m stuck on 5.x

  2. And we are removing this error (app/duplicate-service) in the next version of the SDK, so duplicate service registering will just be ignored.