How to remove AsyncStorage warning when using Firebase JS SDK with React Native

Published on May 28, 2022

3 min read

FIREBASE

The Firebase JS SDK is a library that provides a set of JavaScript APIs for interacting with Firebase services. I use it with some of the production React Native apps built with Expo, mainly for authentication, database, and storage. I also use it for an open-source template that I am currently maintaining called [expo-firebase-stater], which provides a head start when building a React Native app with Firebase.

For React Native apps, the Firebase SDK uses AsyncStorage under the hood to store an authentication session when an app restarts. It is one of the out-of-the-box features that Firebase provides that I like and use when implementing authentication in React Native apps using the Firebase Auth service.

Why does the AsyncStorage warning occur

🔗

Typically, the Firebase Auth module is configured as shown below in a React Native app:

1import { initializeApp } from 'firebase/app';
2import { getAuth } from 'firebase/auth';
3
4const app = initializeApp(firebaseConfig);
5const auth = getAuth(app);

Using this code snippet to initialize Firebase auth service in the app will cause the warning:

AsyncStorage has been extracted from the react-native core and will be removed in a future release ...

ss1

Firebase SDK uses the AsyncStorage module from the react-native core. From React Native versions 0.59 and up, the AsyncStorage module has been moved to its own package: @react-native-async-storage/async-storage.

Here is the line of code in Firebase JS SDK repo that imports AsyncStorage from react-native core:

ss2

Remove the AsyncStorage warning

🔗

To remove the AsyncStorage warning, start by installing the @react-native-async-storage/async-storage package:

# for Expo apps
expo install @react-native-async-storage/async-storage

Firebase SDK provides another method in its Auth module called initializeAuth. This method allows more control over the Auth instance from the getAuth method. In addition, it provides a way to define what persistence layer to use to store the authentication session using the method getReactNativePersistence and using which Dependency. Since we are using the Firebase auth service in a React Native app, we can use the React Native Dependency.

Note: Dependencies interface in Firebase enables tree shaking. This means that a web app does not have to include all the dependencies that Firebase supports, such as Cordova or React Native.

Start by importing initializeAuth and getReactNativePersistence from firebase/auth/react-native. To initialize auth, pass an object as the second argument to the initializeAuth method. This object has a persistence key that takes the value of which persistence layer to use.

1import AsyncStorage from '@react-native-async-storage/async-storage';
2import { initializeApp } from 'firebase/app';
3import {
4 initializeAuth,
5 getReactNativePersistence
6} from 'firebase/auth/react-native';
7
8// add firebase config here
9
10// initialize firebase app
11const app = initializeApp(firebaseConfig);
12
13// initialize auth
14const auth = initializeAuth(app, {
15 persistence: getReactNativePersistence(AsyncStorage)
16});
17
18export { auth };

Using the same strategy as the above code snippet should resolve the warning about AsyncStorage.


More Posts

Browse all posts

Join 1300+ devs & subscribe to my newsletter!

NEWSLETTER

🔗 Subscribe on Revue

Aman Mittal author

Software Developer and Technical Writer since 2017. Loves learning and writing about Node.js, React, React Native & Expo. Previously, worked as Developer Advocate, independent consultant, and technical writer with companies like Draftbit, Vercel and Crowdbotics.


Copyright ©  2019-2022 Aman Mittal · All Rights Reserved.