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:

firebase-js-sdk/packages/app/index.rn.ts

Line 27 in 96ab56b

const { AsyncStorage } = require('react-native');

[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 (react-native-async-storage/async-storage#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

[alexdanieldm]

Any news on this issue? A way to resolve this issue for RN and the JS SDK? or allow firebase to use @react-native-async-storage/async-storage

Or maybe a date for the breaking change with the next major version is scheduled to be release? @hsubox76

[cwilby]

@alexdanieldm Been a while since my heads been here, but IIRC the solution for RN is to migrate from this library (which is intended for web environments) to react-native-firebase

[hsubox76]

This will be available for v9, which is in beta (npm install firebase@beta) now. Since it's in beta, it may not be stable (there is a bug in the current release we are trying to fix today), so you may want to wait for the official release, which will be very soon.

In v9 it will import the (deprecated) AsyncStorage bundled react-native by default (import { AsyncStorage } from 'react-native';) but you can specify a different AsyncStorage using initializeAuth (instead of getAuth) with:

// Import it from your preferred package.
import AsyncStorage from '@react-native-async-storage/async-storage';

// Provide it to initializeAuth.
const auth = initializeAuth(app, { persistence: getReactNativePersistence(AsyncStorage) });

[alexdanieldm]

Hi @hsubox76, i want reach out to have confirmation on this

// Import it from your preferred package.
import AsyncStorage from '@react-native-async-storage/async-storage';

// Provide it to initializeAuth.
const auth = initializeAuth(app, { persistence: getReactNativePersistence(AsyncStorage) });

being NOW THE OFFICIAL SOLUTION of Firebase on React Native for the AsyncStorage warnings

[hsubox76]

Thanks for bringing this up and sorry for the late reply. Yes, this is intended to be the official solution. We haven't yet exposed getReactNativePersistence() and we're working on making that available.

[brentvatne]

@hsubox76 - using '@react-native-async-storage/async-storage' would be sufficient for expo support. i do think the idea of making persistence pluggable could also be valuable.

[edi]

Hi, is there any timeline with regards to getting getReactNativePersistence method exposed?

[rodrigo85]

Same problem here.

[dqii]

Is there any timeline on exposing getReactNativePersistance or just using @react-native-async-storage/async-storage?

[jthoward64]

Thanks for bringing this up and sorry for the late reply. Yes, this is intended to be the official solution. We haven't yet exposed getReactNativePersistence() and we're working on making that available.

Why go for such a convoluted solution when Expo now fully supports @react-native-async-storage/async-storage?

@alexdanieldm Been a while since my heads been here, but IIRC the solution for RN is to migrate from this library (which is intended for web environments) to react-native-firebase

This requires ejecting on expo which is the exact reason that this issue exists in the first place

[psychoSherlock]

This will be available for v9, which is in beta (npm install firebase@beta) now. Since it's in beta, it may not be stable (there is a bug in the current release we are trying to fix today), so you may want to wait for the official release, which will be very soon.

In v9 it will import the (deprecated) AsyncStorage bundled react-native by default (import { AsyncStorage } from 'react-native';) but you can specify a different AsyncStorage using initializeAuth (instead of getAuth) with:

// Import it from your preferred package.
import AsyncStorage from '@react-native-async-storage/async-storage';

// Provide it to initializeAuth.
const auth = initializeAuth(app, { persistence: getReactNativePersistence(AsyncStorage) });

Hey now that v9 is released, is this issue fixed?

[edi]

This will be available for v9, which is in beta (npm install firebase@beta) now. Since it's in beta, it may not be stable (there is a bug in the current release we are trying to fix today), so you may want to wait for the official release, which will be very soon.
In v9 it will import the (deprecated) AsyncStorage bundled react-native by default (import { AsyncStorage } from 'react-native';) but you can specify a different AsyncStorage using initializeAuth (instead of getAuth) with:

// Import it from your preferred package.
import AsyncStorage from '@react-native-async-storage/async-storage';

// Provide it to initializeAuth.
const auth = initializeAuth(app, { persistence: getReactNativePersistence(AsyncStorage) });

Hey now that v9 is released, is this issue fixed?

getReactNativePersistence is not exposed, therefore not fixed yet.

[Rithu-664]

Hi, I'm currently working on an app in expo and I am getting this warning. I am not importing AsyncStorage anywhere in my app. So I don't really know why I am getting the warning. Please lmk if you know what I could do to fix this.

...
import * as auth from 'firebase/auth'
...
  onSignIn = () => {
      auth.signInWithEmailAndPassword(this.state.email,this.state.password).then(() => {
          this.props.navigation.replace("Home")
      }).catch((error) => {
          Alert.alert("Failed to sign in",error.message)
      })
  }

config file:

import * as firebase from 'firebase/app'

const firebaseConfig = {
    apiKey: "apiKey",
    authDomain: "authDomain",
    projectId: "projectId",
    storageBucket: "storageBucket",
    messagingSenderId: "messagingSenderId",
    appId: "appId",
    measurementId: "measurementId"
  };

  if(firebase.getApps().length === 0){
      firebase.initializeApp()
  }

[jthoward64]

@Rithu-664 There is more info above, but see the below quotes for a tldr

Even if you don't use AsyncStorage anywhere, firebase uses it for auth state persistence (keeping you signed in between sessions). There as some intermediate solutions until AsyncStorage is no longer in React Native and firebase removes it's import (I would hazard a guess at SDK 10 since it's a major breaking change). There is a lot of discussion about why this is needed towards the top of this issue.

How to stop your app from breaking if AsyncStorage is removed from RN:

I was able to import with 9.4.1 import { getReactNativePersistence } from 'firebase/auth/react-native'

And I initialized auth as mentioned earlier: const auth = initializeAuth(app, { persistence: getReactNativePersistence(AsyncStorage) });

But I still get the warning 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

Clarification of behavior:

so just to check, even though getReactNativePersistence is already exposed, the below isn't meant to work yet - i.e. still waiting for some updates?

So the way it has to work because of the reasons discussed above is:

1. Firebase imports the old module from React-Native itself, triggering the warning

2. The user sets their own persistence (@react-native-async-storage/async-storage)

3. Firebase switches it's references to AsyncStorage to the user provided module

This means A. that when AsyncStorage is removed firebase doesn't just up and stop working and B. firebase no longer conflicts with use of @react-native-async-storage/async-storage

HOWEVER, firebase still has to import the old module to start with to support users who have not updated

TLDR; It does do something and you should use the new AsyncStorage even though it doesn't fix the warning

To hide the warning (after doing the above):

LogBox.ignoreLogs(['AsyncStorage has been extracted from react-native core and will be removed in a future release']);
worked for me until the bug is fixed.

[hsubox76]

I cannot get React Native running on my machine after trying for the better part of a day, so if anyone wants to help test out the fix in #5739 that would be great.

To help test it out:

• Open a project where you're importing the new module and passing it to initializeAuth as recommended (const auth = initializeAuth(app, { persistence: getReactNativePersistence(AsyncStorage) });), and verify the warning is still showing.
• Then find the file node_modules/@firebase/auth/dist/rn/index.js and replace the contents with this: https://gist.github.com/hsubox76/e3499766e73a99dea72227f991de4286
• Then rebuild and see if the warning has gone away and there are no other errors.
• Also verify there aren't any errors or problems if you don't provide AsyncStorage and Firebase falls back to the default included in react-native.

Edit: I did finally manage to get a react-native app working so I'll try to test these things out.

[jonathanmv]

I cannot get React Native running on my machine after trying for the better part of a day, so if anyone wants to help test out the fix in #5739 that would be great.

To help test it out:

• Open a project where you're importing the new module and passing it to initializeAuth as recommended (const auth = initializeAuth(app, { persistence: getReactNativePersistence(AsyncStorage) });), and verify the warning is still showing.
• Then find the file node_modules/@firebase/auth/dist/rn/index.js and replace the contents with this: https://gist.github.com/hsubox76/e3499766e73a99dea72227f991de4286
• Then rebuild and see if the warning has gone away and there are no other errors.
• Also verify there aren't any errors or problems if you don't provide AsyncStorage and Firebase falls back to the default included in react-native.

Edit: I did finally manage to get a react-native app working so I'll try to test these things out.

Hi @hsubox76
I followed your instructions and got the error below. Please notice that I am using Expo go, so it could behave differently.

[jthoward64]

I cannot get React Native running on my machine after trying for the better part of a day, so if anyone wants to help test out the fix in #5739 that would be great.
To help test it out:

• Open a project where you're importing the new module and passing it to initializeAuth as recommended (const auth = initializeAuth(app, { persistence: getReactNativePersistence(AsyncStorage) });), and verify the warning is still showing.
• Then find the file node_modules/@firebase/auth/dist/rn/index.js and replace the contents with this: https://gist.github.com/hsubox76/e3499766e73a99dea72227f991de4286
• Then rebuild and see if the warning has gone away and there are no other errors.
• Also verify there aren't any errors or problems if you don't provide AsyncStorage and Firebase falls back to the default included in react-native.

Edit: I did finally manage to get a react-native app working so I'll try to test these things out.

Hi @hsubox76 I followed your instructions and got the error below. Please notice that I am using Expo go, so it could behave differently.

Just tried it myself, replacing the var phone = require(...) with the line from my original index.js and this fix seems to work both passing the new AsyncStorage and with the old one.

EDIT: that is to say that @hsubox76 's change completely removes any AsyncStorage warnings for me in both cases and React Native Debugger confirms that it is still using AsyncStorage correctly

[hsubox76]

Thanks a lot! The fix is merged and there is a staging release with it if anyone wants to try: [email protected] Otherwise the release should go out tomorrow.

[jthoward64]

Just updated to 9.6.5 and it seems like that has properly fixed it; are we ready to close this issue, or wait for more widespread testing?

[canali83]

Just updated to 9.6.5 and it seems like that has properly fixed it; are we ready to close this issue, or wait for more widespread testing?

i am still getting the same error after update

[jthoward64]

Just updated to 9.6.5 and it seems like that has properly fixed it; are we ready to close this issue, or wait for more widespread testing?

i am still getting the same error after update

Are you passing a persistence layer to initializeAuth? If not, scroll up in the thread a bit (I posted a big TL;DR)

[canali83]

a persistence layer to initializeAuth

I followed v9 docs :
const firebaseApp = initializeApp(fb_config);
const fb_auth = getAuth(firebaseApp); // For Authentication

[jthoward64]

a persistence layer to initializeAuth

I followed v9 docs :

const firebaseApp = initializeApp(fb_config);

const fb_auth = getAuth(firebaseApp); // For Authentication

V9 docs are out of date in this case. Scroll up for instructions on how to give firebase the up to date AsyncStorage.

[mrvncaragay]

@tajetaje hi, I'm pretty new working with react native and I'm creatting an mobile app. Is there a way to know if my code is actually using the AsyncStorage from the @react-native-community/async-storage as it was indicated here?

import { getReactNativePersistence } from 'firebase/auth/react-native';

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

  

  const auth = initializeAuth(firebaseApp, {

    persistence: getReactNativePersistence(AsyncStorage),

  });

Maybe print the contents of AsyncStorage and see if there are any Firebase keys?

See: https://react-native-async-storage.github.io/async-storage/docs/debugging/communityPackages

Just updated to 9.6.5 and it seems like that has properly fixed it; are we ready to close this issue, or wait for more widespread testing?

Followed these instructions and warning went away. thanks!!

[Jeffreyoboe1]

Using firebase 9.6.6, but still seeing asyncstorage error. Sounds like the solution is to use initializeAuth and provide the new AsyncStorage, however we shouldn't have to do this.

The new async storage should be the default when calling getAuth().

[jthoward64]

Using firebase 9.6.6, but still seeing asyncstorage error. Sounds like the solution is to use initializeAuth and provide the new AsyncStorage, however we shouldn't have to do this.

The new async storage should be the default when calling getAuth().

Read the discussion above. That would break everyone using the old AsyncStorage. Maybe in v10 but that is a majorly breaking, and nonessential change.

[d7a7]

Hi, I am using firebase 9.6.5 and expo and am attempting to just replace the getAuth() function with the
initializeAuth(firebase, { persistence: getReactNativePersistence(AsyncStorage) });
as above. However, I am getting the error 'Firebase: Error (auth/already-initialized)', are there further changes I need to make to the the way I am initializing the app?

[jthoward64]

Hi, I am using firebase 9.6.5 and expo and am attempting to just replace the getAuth() function with the initializeAuth(firebase, { persistence: getReactNativePersistence(AsyncStorage) }); as above. However, I am getting the error 'Firebase: Error (auth/already-initialized)', are there further changes I need to make to the the way I am initializing the app?

Check that you are only using inializeAuth() once and getAuth() after that for getting an auth reference (or the return value of initializeAuth). If you can, maybe add a breakpoint on the line where you call inializeAuth, or if all else fails inside the inializeAuth function itself

[d7a7]

Hi, I am using firebase 9.6.5 and expo and am attempting to just replace the getAuth() function with the initializeAuth(firebase, { persistence: getReactNativePersistence(AsyncStorage) }); as above. However, I am getting the error 'Firebase: Error (auth/already-initialized)', are there further changes I need to make to the the way I am initializing the app?

Check that you are only using inializeAuth() once and getAuth() after that for getting an auth reference (or the return value of initializeAuth). If you can, maybe add a breakpoint on the line where you call inializeAuth, or if all else fails inside the inializeAuth function itself

Yeah I was misusing the initializeAuth, I moved it just after the initializeApp() in my seperate firebase script and kept getAuth() as they were in the rest of the program. Thanks for the help!

[jaykay-p]

Hi, I am using firebase 9.6.5 and expo and am attempting to just replace the getAuth() function with the initializeAuth(firebase, { persistence: getReactNativePersistence(AsyncStorage) }); as above. However, I am getting the error 'Firebase: Error (auth/already-initialized)', are there further changes I need to make to the the way I am initializing the app?

Check that you are only using inializeAuth() once and getAuth() after that for getting an auth reference (or the return value of initializeAuth). If you can, maybe add a breakpoint on the line where you call inializeAuth, or if all else fails inside the inializeAuth function itself

Thanks! After replacing getAuth with initializeApp, I got auth/already-initialized error as well. I fixed it by making sure initalizeAuth runs only once. Sharing my firebase config for future visitors here

import { initializeApp, FirebaseApp, getApps, getApp } from 'firebase/app';
import { Auth, getAuth, initializeAuth } from 'firebase/auth';
import { getReactNativePersistence } from 'firebase/auth/react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import config from './config.json';

let firebaseApp: FirebaseApp;
let fireAuth: Auth;
if (getApps().length < 1) {
  firebaseApp = initializeApp(config);
  fireAuth = initializeAuth(firebaseApp, {
    persistence: getReactNativePersistence(AsyncStorage),
  });
} else {
  firebaseApp = getApp();
  fireAuth = getAuth();
}

[ASOUDRY]

I replaced my getAuth with initializeAuth. As seen below. Im still getting the warning with no actual error though. Im writing in javascript, so I can't use typescript if that is crucial. Am I missing something?

const firebaseApp = initializeApp(config);
export const firestore = getFirestore(firebaseApp)
export const auth = initializeAuth(firebaseApp, {
persistence: getReactNativePersistence(AsyncStorage),
});

[hsubox76]

How are you importing AsyncStorage?

[ASOUDRY]

How are you importing AsyncStorage?

Im importing it from '@react-native-async-storage/async-storage';

My entire firebase.js file is below. (Reposted as I put my api key in by accident)

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

const firebaseApp = initializeApp({
apiKey: "Key",
authDomain: "dog-sitting-2.firebaseapp.com",
projectId: "dog-sitting-2",
});

export const firestore = getFirestore(firebaseApp)

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

[jthoward64]

I replaced my getAuth with initializeAuth. As seen below. Im still getting the warning with no actual error though. Im writing in javascript, so I can't use typescript if that is crucial. Am I missing something?

const firebaseApp = initializeApp(config); export const firestore = getFirestore(firebaseApp) export const auth = initializeAuth(firebaseApp, { persistence: getReactNativePersistence(AsyncStorage), });

I would suggest importing the old async storage and then logging AsyncStorage.getAllKeys() to make sure it's firebase that is still using the old async storage.

[ASOUDRY]

I would suggest importing the old async storage and then logging AsyncStorage.getAllKeys() to make sure it's firebase that is still using the old async storage.

Array [ Array [ "@storage_Key", value, ], Array [ "firebase:authUser:AIzaSyBR38W7ciVKt6sbpWHGp3FImnNf24-LmII:[DEFAULT]", "{data}", ], Array [ "firebase:authUser:AIzaSyCtTlZdbY1m8Hn0vNzDHXIKJ58pXVX4AfE:[DEFAULT]", "{data}", ], Array [ "__sak", null, ], ]
This is what the console.log resulted in. Value, and data are all placeholders as the actual strings are massive, and their actual contents I believe are irrelevant to my problem.

When I use the current AsyncStorage the one I posted above I get this in my console.log

Array [ "@storage_Key", "firebase:authUser:AIzaSyBR38W7ciVKt6sbpWHGp3FImnNf24-LmII:[DEFAULT]", "firebase:authUser:AIzaSyCtTlZdbY1m8Hn0vNzDHXIKJ58pXVX4AfE:[DEFAULT]", "__sak", ]

[hsubox76]

Sorry I didn't reply to this at the time but you're importing the firebase auth bundle twice:

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

firebase/auth/react-native is a complete firebase auth bundle, as is firebase/auth. You only need one. We really need to update our documentation as I see this a lot.

You want to do:

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