capacitor-firebase-auth: Cannot read property 'GoogleAuthProvider' of undefined

We are building an Ionic Stencil (no framework) app using Capacitor (hybrid mobile app).

So far, I’m loving this plugin (I only have a working build in Android so far). Great job unifying the login approach for all of the different providers. It initially took me awhile to get things working. I found that the following import in facades.js was causing the above error.

import * as firebase from 'firebase/app';

And this is because firebase.auth in firebase.auth.GoogleAuthProvider().providerId was undefined.

So, I changed it to:

import firebase from '@firebase/app';

And now the reference to the provider is valid. I don’t fully understand why this is happening. Can you give me some guidance for how to deal with this properly? Maybe I should be using a different version of com.google.firebase:firebase-auth:17.0.0? I downgraded to this version because the latest version was causing some manifest merge issues related to AndroidX.

Here are the dependencies I’m using:

Root level gradle has: classpath 'com.google.gms:google-services:4.3.2' // Google Services plugin

App level gradle has:

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation project(':capacitor-android')
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    implementation project(':capacitor-cordova-android-plugins')
    implementation 'com.google.firebase:firebase-auth:17.0.0'
    implementation 'com.facebook.android:facebook-android-sdk:4.41.0'
}

package.json

  "dependencies": {
    "@capacitor/android": "^1.3.0",
    "@capacitor/core": "1.2.1",
    "@capacitor/ios": "^1.3.0",
    "@ionic/core": "^4.11.3",
    "@stencil/state-tunnel": "^1.0.1",
    "@types/jest": "^24.0.21",
    "animate.css": "^3.7.2",
    "capacitor-firebase-auth": "^0.2.4",
    "firebase": "^6.6.1",
    "moment": "^2.24.0",
    "prettier": "^1.18.2"
  },

Please advise?

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 20 (17 by maintainers)

Most upvoted comments

Hello Justin,

Please take a look at v0.3.0 and see with everything is working on Stencil now.

I’m Looking forward to hearing from you.

Best regards, Bernardo Baumblatt.

baumblatt on Dec 19, 2019

Hi,

I don’t think fork is a good idea, it’s better to go forward with this change.

I will document the change and create the version.

Best regards, Bernardo Baumblatt.

baumblatt on Dec 18, 2019

Hi Justin,

Let’s try this, I will implement the import like it works on your stencil project and try it on my Angular CLI project.

If everything works for me, I will bump the version on npm.

As soon I have a results, I will let you know.

Best regards, Bernardo Baumblatt

baumblatt on Nov 15, 2019

Hi Justin,

I’m not sure about, but please, can you remove the line name: ["<name>"], from the creds and try again.

Just in case, on my web project I’m using "firebase": "^7.2.1", can you make a try too?

In time, second though: We have two Firebase libraries on node_modules!

In your code, you are initializing the Firebase App from @firebase/app, but the plugin is using the firebase/app, maybe this justify why changing the import from facade.js solve the issue.

Just to be sure that is correct, please can you try changing your import to import * as firebase from 'firebase/app'; and make a try?

The big question is, what is the correct way to import Firebase? This comment of Michel on firebase-js-sdk issue 1008 may help us!

Best regards, Bernardo Baumblatt.

baumblatt on Nov 7, 2019