Firebase: FacebookAuthProvider is not a constructor

Question

I'm building a small app and want to authenticate it via Facebook. I have enabled Facebook as an auth method in the Firebase dashboard, provided my Facebook app tokens and the auth URI to Facebook.

This issue is this:

Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0__firebase_config_js.a.FacebookAuthProvider is not a constructor

Here is the Vue JS Method in question:

const sphinx = firebaseApp.auth()

methods: {
    signUp (event) {
      sphinx.getRedirectResult().then(function (result) {
        if (result.credential) {
          var token = result.credential.accessToken
        }
        var user = result.user
        console.log(token, user)
      })
      // Start a sign in process for an unauthenticated user.
      var provider = new sphinx.FacebookAuthProvider()
      sphinx.signInWithRedirect(provider)
    }
}

It seems to have something to do with the line:

var provider = new sphinx.FacebookAuthProvider()

But I'm still fairly new to JS, but I think the issue is related to new in an ES6 environment? And if so, how can I change this.

Answer 1

The reason why it didn't work is because, you invoked the auth method on the firebase instance when you assigned it to your sphinx variable. Meanwhile the method you're looking for resides within the auth object in itself which.

So the correct way to access the method you're looking for is by going into the auth object itself, like so:

var provider = new firebase.auth.FacebookAuthProvider()