getReactNativePersistence not found in 'firebase/auth'

[yanodnoralov]

Operating System

iOS 16.6

Browser Version

Chrome: Version 116.0.5845.179 (Official Build) (x86_64)

Firebase SDK Version

10.3.1

Firebase SDK Product:

Auth

Describe your project's tooling

React native, with expo, building for ios and web.
node: v20.0.0

{ "name": "...", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "@expo/vector-icons": "^13.0.0", "@expo/webpack-config": "^18.0.1", "@gorhom/bottom-sheet": "^4.4.6", "@react-native-async-storage/async-storage": "1.17.11", "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^6.5.8", "@react-navigation/native": "^6.1.6", "@react-navigation/native-stack": "^6.9.12", "@react-navigation/stack": "^6.3.16", "@tanstack/react-query": "^4.33.0", "expo": "~48.0.18", "expo-blur": "~12.2.2", "expo-haptics": "~12.2.1", "expo-linear-gradient": "~12.1.2", "expo-print": "~12.2.1", "expo-sharing": "~11.2.2", "expo-status-bar": "~1.4.4", "expo-updates": "~0.16.4", "firebase": "^10.3.1", "immer": "^10.0.2", "jotai": "^2.1.1", "jotai-immer": "^0.2.0", "react": "^18.2.0", "react-dom": "18.2.0", "react-hook-form": "^7.46.1", "react-native": "0.71.8", "react-native-gesture-handler": "~2.9.0", "react-native-get-random-values": "~1.9.0", "react-native-paper": "^5.8.0", "react-native-reanimated": "~2.14.4", "react-native-safe-area-context": "4.5.0", "react-native-screens": "~3.20.0", "react-native-select-dropdown": "^3.3.4", "react-native-signature-canvas": "^4.5.1", "react-native-web": "~0.18.10", "react-native-webview": "11.26.0", "react-navigation-stack": "^2.10.4", "react-query": "^3.39.3", "use-immer": "^0.9.0", "uuid": "^9.0.0" }, "devDependencies": { "@babel/core": "^7.20.0" }, "private": true }

Describe the problem

getReactNativePersistence is not listed or exported from the auth-public.d.ts file. I am importing it like this:
import { initializeAuth, getReactNativePersistence } from "firebase/auth";

While clearly, i can find initializeAuth and other export. When I run my app on iOS, the error is not triggered interestingly. But in web, I get the following error popup. Maybe i'm doing something simple wrong here in the way im handling persistence between web and mobile context, however, i would still expect getReactNativePersistence to be seen in the auth package. Any help is appreciated.

`WARNING in ./firebaseConfig.js:29:16
export 'getReactNativePersistence' (imported as 'getReactNativePersistence') was not found in 'firebase/auth' (possible exports: ActionCodeOperation, ActionCodeURL, AuthCredential, AuthErrorCodes, EmailAuthCredential, EmailAuthProvider, FacebookAuthProvider, FactorId, GithubAuthProvider, GoogleAuthProvider, OAuthCredential, OAuthProvider, OperationType, PhoneAuthCredential, PhoneAuthProvider, PhoneMultiFactorGenerator, ProviderId, RecaptchaVerifier, SAMLAuthProvider, SignInMethod, TotpMultiFactorGenerator, TotpSecret, TwitterAuthProvider, applyActionCode, beforeAuthStateChanged, browserLocalPersistence, browserPopupRedirectResolver, browserSessionPersistence, checkActionCode, confirmPasswordReset, connectAuthEmulator, createUserWithEmailAndPassword, debugErrorMap, deleteUser, fetchSignInMethodsForEmail, getAdditionalUserInfo, getAuth, getIdToken, getIdTokenResult, getMultiFactorResolver, getRedirectResult, inMemoryPersistence, indexedDBLocalPersistence, initializeAuth, initializeRecaptchaConfig, isSignInWithEmailLink, linkWithCredential, linkWithPhoneNumber, linkWithPopup, linkWithRedirect, multiFactor, onAuthStateChanged, onIdTokenChanged, parseActionCodeURL, prodErrorMap, reauthenticateWithCredential, reauthenticateWithPhoneNumber, reauthenticateWithPopup, reauthenticateWithRedirect, reload, sendEmailVerification, sendPasswordResetEmail, sendSignInLinkToEmail, setPersistence, signInAnonymously, signInWithCredential, signInWithCustomToken, signInWithEmailAndPassword, signInWithEmailLink, signInWithPhoneNumber, signInWithPopup, signInWithRedirect, signOut, unlink, updateCurrentUser, updateEmail, updatePassword, updatePhoneNumber, updateProfile, useDeviceLanguage, validatePassword, verifyBeforeUpdateEmail, verifyPasswordResetCode)
27 | persistence = browserLocalPersistence;
28 | } else {

29 | persistence = getReactNativePersistence(ReactNativeAsyncStorage);
| ^
30 | }`

My full config:
`//firebaseConfig.js
import ReactNativeAsyncStorage from "@react-native-async-storage/async-storage";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { initializeAuth, getReactNativePersistence } from "firebase/auth";
import { Platform } from 'react-native';

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

export const firebaseApp = initializeApp(firebaseConfig);
// For more information on how to access Firebase in your project,
// see the Firebase documentation: https://firebase.google.com/docs/web/setup#access-firebase

let persistence;

if (Platform.OS === 'web') {
persistence = browserLocalPersistence;
} else {
persistence = getReactNativePersistence(ReactNativeAsyncStorage);
}

export const auth = initializeAuth(firebaseApp, {
persistence,
});

// Get a reference to Firestore
const db = getFirestore(firebaseApp);

// Export Firestore instance
export default db;
`

Steps and code to reproduce issue

in a expo env:
2. npm install firebase
3. import { initializeAuth, getReactNativePersistence } from "firebase/auth";
4. `import { initializeAuth, getReactNativePersistence } from "firebase/auth";

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

export const firebaseApp = initializeApp(firebaseConfig);
// For more information on how to access Firebase in your project,
// see the Firebase documentation: https://firebase.google.com/docs/web/setup#access-firebase

export const auth = initializeAuth(firebaseApp, {
persistence: getReactNativePersistence(ReactNativeAsyncStorage)
});
`

run app

[hsubox76]

So the issue here is there are multiple bundles of @firebase/auth. Which bundle you get is supposed to be invisible to the user. There's a "react-native" field in the package.json of @firebase/auth which most React Native project configs are able to detect, which will get you the correct bundle for RN (the one that includes getReactNativePersistence):

https://github.com/firebase/firebase-js-sdk/blob/master/packages/auth/package.json#L7
(here and in line 21, if you're using Node ES module resolution)

I suspect that Expo may have a different Metro config for web (vs mobile) where it does not resolve the "react-native" field first, and prioritizes "module" or "browser" instead. These bundles, being designed for web, don't have a getReactNativePersistence method, as it's not needed on web.

From skimming RN docs, I believe you can write different versions of your source files meant to be used on web and iOS. I think the first thing I would try is to write different code for the web version of your app that doesn't use getReactNativePersistence and instead uses one of the persistences that auth provides for web. Examples here: https://firebase.google.com/docs/auth/web/custom-dependencies

The other option is, if Expo gives you control over your Metro config, you can force it to prefer the "react-native" field even when building for web, by something like what's described in this comment: #7115 (comment)

Finally, no matter what you do, the typings file (auth-public.d.ts) is still likely to look wrong for you, and give you errors in the IDE, and that's because of: #7584

[yanodnoralov]

thanks you @hsubox76 for pointing this out. Very helpful. Anyone who runs into this: I ended up using Platform Specific Extensions to load a diff config file for web vs mobile to avoid pulling in non-web functions in my import statements.