Ionic "await signInWithEmailAndPassword()" not working on iOS simulator/device without livereload

user_3583669 0
Viewed 268

In my Ionic 5 capacitor app, I have a button that calls this function

import {
  signInWithEmailAndPassword, signOut,
  User, UserCredential,
  } from '@angular/fire/auth';

//...blah blah blah

async signIn(value)
      { 
        try {alert('signing in')
          return (await signInWithEmailAndPassword(this.auth, value.email, value.password)).user
        } catch (error) {
          alert('what the heck?' + error)
        } 
      }

This works fine on the web and on Android (it returns the object and proceeds). On iOS simulator & the device, it works with livereload, but without livereload, it does nothing, not even return anything. The 'signing in' pops up, but doesn't proceed from there.

Any idea why this is the case?

capacitor ionic-framework firebase
2 Answers

After struggling, luckily I found what needs to be done.

In your app.component.ts add below code :

import { Component } from '@angular/core';
import { Capacitor } from '@capacitor/core';
import { initializeApp } from 'firebase/app';
import { indexedDBLocalPersistence, initializeAuth } from 'firebase/auth';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor() {
    const app = initializeApp(environment.firebase);
    if (Capacitor.isNativePlatform()) {
      initializeAuth(app, {
        persistence: indexedDBLocalPersistence
      });
    }
  }
}
user_25822250

In your app.module.ts file, add the following to your imports array.

provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence,
        });
      } else {
        return getAuth();
      }
    }),

and import the necessary functions & values from @angular/fire/auth.

This is a similar solution to Puneet Kushway. I find this solution better, as it keeps your app.component.ts file uncluttered.

user_46217390
Related