CODEWITHSUNDEEP
javascriptfirebasefirebase-authenticationfirebaseui
Utkarsh Bhatt
Utkarsh Bhatt

Reputation: 1606

firebaseui.js Uncaught TypeError: Cannot read property 'call' of undefined

I'm trying to add Firebase ui auth on my app using Google's official documentation on Github.

The email sign in is working fine, but I'm getting issue with the phone sign in option.

On clicking the Sign in with phone and entering the 6 digit code I get on my number, I'm not able to sign up or sign in.

enter image description here

The round loading circle spins endlessly and doesn't redirect me to the signInSuccessUrl defined in my main.js.

The error I get in the console is this:

firebaseui.js:82 Uncaught TypeError: Cannot read property 'call' of undefined
    at Ca (firebaseui.js:82)
    at Fl (firebaseui.js:323)
    at firebaseui.js:324
    at firebaseui.js:281
    at El.<anonymous> (firebaseui.js:238)
    at oe (firebaseui.js:140)
    at ne (firebaseui.js:139)
    at ni (firebaseui.js:219)
    at li.h (firebaseui.js:219)
    at le (firebaseui.js:136)
Ca @ firebaseui.js:82
Fl @ firebaseui.js:323
(anonymous) @ firebaseui.js:324
(anonymous) @ firebaseui.js:281
(anonymous) @ firebaseui.js:238
oe @ firebaseui.js:140
ne @ firebaseui.js:139
ni @ firebaseui.js:219
li.h @ firebaseui.js:219
le @ firebaseui.js:136
he @ firebaseui.js:137
b @ firebaseui.js:134

My index.html 

<!DOCTYPE html>
<html>
<head>
    <title>Site Web flow</title>
    <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.6.0/firebaseui.css" />

</head>
<body>

    <h1>Site Web flow</h1>
    <div id="firebaseui-auth-container"></div>
    <hr>
    <div>
        <div id="loader">Loading...</div>
        <div id="sign-in-status"></div>
        <div id="sign-in"></div>
        <div id="account-details"></div>
        <button id="signOutButton">Signout</button>
    </div>
    <script src="https://cdn.firebase.com/libs/firebaseui/2.6.0/firebaseui.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.9.1/firebase-firestore.js"></script>
    <script src="main.js"></script>
</body>
</html>

My main.js file:

let config = {
    apiKey: '##',
    authDomain: '##',
    projectId: '##'
};

firebase.initializeApp(config);

const db = firebase.firestore();
// const auth = firebase.auth();

let uiConfig = {
    signInOptions: [ 
        {
            provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
            requireDisplayName: true
        },
        {
            provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
            defaultCountry: 'IN'
        }
    ],

    signInSuccessUrl: './success.html',
    tosUrl: '#',
    callbacks: {
        signInSuccess: (currentUser, credential, redirectUrl) => {
            return true;
        },
        signInFailure: (error) => {
            return handleUIError(error);
        },
        uiShown: () => {
            document.getElementById('loader').style.display = 'none';
        }
    }
};


// Initialize the FirebaseUI Widget using Firebase.
let ui = new firebaseui.auth.AuthUI(firebase.auth());

// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
ui.disableAutoSignIn();


initApp = function() {
    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
            // User is signed in.
            let displayName = user.displayName;
            let email = user.email;
            let emailVerified = user.emailVerified;
            let photoURL = user.photoURL;
            let uid = user.uid;
            let phoneNumber = user.phoneNumber;
            let providerData = user.providerData;
            user.getIdToken().then(function(accessToken) {
                document.getElementById('sign-in-status').textContent = 'Signed in';
                document.getElementById('sign-in').textContent = 'Sign out';
                document.getElementById('account-details').textContent = JSON.stringify({
                    displayName: displayName,
                    email: email,
                    emailVerified: emailVerified,
                    phoneNumber: phoneNumber,
                    photoURL: photoURL,
                    uid: uid,
                    accessToken: accessToken,
                    providerData: providerData
                }, null, '  ');
            });
        } else {
            // User is signed out.
            document.getElementById('sign-in-status').textContent = 'Signed out';
            document.getElementById('sign-in').textContent = 'Sign in';
            document.getElementById('account-details').textContent = 'null';
        }
    }, function(error) {
        console.log(error);
    });
};

window.addEventListener('load', function() {
    initApp()
});


document.getElementById('signOutButton').addEventListener('click', (e) => {
    e.preventDefault();
    firebase.auth().signOut().then(() => {
        console.log('Signed out');
    })
})

I do have enabled the sign in with email and phone in my Firebase console. Can anyone help?

Upvotes: 3

Views: 1880

Answers (2)

Ti Wang
Ti Wang

Reputation: 785

There was a bug in Phone number sign-in flow in FirebaseUI 2.6.0. https://github.com/firebase/firebaseui-web/issues/314. We have a fix and released 2.6.1. Anyone experiencing the same issue, please update firebaseUI to latest version 2.6.1.

Upvotes: 1

Muhammad Jahangir
Muhammad Jahangir

Reputation: 51

update to latest firebaseui 2.6.1

npm install [email protected]

OR

npm install firebaseui@latest

OR npm install firebaseui@latest --save

Upvotes: 3

Related Questions