Property 'auth' does not exist on type 'typeof import("/home/kartik/Desktop/Ecommerce/ecommerce/node_modules/firebase/index")'. ts(2339)

Question

I am a beginner at FireBase and I am trying to implement Google login with FireBase using angular. I am getting the above error at auth. I am hereby attaching login.component.ts and dev depencencies of package.json, package.lock.json.

login.component.ts

import { Component, OnInit } from '@angular/core';
import * as firebase from 'firebase';
import 'firebase/auth';
import {AngularFireAuth} from 'angularfire2/auth'

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

  constructor(private afAuth:AngularFireAuth) {
    firebase.default.database
   }

  ngOnInit(): void {
  }
  Login(){
    this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider()) //error due to this line.
  }

}

package.json

"dependencies": {
    "@angular/animations": "~11.1.0",
    "@angular/cdk": "^11.2.12",
    "@angular/common": "~11.1.0",
    "@angular/compiler": "~11.1.0",
    "@angular/core": "~11.1.0",
    "@angular/fire": "^6.0.4-canary.9a26fbe",
    "@angular/forms": "~11.1.0",
    "@angular/localize": "~11.1.0",
    "@angular/material": "^11.2.12",
    "@angular/platform-browser": "~11.1.0",
    "@angular/platform-browser-dynamic": "~11.1.0",
    "@angular/router": "~11.1.0",
    "@ng-bootstrap/ng-bootstrap": "^9.1.1",
    "angularfire2": "^5.4.2",
    "bootstrap": "^5.0.1",
    "firebase": "^8.6.2",
    "firebase-tools": "^9.10.2",
    "g": "^2.0.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },

package-lock.json

...

"@angular/fire": {
      "version": "6.0.4-canary.9a26fbe",
      "resolved": "https://registry.npmjs.org/@angular/fire/-/fire-6.0.4-canary.9a26fbe.tgz",
      "integrity": "sha512-LVskM344FFLQ34Dyc6ngN6n+c8kZODm3T3Sdzu43P4wmpaoocL06/3HMvXlQiwBdE3bH+F+tdGu2VYxgQZCWCA==",
      "requires": {
        "tslib": "^2.0.0"
      }
    },

...

"angularfire2": {
      "version": "5.4.2",
      "resolved": "https://registry.npmjs.org/angularfire2/-/angularfire2-5.4.2.tgz",
      "integrity": "sha512-7brktOHPObHgMnCN+QkakyCBr2mnxMxMSVLlEZ7OF70LjFIQz/RV3t5a7cH1SjystbY+kzR3qYvn/irlWs27/Q==",
      "requires": {
        "@angular/fire": "5.4.2"
      },
      "dependencies": {
        "@angular/fire": {
          "version": "5.4.2",
          "resolved": "https://registry.npmjs.org/@angular/fire/-/fire-5.4.2.tgz",
          "integrity": "sha512-QzB5d1wtqr9jxfsVNv2+569MlfK4/QrrpNy0IngOHdxS4FBbXqMOcx37iv1m2mzJv9zlGUddUX44IZP5Xfb3cw=="
        }
      }
    },

Diathermic

Why are you using an older version of angular-fire? In the latest versions the syntax changed a little but would you be willing to update your dependency versions? – Residuum

May be due to tutorial video, by the way /i am using angularfire 6.0.4 canary. Please suggest me the new syntax and I'll reinstall it @latest. Another part is I accept I am beginner at firebase please don't downvote my questions arem't we here to help each other? – Diathermic

The new syntax is import { AngularFireAuth } from '@angular/fire/auth';, import { AngularFirestore } from '@angular/fire/firestore';, import * as firebase from 'firebase/app';. I found this video helpful, check it out: youtube.com/watch?v=qP5zw7fjQgo&ab_channel=Fireship – Residuum

Answer 1

Your dependencies are the old ones. I suggest you to update them and use the new syntax:

import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/database';

import * as firebase from 'firebase/app';

with [email protected]

There complete tutorial about firebase authentication which I find really useful; here's the link

The old imports are

import { AngularFireAuthModule } from 'angularfire2/auth';

Residuum

working ,but on runtime it's throwing error: NullInjectorError: R3InjectorError(AppModule)[AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: NullInjectorError: No provider for InjectionToken angularfire2.app.options! NullInjectorError: R3InjectorError(AppModule)[AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: NullInjectorError: No provider for InjectionToken angularfire2.app.options! – Diathermic

Does this one help? https://mcmap.net/q/401409/-no-provider-for-injectiontoken-angularfire2-app-options-duplicate – Residuum

This is causing error TS2614: Module '"../../../../firebase"' has no exported member 'auth'. Did you mean to use 'import auth from "../../../../firebase"' instead? 2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app'; error and no stackoverflow solution is working – Diathermic

What are you trying to import? – Residuum

Nothing, the error is from app.module.d.ts – Diathermic

app.module.d.ts or app.module.ts? Could you add the app.module to your question? – Residuum

Error: node_modules/angularfire2/node_modules/@angular/fire/firebase.app.module.d.ts:2:26 - error TS2614: Module '"../../../../firebase"' has no exported member 'messaging'. Did you mean to use 'import messaging from "../../../../firebase"' instead? 2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app'; – Diathermic

Could you add the imports and the firebase version you're using now to your question? – Residuum

``` "angularfire2": "^5.4.2", "firebase": "^8.6.2", ``` This is written in package.json though firebase -V command is giving 9.11.0 – Diathermic

But if you have a package-lock.json, that doesn't matter that much. Did you update the package-lock as well? – Residuum

yes, i uninstalled all dependencies and reinstalled it – Diathermic

If you simply deleted the node_modules and ran npm i again that won't work. It will still download what you have in your package-lock – Residuum

i meant i uninstalled angularfire2, firebase and firebase-tools using npm uninstall.. then reinstalled it – Diathermic

Ok rather than version 8, could you try npm install [email protected] ? – Residuum

then this.afAuth.signInWithRedirect(new firebase.auth.GoogleAuthProvider()); this line is giving error – Diathermic

what's the error? and could you please double check your imports --e.g: import { AngularFireAuth } from '@angular/fire/auth';? I have no idea about where you're importing the firebase modules. – Residuum

make sure the steps in the video are working fine for you , it's throwing hell lot of errors in my machine independent of firebase versions. – Diathermic

I did make sure ofc :-) I have multiple apps running on firebase – Residuum

Are you sure the versions are correct in your package-lock? or maybe you can check them in your node_modules? – Residuum

It's working I had to add ``` import { AngularFireAuthModule } from 'angularfire2/auth'; ``` and ``` import { AngularFireDatabaseModule } from '@angular/fire/database';``` in app.module.ts. Please mention this in your answer along with firebase version 7.24.0. It will help readers rather than reading so long comments. – Diathermic

That doesn't make sense tho. You are importing both from angularfire2 and @angular/fire. How is that possible? – Residuum

I mean I imported AngularFireAuthModule, AngularFireDatabaseModule in app.module.ts; kept firebase version 7.24.0 and imported the imports in the way you suggested and it worked, even I don't know how it worked but I tried different PnC suggested online. like import ... from angular/fire over import ... from angularfire or prefer import feom firebase/app rather than import ... from firebase. I am happy it worked. Thanks a lot! – Diathermic

Hehe I'm glad you figured it out! – Residuum