React Native Firebase Auth Persistence: Cannot import "getReactNativePersistence" from "firebase/auth/react-native"

What is the issue?

I am building a react native app, using expo as my build tool and Firebase as my Backend for Auth and Database.

So far, everything has gone fine. Auth Loggin and Logout works, Fetching from Firestore with enforced security rules works. The only issue I have is that the persistence of the authentication is not working. BUT: this issue is not unknown and there is a simple solution for it. In order for this to work, one has to customize the auth object deviant from the default way.

By default, I would do this:

import { initializeApp } from "firebase/app";
import {getAuth } from "firebase/auth";

// Initialize Firebase
const firebaseConfig = {...};

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

This will work for react native, but it will lack persistent auth - thus where my initial problem comes from. To fix it I followed Expo docs instructions on how to set up Firebase. They explicitly guided me to this solution. In short, I need to switch the default in-memory persistence manager to the react native persistence manager like this article also suggested:

import { initializeApp } from "firebase/app";
import {
  initializeAuth,
  getReactNativePersistence,
} from "firebase/auth/react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";

// Initialize Firebase
const firebaseConfig = {};

export const app = initializeApp(firebaseConfig);
export const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(AsyncStorage),
});

The only thing it seems I have to addiotionally install is this package, the rest of the imports should already work.

npx expo install @react-native-async-storage/async-storage

But when I try to import the react native persistence manager I get this error:

// I try this -->

import { initializeAuth, getReactNativePersistence } from "firebase/auth/react-native";

--> I get this Error: "Cannot find module 'firebase/auth/react-native' or its corresponding type declarations.ts(2307)"

THIS is my issue, I just dont know why I cant import "getReactNativePersistence", and thus I cannot configure my firebase app as desired.

What have I tried?

1. First, I tried to figure out, if there even is a "getReactNativePersistence" object in my node_modules/firebase/auth directory. In order to find it out I cloned this repository from the article mentioned above and looked into it if the import works locally on my machine and if there are differences in the package.json file. What I found:

   --> The import works on my machine

   --> I found no notable differences in the dependencies

   --> I found where "getReactNativePersisentence" is supposed to be located. It is at:

\node_modules\@firebase\auth\dist\rn\src\platform_react_native\persistence\react_native.d.ts

2. Then I tried to find this object in my Project. I found it... It is in the very same place as in the repo above.

3. After that, I also tried reinstalling Firebase, which also changed nothing.

4. Last but not least I cloned my repo and tried a clean reinitialization, but that didn't work as well.

I have no clue what the problem could be... The import should work, the object is where it is supposed to be.

My Repo is here maybe someone has any suggestions on what is going on here?

Summarizing the Issue and Providing a Solution:

As of Firebase SDK Version 10, this import issue appeared. V10 Introduces changes for both React Native Auth and corresponding typings.

Stating:

> The Firebase JavaScript SDK v10.0.0 has a number of breaking changes related to the React Native bundle for Authentication, as well as typings changes across several products.

As one in the comments pointed out, there is a Patch-Note that seems to address this issue:

Stating:

> 10.3.0 will break React Native users who have converted to using getAuth() to initialize Authentication. React Native users who want persistent auth state must now explicitly import @react-native-async-storage/async-storage and provide it to initializeAuth() as an option like so:

import { initializeAuth, getReactNativePersistence } from "firebase/auth";

import ReactNativeAsyncStorage from "@react-native-async-storage/async-storage";

const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(ReactNativeAsyncStorage),
});
// getAuth() can be used any time after initialization

Although it looks like it is connected to this issue, this patch does not seem (to me) to address the import typing problem. I also tested their provided import schema with V10.3.0 but had the same typing issues...

<b>Long story short:</b> An actual patch for the issue is still to be waited for.

What can you do in the meantime?

1. I suppose this thread might have some usefull answers.

2. As the comments suggested, I downgraded to Firebase @9.23.0 and the import worked fine again! So I guess this will be the solution for the time being!