firebase / firebaseui-web

FirebaseUI is an open-source JavaScript library for Web that provides simple, customizable UI bindings on top of Firebase SDKs to eliminate boilerplate code and promote best practices.
https://firebase.google.com/
Apache License 2.0
4.58k stars 1.06k forks source link

Uncaught TypeError: Cannot read property 'call' of undefined #882

Open Arka-cell opened 3 years ago

Arka-cell commented 3 years ago

I am using firebaseui with Gridsome, I am using my login components as follows:

<template>
  <section id="firebaseui-auth-container"></section>
</template>

<script>

import * as firebaseui from "firebaseui";
import firebase from "firebase";
import "firebaseui/dist/firebaseui.css";

export default {
  name: "LoginSection",
  mounted() {
    //const firebase = require("firebase");
    //const firebaseui = require("firebaseui");
    let ui = firebaseui.auth.AuthUI.getInstance();
    if (!ui) {
      ui = new firebaseui.auth.AuthUI(firebase.auth());
    }
    const uiConfig = {
      signInSuccessUrl: "/",
      signInOptions: [
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
      ],
    };
    ui.start("#firebaseui-auth-container", uiConfig);
  },
};
</script>

The login page works perfectly, I click on email login and write my email but when I proceed to write my password, I get the following error:

Uncaught TypeError: Cannot read property 'call' of undefined
    at wa (esm.js?2398:5)
    at $l (esm.js?2398:288)
    at eval (esm.js?2398:343)
    at eval (esm.js?2398:268)
    at zn.eval (esm.js?2398:197)
    at ye (esm.js?2398:70)
    at xe (esm.js?2398:69)
    at dj (esm.js?2398:178)
    at cj.h (esm.js?2398:177)
    at ve (esm.js?2398:67)

My configuration is on main.js as follows:

// This is the main.js file. Import global CSS and scripts here.
// The Client API can be used here. Learn more: gridsome.org/docs/client-api

import Buefy from "buefy";
import "buefy/dist/buefy.css";
import DefaultLayout from "~/layouts/Default.vue";
import firebase from "firebase";

const firebaseConfig = {
  apiKey: "***",
  authDomain: "***",
  projectId: "***",
  storageBucket: "***",
  messagingSenderId: "***",
  appId: "***",
  measurementId: "***",
};

firebase.initializeApp(firebaseConfig);

export default function (Vue, { head }) {
  Vue.component("Layout", DefaultLayout);
  head.link.push({
    rel: "stylesheet",
    href: "https://use.fontawesome.com/releases/v5.15.4/css/all.css",
  });
  Vue.use(Buefy, {
    defaultIconPack: "fas",
  });
  Vue.use(firebase);
}
xil222 commented 3 years ago

I think in your case, your signInSuccessUrl: "/" didn't specify a valid page.

When sign in succeeds, it will either try to execute a callback or redirect to some url(what you tried to do). I think the error probably is thrown here: link

could you try set up a valid landin page after sign in?