Vite + Vue3 + CapacitorJS + Firebase on iOS is not passing through Authentication

Question

I am working with Vite+Vue3 connected to Firebase Web SDK 9 and looking to build mobile apps using Capacitor.

Everything is working as expected on Web and Android however when I get to iOS I can't seem to progress past the authentication (email/password only).

My login view has my login function as below;

const login = () => {
  signInWithEmailAndPassword(auth, email.value, password.value)
    .then((userCredential) => {
      console.log("First message not sent to console");
      // Signed in
      const user = userCredential.user;
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.log(error.message);
    });
};

Then I have in my App.vue

onAuthStateChanged(auth, (user) => {
  console.log("onAuthStateChanged FIRED");
  if (user) {
    const uid = user.uid;
    console.log("⏱ State Changed");
    if (!store.user.uid) {
      store.setUser(user);

      console.log("⏱ We have an UID");
    }
  } else {
    if (store.user.uid) {
      store.clearUser();
    }
  }
});

When running locally or on the hosted firebase site for web everything works as expected and I can see all of those console logs as you would expect.

On iOS though; When I click submit on the form I get some iOS styled errors (which I'll paste below) but nothing else. I'm really lacking experience with iOS development and XCode so maybe I'm just missing something.

Here's the console output from the iOS emulator;

2022-04-26 23:05:05.944955+1000 App[15964:3664648] DiskCookieStorage changing policy from 2 to 0, cookie file: file:///Users/chriswinfield-blum/Library/Developer/CoreSimulator/Devices/AE7A6476-24EF-4008-BD6E-BEDE553DA029/data/Containers/Data/Application/0001144C-40AF-4252-BB97-52BA69BEBA82/Library/Cookies/app.meditimer.www.binarycookies
⚡️  Loading app at capacitor://localhost...
⚡️  WebView loaded
⚡️  [log] - ⏱  Login component mounted!
objc[15964]: Class _PathPoint is implemented in both /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/PrivateFrameworks/UIKitCore.framework/UIKitCore (0x12221f338) and /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/PrivateFrameworks/TextInputUI.framework/TextInputUI (0x13e020fe8). One of the two will be used. Which one is undefined.
objc[15964]: Class _PointQueue is implemented in both /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/PrivateFrameworks/UIKitCore.framework/UIKitCore (0x12221f310) and /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/PrivateFrameworks/TextInputUI.framework/TextInputUI (0x13e021010). One of the two will be used. Which one is undefined.

I was suspecting that pinia isn't compatible but I'm just storing the user collection and an isLoggedIn flag so think it's ok (especially given I'm connecting to local storage) but I'm not seeing any console outputs whatsoever so have ruled it out for now (could be tomorrow's problem though!)

Interestingly when I sent a bad email/password through; I do get to see my error messages from firebase; so at least that part is working

Any ideas or suggestions on how to progress would be greatly appreciated!

Thanks Chris

Answer 1

Ok for those who come across this in the future, I found the issue was related to the Firebase SDK v9 and Capacitor.

The solution was to use initializeAuth instead of getAuth when Capacitor.isNativePlatform() === true

function whichAuth() {
  let auth;
  if (Capacitor.isNativePlatform()) {
    auth = initializeAuth(app, {
      persistence: indexedDBLocalPersistence,
    });
  } else {
    auth = getAuth(app);
  }
  return auth;
}

const auth = whichAuth();

Answer 2

Having exact same issue, fix above doesn't seem to be a fix. Can log in but can't seem to update anything using setDoc or retrieve using getDoc...