Firebase-js-sdk: Firebase on React Native should import AsyncStorage from @react-native-community/async-storage

[alizbazar]

Describe your environment

• Operating System version: React Native 0.59
• Browser version: iOS, Android
• Firebase SDK version: 6.1.0
• Firebase Product: auth

Describe the problem

When using Firebase on React Native, it uses AsyncStorage from react-native under the hood to store the authentication session across app restarts. Starting from RN0.59 AsyncStorage is deprecated from react-native and moved into its own package react-native-async-storage.

Steps to reproduce:

Add Firebase to React Native app and observe how at the startup there's a warning:

[warn][tid:com.facebook.react.JavaScript] Warning: Async Storage 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-community/async-storage' instead of 'react-native'. See https://github.com/react-native-community/react-native-async-storage

Relevant Code:

https://github.com/firebase/firebase-js-sdk/blob/96ab56bac05ccaf506ed3a02ccad5ff7e01a07d0/packages/app/index.rn.ts#L27

[hsubox76]

Thanks for the heads-up. It looks like there's a couple of issues with upgrading right now.

First, it seems like Expo users currently can't import native packages without ejecting (https://github.com/react-native-community/async-storage/issues/72).

Secondly, we would like a graceful fallback if people are using an older version of React Native, but you can't detect React Native version at runtime. I tried to try/catch require(@react-native-community/async-storage) but apparently these statements are parsed at build time. If a require statement errors, the packager won't build. Let me know if I'm wrong about any of this!

We could also explicitly include @react-native-community/async-storage as a dependency in firebase, but that would cause that dependency to always be npm installed, even if the user isn't using React Native, which seems like the wrong thing to do.

A good time to do this might be when Expo comes up with a way to allow usage of the new AsyncStorage, and when Firebase has a major version change, which allows us to introduce breaking changes so we don't need to provide a fallback.

[alizbazar]

Seems that this is actually bigger problem than it seemed: if @react-native-community/async-storage is used in a project where firebase is used, on iOS authentication persistence breaks: app would log out each time it is restarted.

It seems to be some sort of race condition. When login happens, firebase correctly stores credential in AsyncStorage. However, when the app restarted, the credential is not there and the app logs out. This seems to happen only on iOS (Android seems to work fine). This may have to do with the order of loading @react-native-community/async-storage vs calling firebase, however, this is a very complex issue to reveal and fix. Also, it means firebase cannot be used with any other tools or projects that make use of @react-native-community/async-storage which is a bummer.

@hsubox76 suggestion: what if AsyncStorage could be passed as an additional option when initializing Firebase, or perhaps calling firebase.useStorage('asyncStorage', AsyncStorage) or similar? This could be a temporary solution until issues with expo and firebase version upgrade are resolved (not sure how far the version upgrade is). Thoughts?

[leedan77]

I found the problem when using deprecated AsyncStorage and @react-native-community/async-storage at the same time will cause one persistent storage to overwrite another one.

[sivakumar-cf]

any updates on this?

[alizbazar]

Any updates? Fairly soon AsyncStore is going to be removed from newest react native -> Firebase will fail in all new React Native projects. Currently, we're just getting a nasty warning:

[cwilby]

Our team is looking to rewrite away from Firebase due to this bug.

Injecting AsyncStorage into Firebase as suggested by @hsubox76 seems like it could work for React Native. By default Firebase could use a default storage mechanism, then accept other implementations through a setStorage method.

It seems like Firebase would then need to create an abstraction internally to use provided storage mechanisms.

I don't know enough about this library to know if that's right, would need to hear from the regular contributors to this project.

[cwilby]

@jsayol made a RNAsyncStorageAdapter object, this could be the start of the abstraction I referenced, as it is currently a wrapper to patch for React Native.

https://gist.github.com/jsayol/31fb8f488c6ccc6d9ea9aceff995581d

[hsubox76]

We are still looking into this issue, which is very tricky because of Expo support. The potential solution you mentioned doesn't address the uncatchable require error issue. We can allow users to specify their AsyncStorage, but in order to not break users with older versions of RN, we need to keep the old AsyncStorage as default without them explicitly pointing to it. This will break newer users as soon as RN removes it from core (unless we could catch the require error).

Also you might already be aware, but if not (and for anyone else who is not), there is an official react-native-firebase package especially for using Firebase with React Native that uses the native mobile SDKs, which (1) shouldn't have this specific issue with AsyncStorage and (2) also has some features the JS SDK doesn't. Switching over would probably be somewhat of a time investment but if you were already considering a rewrite away from Firebase this might be less work than that.

I realize it's not an option for some people (such as Expo users) and we are actively trying to figure out what to do to resolve this issue for RN and the JS SDK. Our plan so far is to introduce this as a breaking change with the next major version. I don't really have the authority to give a timeline for major version releases but if we stick to a similar schedule as the past it should be in a few months.

[cwilby]

@hsubox76 I didn't know about that library, it looks more than suitable - thank you!

[cwilby]

@hsubox76 Follow up, took about 8 hours to migrate to react-native-firebase, thanks again