iOS device experiencing issue with resolving promise after attempting to signInWithEmailAndPassword using Ionic, Vue, and Firebase

I've been struggling with this issue for a while now and have reached a point where I am unable to find a solution on my own. Therefore, I have decided to reach out and ask for help by posting my own question.

In my Ionic 7 Vue application, I am using Firebase Auth for user management. The code functions perfectly in browsers and on Android devices, allowing users to sign in successfully. However, when it comes to iOS devices or simulators, the functionality seems to break down.

Upon a user signing in, the following function is triggered (please note that the auth object is omitted here for brevity):

import {signInWithEmailAndPassword, UserCredential } from "firebase/auth";
const signInUser = async (email: string, password: string) => {
    try{
        const res = await signInWithEmailAndPassword(auth, email, password)
        console.log("Successfully logged in with Firebase, UID: "+res.user.uid)
    }        
    catch(error){
        const errorCode = error.code;
        const errorMessage = error.message;

        console.error("Error Code: " + errorCode + " - Error Message: " + errorMessage);
    }
}

The error message triggers as expected, displaying the relevant error if there is one, such as an incorrect password input. However, when the correct credentials are entered, the console log within the try block fails to execute. It appears to hang indefinitely, almost as if the promise from the await call never resolves. Additionally, no errors are visible in my Xcode output.

An interesting observation is that the Firebase console confirms that the login event indeed takes place. This suggests that the functionality is actually working, but I may not be handling the resolved promise correctly.

I'm hoping that I might have overlooked something simple or made a minor mistake that someone knowledgeable here can identify. Alternatively, any insights or workarounds for this particular issue would be greatly appreciated.

Answer №1

It is possible that the code you posted should work universally across different browsers and devices. However, I have a workaround suggestion to troubleshoot the issue. You can try using promise instead of async/await to determine if the problem still exists.

This will help in identifying whether the issue lies with the specific behavior of async/await.

const signInUser = (email: string, password: string) => {
  signInWithEmailAndPassword(auth, email, password)
    .then(res => {
        console.log("Successfully logged in with Firebase, UID: "+res.user.uid)
    })
    .catch(error => {
        console.error("Error Code: " + error.code + " - Error Message: " + error.message);
    })
}

If the above approach does not resolve the issue, please ensure that there are no security restrictions on iOS for firebase authentication. Check if your device has the necessary permissions for network access.

Answer №3

After reaching out to Firebase support and conducting extensive research, I uncovered the root of the issue. Sharing my solution here in case it can help someone else who may be struggling with this frustrating problem.

It turns out that native environments do not play well with the getAuth function, leading to potential complications. To properly set up your auth object, you must use initializeAuth instead. Prior to making the adjustment, my code appeared like this:

auth = getAuth(app);
setPersistence(auth, indexedDBLocalPersistence)

To resolve the issue, I made the following changes:

let auth: Auth;
if(isPlatform('hybrid')){
    auth = initializeAuth(app, {persistence: indexedDBLocalPersistence})
}else{
    auth = getAuth(app);
    setPersistence(auth, indexedDBLocalPersistence)
}

Remember to import all necessary items for this method to work effectively:

import { initializeAuth, getAuth, setPersistence, indexedDBLocalPersistence, Auth } from "firebase/auth";
import { isPlatform } from "@ionic/vue";

By implementing this approach, I was able to successfully log in on my iOS device and simulator and receive a resolved promise from signInWithEmailAndPassword()

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

What could be causing JQuery Clip to malfunction?

I'm currently exploring the clip function in JQuery to see how it works. Despite my efforts, I'm facing difficulties in getting the function to operate correctly. My intention is to make the image shrink to nothing within a second. Below is a sni ...

What is the best way to display a SolidJS component on the screen?

I am currently working on a unique menu design for my application. The concept involves rendering a functional component within an element created in the body using createRoot and render methods. https://i.stack.imgur.com/g6Ofv.png export function create ...

Locate the Highest Number within a Multi-Dimensional Array and Store it in a Fresh Array

I'm currently tackling a coding challenge that involves working with nested arrays. The task is to find the largest number in each sub-array and then create a new array containing only the largest numbers from each one. Initially, my approach was to d ...

Tips for toggling a menu by clicking a link

I have a Navbar component with a hamburger menu. When the hamburger menu is clicked, I want to display the menu component, which is separate. To achieve this, I passed data through props and made it work. Now, I want the menu to close when clicking outsi ...

Is it better to set a timeout for executing a script in a view, or to incorporate an efficient timeout directly into the

After putting in some effort, I have managed to partially achieve my desired outcome. However, I am still exploring options to improve it further. Here is the situation: There is a controller that displays a view upon successful password reset. Within thi ...

Ways to display success message following JavaScript validation

I've been working on creating a form that displays a success message after JavaScript validation checks are successful. To show the success message, I'm utilizing Bootstrap alert. I split my code into two files - one for common validation functio ...

Navigate to a specific moment in an HTML5 audio track by clicking on the progress bar

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script> $(document).ready(function(){ var counter = 0; ...

JavaScript appending checkboxes to a list not functioning as expected

I have not been using jQuery, JavaScript, and HTML to create a list of products. The task I am working on now is the ability to select multiple items from this list. Currently, the HTML list is dynamically populated with <li> elements using JavaScri ...

Troubles with setting up slash commands in discord.js v13

I am encountering an issue while trying to deploy a slash command. The error message DiscordAPIError[50035] is displayed, stating "Invalid Form Body guild_id[NUMBER_TYPE_COERCE]: Value \"undefined\" is not snowflake." const path = require('n ...

Unable to close expanded grid item using close button

Currently, I am working on a simple 3 column grid where each grid item consists of an image and a close button. The functionality I want to achieve is that when a grid item is clicked, the image should expand and the close button should become visible. Th ...

Deciding whether to implement Vuex in NUXT: A series of queries

I really appreciate NUXT framework, but it presents some challenges for me because we lack deep understanding of its underlying implementation and operational principles. I have a few questions regarding these concerns that I hope you can provide some guid ...

angular ui-grid event: column clicked

I want to retrieve the selected column value based on the selection of a column in a UI grid. Once I have this value, I need to filter another UI grid table using it. How can I trigger a function when a column is selected and access the selected column val ...

Switch up the Javascript popup code without any specific pattern

I am looking to add variety to my pop up ads on my website by randomly changing the Javascript code for each ad every time a page is loaded. How can I achieve this? Script 1 <script type="text/javascript"> var uid = '12946'; var w ...

What is the best way to implement a never-ending scrolling grid loader within a scrollable area using Codeigniter?

In my Codeigniter framework and bootstrap installation, I have multiple sub-pages. On one of these pages, I am attempting to implement an infinite scroll loader using a jQuery script from a tutorial found at gridScrollFx.js. Here is the JS file I am using: ...

Ways to ensure a video completely fills the frame

I am experiencing an issue where the video in the main div of my home page does not fully fill the div right away - I have to refresh the page for this to happen. As a result, there is black space on the left and right sides. Interestingly enough, this pr ...

restore the HTML element to its initial position after being moved

I am utilizing document.getElementById('Droping1').style['-webkit-transform'] = translate(0px,'+Ground+'px)'; in order to relocate an HTML element. How can I return it to its original position for reusability without t ...

Unable to load JSON data into UITableView

I have a JSON file stored locally that can be accessed here. My goal is to populate a UITableView using this JSON data, and I managed to create the table successfully. However, I am facing an issue where only the headers are visible on the table, but not ...

When is the best time to access user credentials in the FirebaseUI authentication process?

Referring to a provided example on using firebase authentication with Next.js from the Next.js github, I have noticed that many projects I have studied incorporate createUserWithEmailAndPassword at some point. This function allows them to utilize user cred ...

Issue with bidirectional binding on angular material slide toggle not functioning as anticipated (Angular 4)

My angular material slide-toggle implementation seems to be working, but I'm facing an issue where it doesn't bind the value to the relevant variable as expected. // other irrelevant imports above.. import {MatDialog, MatDialogRef, MAT_DIALOG_DA ...

Utilizing Tweakpane for Debugging in a Vue Three.js Starter Template Project

Currently, I am utilizing the THRE-BOILER-TEMPLATE, a Vue.js and Three.js boilerplate, and I have a goal of incorporating a debugging UI using Tweakpane. With the unique architecture of this boilerplate being labeled as "the best," my interest lies in dete ...