getReactNativePersistence imports AsyncStorage from react-native core (instead of extracted package) causing warning

[davidhartsough]

Describe your environment

• Operating System version: MacOS
• Browser version: Chrome
• Firebase SDK version: 9.9.1
• Firebase Product: auth

Describe the problem

Steps to reproduce:

Add firebase (^9.9.0 or pretty much any version in the past ~year) to a react-native Expo-managed project.

Use any of the auth exported functions, such as:

import {
  getAuth,
  createUserWithEmailAndPassword,
  onAuthStateChanged,
  signInWithEmailAndPassword,
  sendPasswordResetEmail,
  signOut,
  deleteUser,
  User,
  Unsubscribe,
  GoogleAuthProvider,
  signInWithRedirect,
  getRedirectResult,
  FacebookAuthProvider,
  TwitterAuthProvider,
  signInWithCredential,
} from "firebase/auth";

Run the react-native app, say in an Android emulator, using expo.

You'll get the following warning in your console:

AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage
at node_modules/react-native/Libraries/Utilities/warnOnce.js:27:2 in warnOnce
at node_modules/react-native/index.js:262:12 in module.exports.get__AsyncStorage
at node_modules/@firebase/auth/dist/rn/index.js:164:43 in getReactNativePersistence$argument_0.setItem
at node_modules/@firebase/auth/dist/rn/index.js:77:53 in tslib.__generator$argument_1

---

So, because AsyncStorage has moved to @react-native-async-storage/async-storage and extracted from react-native core, we need change the imports in packages/auth/index.rn.ts:

import * as ReactNative from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

And then the getReactNativePersistence needs to use AsyncStorage instead of react-native core:

export const reactNativeLocalPersistence: Persistence =
  getReactNativePersistence({
    getItem(...args) {
      // Called inline to avoid deprecation warnings on startup.
      return AsyncStorage.getItem(...args);
    },
    setItem(...args) {
      // Called inline to avoid deprecation warnings on startup.
      return AsyncStorage.setItem(...args);
    },
    removeItem(...args) {
      // Called inline to avoid deprecation warnings on startup.
      return AsyncStorage.removeItem(...args);
    },
  });

[sam-gc]

This is expected behavior for backwards-compatibility reasons. You can import the getReactNativePersistence method yourself, and instantiate Auth appropriately using it.

Take a look through https://firebase.google.com/docs/auth/web/custom-dependencies. You'll want to use initializeAuth() with a custom persistence that you create by calling getReactNativePersistence() yourself.

[davidhartsough]

Hmm, ok. I think I might understand. But this doesn't really address the fact that in a future release of react-native, AsyncStorage will not be accessible from the core library. So eventually this change (importing it from the appropriate extracted library) needs to happen, and I'm not exactly sure I understand why we wouldn't make that change now. Why wait?

The AsyncStorage isn't a "custom dependency". It's the default dependency that Firebase Auth already defaults to use.

(I don't want to instantiate/initialize a custom Auth. I just want to use the normal Auth and not get a warning every time I run my app.)

[sam-gc]

We need to keep it this way as the default in order to be backwards compatible with the old behavior, since changing the package would introduce a new dependency that the app would need to pull in (this is a breaking change). It will take some future major version bump on the Firebase JS SDK to update this.

Using a different underlying AsyncStorage implementation from a different package is a custom dependency, in that it's not the default dependency that Auth uses right now. There is nothing "special" about a initializeAuth(), and it will otherwise work exactly the same as using getAuth().