firebase/auth problem in expo/react-native

[matheusxreis]

Operating System

Ubuntu 22.04

Browser Version

Firefox 114.0.2

Firebase SDK Version

10.0.0

Firebase SDK Product:

Auth

Describe your project's tooling

A expo app using firebase auth.

Describe the problem

This week I needed to upgrade my Expo SDK, so I also had to upgrade react-native library. Because of this upgrades I was taken to upgrade my firebase SDK.
The problem was reported by another person here: #7425 (comment) and is exactly that. When I call the function getAuth() or even initializeAuth() the app simply freeze and get stuck in the SplashScreen. Passing the parameters or not the problem continues. And it happens only with firebase auth module.

This occurred in Android 11 and 13, tested in emulator and physical device.

Versions:

• Expo SDK: ^49.0.0,
• React-Native: 0.72.1,
• Firebase: 10.0.0

Steps and code to reproduce issue

Only import and call getAuth() or initializeAuth() in firebase sdk 10.0.0.

[jacobhq]

Just curious, are you using any kind of splash screen, because I am experiencing something similar (I'm using SDK 10), however it only started after I started work on a splash screen.

[matheusxreis]

Just curious, are you using any kind of splash screen, because I am experiencing something similar (I'm using SDK 10), however it only started after I started work on a splash screen.

@jacobhq I use expo-splash-screen to handle with the Splash Screen, but in the general, the Splash Screen is managed by the Expo. It is just a image, which the path I put on app.json. If there is no image, the screen stay in blank.

[jacobhq]

Oh ok, I was using the SplashScreen.preventAutoHideAsync() and SplashScreen.hideAsync() route with custom fonts, so I think that it is not related to this issue.

[matheusxreis]

@jacobhq That is from expo-splash-screen, isn't? I use it here. If you remove it, the app works?

[jacobhq]

Yep

[matheusxreis]

@jacobhq Nice. I've been tested here and it didn't work. =/

[jacobhq]

Oh, well thanks for trying. If you paste in your package.json, I’d be happy to take a look.

[anckaertv]

Hello, having the same issue. App completely freezes after splash screen when using getAuth or initializeAuth. If I launch the development-build without the call to authentication (located in a separated firebaseConfig file), app gets loaded. Calling const auth = getAuthentication(app) will work correctly on refresh. Reloading completely the app however gets the app completely frozen back.

Package.json

"@expo/config-plugins": "~7.2.2",
"@expo/prebuild-config": "~6.2.4",
"@expo/react-native-action-sheet": "^4.0.1",
"@expo/vector-icons": "^13.0.0",
"@react-native-async-storage/async-storage": "1.18.2",
"expo": "^49.0.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.3",
"react-native-web": "~0.19.6",

Simple App

import { getAuth } from "firebase/auth";
import React from "react";
import { Text } from "react-native";
import "react-native-gesture-handler";
import { SafeAreaView } from "react-native-safe-area-context";
import { firebaseApp } from "./app/setup/configs/firebaseConfig";
export default function AppDetails() {
  console.log("AppDetails");
  const auth = getAuth(firebaseApp);
  console.log(auth);
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "red" }}>
      <Text>OK</Text>
    </SafeAreaView>
  );
}

If I comment
const auth = getAuth(firebaseApp); console.log(auth);
App will be launched correctly on reload. Adding this back & letting the app refresh itself will work. Reloading the app after with these lines uncommented will freeze the app.

[qchuchu]

It seems that the reason is that the package firebase/auth is using an incompatible version of @react-native-async-storage/async-storage. As now it's using it by default, if you have an up to date expo & react native package, you need to have a version of the package at 1.18.2 minimum.

I tried to add an override and force the version

  "overrides": {
    "@react-native-async-storage/async-storage": "1.18.2"
  },

in my package.json, and it seems to work like a charm. I'll take a look to upgrade the default version, but in the meantime, this can work for you !

[hsubox76]

Thanks for finding the cause. Would it solve the problem if auth/package.json used a caret, so if instead of:

"@react-native-async-storage/async-storage": "1.17.12",

we had

"@react-native-async-storage/async-storage": "^1.17.12",

[qchuchu]

Yes definitely :) Is there a reason why you are using this specific version ? :)

[hsubox76]

Nope, it's just standard for us to pin all dependencies for better control but I think we should make an exception for this dependency since users should have more control over it.

[qchuchu]

Ok ! I was looking at a way to send a pull request, do you want me to open it or you're on it ?

[hsubox76]

I can do it, I'm just double checking a few things. The current version of @react-native-async-storage/async-storage is 1.19.0, and that's what you'll get with ^1.18.2. Obviously there's a problem if the version is earlier than 1.18.2, will there also be a problem if it installs a version that is too high? Or is it always safe to install the latest version?

[qchuchu]

Well, at least, the teams can control the final version of the package that is deployed in their project. On my side, I'll obviously need to force the 1.18.2 as expo consider (actually) that the 1.19.0 of @react-native-async-storage/async-storage is incompatible. But that's not a problem for the firebase package I think.

But at least I'm not blocked with 2 versions of the package on our projects :)

[qchuchu]

> npx expo-doctor
✔ Validating global prerequisites versions passed
✔ Checking for incompatible packages passed
✔ Checking for conflicting global packages in project passed
✔ Verifying prebuild support package versions are compatible passed
✖ Checking dependency versions for compatibility with the installed Expo SDK failed
Issues:
  Some dependencies are incompatible with the installed expo version:
    @react-native-async-storage/async-storage@1.19.0 - expected version: 1.18.2
  Your project may not work correctly until you install the correct versions of the packages.
  Fix with: npx expo install --fix
  Found outdated dependencies
Advice:
  • Use npx expo install --check to review and upgrade your dependencies.
NOT SUPPORTED: option format. `validateFormats: false` can be used instead.
✔ Validating Expo Config passed
✔ Checking package.json for common issues passed

✖ Found one or more possible issues with the project. See above logs for issues and advice to resolve.