The firebaseui.js code encountered an error because it was unable to read the property 'call' as it was undefined

Currently, I am facing an issue while trying to implement Firebase ui auth in my app by referring to Google's Github documentation.

While the email sign-in functionality is working smoothly, I am encountering problems with the phone sign-in option.

Upon clicking the 'Sign in with phone' button and entering the received 6-digit code, I am unable to successfully sign up or sign in.

https://i.sstatic.net/9JEBN.png

After entering the code, the circular loading icon keeps spinning endlessly and does not redirect me to the signInSuccessUrl specified in my main.js.

The error message displayed in the console is as follows:

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
    ...

Here is my index.html:

<!DOCTYPE html>
<html>
...
</html>

Contents of my main.js file:

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

Despite enabling sign-in with email and phone in my Firebase console, I am still facing this issue. Any help would be greatly appreciated.

Answer №1

make sure to update to the newest version of firebaseui 2.6.1

use the command npm install [email protected]

OR

try npm install firebaseui@latest

OR use npm install firebaseui@latest --save

Answer №2

An issue was discovered in the Phone number sign-in process within FirebaseUI 2.6.0. Further details can be found at https://github.com/firebase/firebaseui-web/issues/314. The problem has been addressed and a new version, 2.6.1, has been released. If you are encountering the same issue, it is recommended to update to the latest version of FirebaseUI, which is 2.6.1.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enable the ability to upload multiple images on a single page using droparea.js

I am currently utilizing droparea js for uploading images. However, I have encountered an issue where if I try to upload an image in one of the upload menus, it ends up changing all four upload menus simultaneously. <div class="col-md-12"> ...

What is the best way to prevent a strikethrough from appearing on the delete button in my JavaScript TO-Do application?

I'm working on coding a to-do app using JavaScript, HTML, and CSS. The issue I'm facing is that when I add the text-decoration: line-through property to the list items, it also affects the X icon used for deleting tasks. I suspect this problem ar ...

Tips on eliminating borders in react-table components

Within my React.js component, I have implemented a table using react-table along with some material-ui components displayed alongside the table: import React from 'react' import { useTable, useGlobalFilter, usePagination } from 'react-table& ...

Is employing absolute paths in our confidential Node dependencies a good idea?

I have recently organized our codebase's React components into a separate dependency to make them reusable across different projects. To improve readability, all components now utilize Webpack aliases: import TestComponent from 'components/TestCo ...

My website has a navbar button that is not directing to the intended section of the screen

I have created this HTML code for my Navbar buttons: <button class="navbar-toggle" data-toggle = "collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar">< ...

Angular CORS problem when sending information to Google Forms

When submitting the data: Error Message: Unfortunately, an error occurred while trying to send the data. The XMLHttpRequest cannot load https://docs.google.com/forms/d/xxxxxxxxxxxxx/formResponse. The response to the preflight request did not pass the ac ...

Is there a way to use jQuery to hide rows in a data table that contain a specific code, such as "1.1" or "1.2," that includes a

When using ajax, I pass data from two inputs to another page. These values are then used in a query to display the results in a data table on the main page within the success function. Now, I'm looking to implement a condition where any data containi ...

Is it possible for a form to direct submissions to various pages depending on the value of certain fields

I need to set up a text field and submit button that will redirect users based on their input: index.html: If the user inputs "123" in the text box and clicks submit, they should be redirected to john.html page. AND If the user inputs "456" and clicks s ...

Creating a multipart/form-data POST request in Angular2 and performing validation on the input type File

I am working on sending an image (base64) via a POST request and waiting for the response. The POST request should have a Content-Type of multipart/form-data, and the image itself should be of type image/jpg. This is what the POST request should look like ...

Enhance your TypeScript arrays using custom object equality functions

I am looking to utilize array functions such as contains and unique, but I want them to compare equality using my custom equals function. For instance: let arr = [{id:1,..//some more},{id:2,..//some more},{id:3,..//some more}] I need the following code ...

The setAttribute method does not function with getElementByClass()

Can someone please help me understand why this code is not working for me: document.getElementByClass('home1').setAttribute('style', 'background-image:url(img/red_menu.PNG);'); I have confirmed that I do indeed have an eleme ...

Troubleshooting Problems with Ajax Servlets

When I perform a search, the results are returned and shortly after, the page redirects to a servlet displaying raw JSON data. It's a bit confusing for me. This JSP form submission: <form class="col-lg-12" action="./urllinks" method="GET" id="sea ...

How to fetch React route parameters on the server-side aspect

I encountered a challenge while working with ReactJS and ExpressJS. The user uploads some information on the /info route using React and axios. Then, the user receives route parameters from the server side to redirect to: axios.post('/info', Som ...

Incorporate the key as a prop within a Child Component in a React application

I am trying to display a list of elements in React, where the key of each element is used as an index in front of the item. However, when I try to access props.key, it just returns undefined. Does anyone have any suggestions on how to access the key proper ...

Displaying the Status of a Script that is Running Asynchronously

My script takes around 5 minutes to complete and sends an email with a file attachment once finished. The entire process happens on a single PHP page without using AJAX. I want the front end to handle form submission seamlessly, processing the request in ...

Configure webpack to source the JavaScript file locally instead of fetching it through HTTP

Using webpack.config.js to fetch remote js for Module Federation. plugins: [ new ModuleFederationPlugin({ remotes: { 'mfe1': "mfe1@http://xxxxxxxxxx.com/remoteEntry.js" } }) ], Is it possible to incorporate a local JS ...

Firebase 3 authentication does not maintain persistent login sessions

I recently upgraded my AngularJS app to use Firebase 3.x and AngularFire 2.x for email and password authentication. I referred to the following documentation for migration: https://firebase.google.com/support/guides/firebase-web https://github.com/fi ...

Performing an Ajax request to submit a form without the need to reload the page in MVC

I am looking for assistance with submitting a form from an MVC view without refreshing the page. However, it seems that my AJAX code below is not functioning properly: //here is ajax call function AjaxCallAndShowMessage(btnClick) { $('form').s ...

"Clicking on one item in the Bootstrap submenu doesn't close the other items,

I have this Javascript code snippet that deals with expanding and collapsing submenu items: <script type="text/javascript> jQuery(function(){ jQuery(".dropdown-menu > li > a.trigger").on("click",function(e){ var current ...

Is it not possible to generate HTML tags using jQuery and JavaScript in JSF?

I'm currently working with jsf 2.0 and richfaces 4.0 to develop my application. Occasionally, I incorporate jQuery and JavaScript functions for displaying and hiding elements. However, I've encountered an issue when trying to generate tags within ...