firebase.auth.GoogleAuthProvider is not a constructor

user_13375125 0
Viewed 1709

I'm trying to use google sign using firebase in the Vue framework. I don't know what the error is this can anyone help me with this.

vue.runtime.esm.js?2b0e:1888 TypeError: _firebase_js__WEBPACK_IMPORTED_MODULE_2__.fb.auth.GoogleAuthProvider is not a constructor
at VueComponent.socialLogin (Signin.vue?3d55:76)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

this is my code

firebase.js

import firebase from "firebase";
var firebaseConfig = {
    config
};
const fb=firebase.initializeApp(firebaseConfig);
export { fb };

Sign in.vue

<script>
    import { fb } from "../firebase.js";
    export default {
      name: "Signin",
      components: {},
      data() {
        return {
        };
      },
    
      methods: {
         socialLogin() {
       const provider = new fb.auth.GoogleAuthProvider();
    
            fb.auth().signInWithPopup(provider).then((result) => {
              this.$router.replace('home');
            }).catch((err) => {
              alert('Oops. ' + err.message)
            });
          }
      }
    };
    </script>
firebase-authentication firebase vue.js
1 Answers

The auth property (not the auth() function) is available on the static firebase object, not your firebase app.

You want something more like this

import firebase from "firebase/app"
import "firebase/auth" //  this could also be in your `firebase.js` file

const provider = new firebase.auth.GoogleAuthProvider()
user_2833660
Related