Login.vue

<template>
  <div class="login">
    <h1>Login</h1>
    <div id="firebaseui-auth-container"></div>
    <div id="loader">Loading...</div>
  </div>
</template>

<script>
// @ is an alias to /src
import "firebaseui/dist/firebaseui.css";


export default {
  name: 'login',
  mounted() {

    /**
     * Configuration
     * @url https://github.com/firebase/firebaseui-web#configuration
     */
    ui.start('#firebaseui-auth-container',
    {
      callbacks: {
        signInSuccessWithAuthResult: (authResult, redirectUrl) => {
          // console.log('Auth Result: ', authResult);
          this.$store.commit('user', authResult.user);
          this.$router.push({
            name: 'home'
          });
        },
        uiShown: function() {
          // The widget is rendered.
          // Hide the loader.
          document.getElementById('loader').style.display = 'none';
        }
      },
      credentialHelper: false,
      // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
      signInFlow: 'popup',
      signInOptions: [
        // Leave the lines as is for the providers you want to offer your users.
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        // firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        // firebase.auth.TwitterAuthProvider.PROVIDER_ID,
        // firebase.auth.GithubAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
        // firebase.auth.PhoneAuthProvider.PROVIDER_ID
      ],
      // Terms of service url.
      tosUrl: '/terms',
      // Privacy policy url.
      privacyPolicyUrl: '/privacy'
    });

  }
}
</script>
<style scoped lang="scss">
template{
  padding-top: 70px;
}

</style>