Is Firebase Web Authentication Incompatible With Mobile Devices?

My original plan was to implement Firebase's provider authentication for my webapp, but unfortunately, it appears that the functionality is not compatible with mobile devices. The live site can be accessed at:

Upon clicking this button: https://i.sstatic.net/HLG4C.png

a popup window should appear. Subsequently, upon clicking this button: https://i.sstatic.net/IDzmg.png

it should initiate a Google provider authentication flow.

The code snippet utilized for this purpose looks like this:

var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithRedirect(provider).then((result) => {
    console.log('@$ signin wiht google worked!' + result.user);

  }).catch((e) => {
    console.log('@$ signin wiht google failed!' + e);

    firebase.auth().signInAnonymously().then((user) => {
      console.log('@$ signed in anonymously againQ ' + user.uid);
    }).catch((e) => {
      console.log('@$ signed in anonymously failed ' + e);

    })

  })

The issue arises when attempting to use this code on mobile devices. While it functions properly on desktops, it does not seem to work on mobile platforms. I have experimented with both "signInWithRedirect" and "signInWithPopup", but neither method seems to trigger any response on my Huawei Honor phone, regardless of the browser used.

Could I be implementing something incorrectly here, or is Firebase's web authentication simply incompatible with mobile devices?

Answer №1

Although it's a bit embarrassing to admit, I wanted to share this experience in case it helps someone else. The issue I was facing had nothing to do with mobile devices as I initially thought. It turned out that the problem stemmed from me using a custom domain and forgetting to add it in the authentication section of the console. When I ran the production app and inspected it with Chrome Dev Tools, I noticed an error in the console: https://i.sstatic.net/aJ6mT.png

The solution was simple - adding my custom domain in the specified section of the Firebase console resolved the issue: https://i.sstatic.net/fUcWi.png

Answer №2

Not too long ago, I attempted a similar task and found myself steering clear of this particular type of login for quite some time due to difficulties during the development phase.

Specifically, during development, I encountered issues accessing my server using an address in the format 192.157.2.3:3000

I experimented with signInWithPopup and signInWithRedirect but unfortunately had no success.

The issue lay in Firebase not supporting requests coming from 192.157.2.3:3000, but luckily this problem can easily be resolved by deploying with "firebase deploy" once in production.

Here is an example, even though the concept applies to Angular as well.

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

When implementing $().html, certain impacts of mdui may fade away

I've been exploring the functionalities provided by mdui.org, specifically the panel feature. Initially, I had successfully integrated the codes into the HTML body with no issues. View the code here See the screen capture here This allowed me to to ...

Discovering the ultimate guide to utilizing the ANT Design Menu.Item and Upload components side by side

I am currently using React, Typescript, and ANT Design for my project. One issue I encountered is with a menu item that is supposed to handle imports, but it's not displaying correctly: https://i.sstatic.net/hN1ch.png Below is the code snippet caus ...

The identifier '_toConsumableArray' has been declared beforehand

Whenever I try to start my Redux app, I encounter the following issue: ./node_modules/draftjs-md-converter/dist/index.js Syntax error: /Users/vlasenkona/Desktop/gris-seqr2/ui/node_modules/draftjs-md-converter/dist/index.js: Identifier '_toConsumableA ...

Tips for setting the `mode` property in typeScript with VueRouter

I am a TypeScript novice and encountering a problem: export default function ({ store }) { const Router = new VueRouter({ scrollBehavior: () => ({ x: 0, y: 0 }), routes, // Keep these settings in quasar.conf.js and modify there instead! ...

Exploring D3.js version 4.10: Leveraging x-axis timescale with Data retrieval using XMLHttpRequest

I'm currently working with D3.js version 4 and encountering two separate issues. Firstly, I have retrieved data using XMLHTTPRequest which includes a name, an identifying number, and additional data. After my ajax request, the structure of the data ap ...

I'm having trouble resolving this issue - Internal server error: Cannot redefine property: File. Can anyone help me out with a solution?

Every time I try to use Vite with React, I encounter a persistent problem. Despite my efforts to find a solution by researching extensively and attempting to adjust the Node and NPM versions, the issue persists. ➜ Local: http://localhost:3000/ ➜ ...

Looking to display or conceal a text box with a date picker based on the selection of a specific value from a drop-down menu

I have a dropdown with two options: Indian and Others. When I select Others, I want to display three textboxes - two with date pickers and one with a simple text input field. I have tried writing the following HTML code but I am unable to get the date pick ...

Tips for incorporating images into AngularJS applications

Just starting out with angular js. I've run into an issue. I'm working with a json for my data and I'm unsure about how to incorporate images into my code <div ng-controller="myCtrl" class="container"> <div class="col-md-8"&g ...

None of the Views are rendered after executing RedirectToAction

I created a Login Page that redirects to the required page after validation. However, when it redirects, the previous Login page view appears instead of the expected view. Below is the JavaScript code I am using: function abc() { var email = ...

Filtering function that works without specific knowledge of keys

I'm working on a JavaScript method to filter a list dynamically without knowing the specific key (s). I've made some progress, but I'm stuck and not sure how to proceed. The foreach loop I have isn't correct, but I used it for clarity. ...

"Utilize the addEventListener function in combination with the 'for' keyword to

I have been working on a Chrome extension where I use a "for" loop to change the display style of elements named "mode" to none, except for one which should be displayed at the end of the loop. However, whenever I click on the button to activate it, my tab ...

Creating a Kendo Menu within an Ext JS Panel

Currently, I am experimenting with combining ExtJS and Kendo UI - a unique mix that is taking me off the usual path ;) I have managed to render a Kendo Menu onto an Ext JS (4.2.1) generated Ext.form.Panel In case you want to check it out, here's a F ...

Issues with the redux-saga action not being triggered in the ComponentDidMount lifecycle

I am encountering an issue with a React component that fetches data from an API using axios in the ComponentDidMount() function. The problem I'm facing is that the request flow seems to halt at LOAD_PLAYLISTS_REQ instead of progressing to LOAD_PLAYLIS ...

What methods are available to keep a component in a fixed position on the window during certain scrolling intervals?

I need help creating a sidebar similar to the one on this Airbnb page. Does anyone have suggestions for how to make a component stay fixed until you scroll past a certain section of the page? I am working with functional React and Material-UI components, ...

How can I add data to a relational table that includes a foreign key reference?

There are two tables that are related with a one to many relationship: envelopes: CREATE TABLE envelopes ( id integer DEFAULT nextval('envelope_id_seq'::regclass) PRIMARY KEY, title text NOT NULL, budget integer NOT NULL ); transact ...

Event triggered by changing input on jQuery mobile slider

I'm currently working with the jQuery mobile slider input feature. On my webpage, I have multiple sliders implemented, and I've noticed that the "change" event is triggered frequently, rather than just when the actual input value changes. Here&ap ...

After populating with information, JavaScript turns into an inert void

The issue is that the JavaScript array becomes empty after being filled with values Here is the code I used: var browserdata = new Array(); // Fill the array with values browserdata["qqq"] = "zzz"; browserdata["rrr"] = 1; console.log(browserdata); // T ...

I can't seem to locate the datepicker in Material UI Next. Can you point

I'm attempting to use the next branch of Material UI from https://github.com/callemall/material-ui/tree/next. I need to utilize the layout component, but it seems that the DatePicker component is missing. How can I include the DatePicker in the next b ...

I encountered a 429 error while trying to make a request to the Spotify API

I recently encountered an issue with my website where I am trying to retrieve and display my playlists. Everything was working fine yesterday, but this morning I started getting error 429 every time I tried to retrieve data from the api, even though I have ...

Converting Javascript game information into PHP

Once the player loses, I need their score to be updated in the database using PHP. There is a separate JavaScript class that runs the game, utilizing setInterval to check the index.php function and update the database if the player loses. However, the issu ...