---
title: 'How to remove AsyncStorage warning when using Firebase JS SDK with React Native'
slug: 'remove-asyncstorage-has-been-extracted-warning-using-firebase'
date: '2022-05-28'
thumbnail: '/thumbnails/firebase.png'
tag: 'firebase'
canonicalUrl: 'https://amanhimself.dev/blog/remove-asyncstorage-has-been-extracted-warning-using-firebase/'
---

The [Firebase JS SDK](https://github.com/firebase/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:

```js
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
```

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

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

![ss1](https://i.imgur.com/pBiiXzY.png)

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](https://github.com/firebase/firebase-js-sdk/blob/96ab56bac05ccaf506ed3a02ccad5ff7e01a07d0/packages/app/index.rn.ts#L27) is the line of code in Firebase JS SDK repo that imports AsyncStorage from `react-native` core:

![ss2](https://i.imgur.com/uWt9gRQ.jpg)

## Remove the AsyncStorage warning

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

```shell
# for Expo projects
npx 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](https://firebase.google.com/docs/reference/js/auth.dependencies.md#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.

```js
import AsyncStorage from '@react-native-async-storage/async-storage';
import { initializeApp } from 'firebase/app';
import {
  initializeAuth,
  getReactNativePersistence
} from 'firebase/auth/react-native';

// add firebase config here

// initialize firebase app
const app = initializeApp(firebaseConfig);

// initialize auth
const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(AsyncStorage)
});

export { auth };
```

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


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

---
title: 'How to setup a React App with a Firebase project'
slug: 'firebase-config-in-a-react-app'
date: '2020-06-05'
thumbnail: '/thumbnails/firebase.png'
tag: 'firebase'
canonicalUrl: 'https://amanhimself.dev/blog/firebase-config-in-a-react-app/'
---

![cover](https://i.imgur.com/u3tfk7P.png)

To create or setup a new React app, I try to use `npx` from a terminal window. By executing the following command, it generates a new React app using the `create-react-app` utility.

```shell
npx create-react-app reactapp

# after the project has generated

cd reactapp
```

The name of the project `reactapp` mentioned in the command is the project name. To start this newly created React app, run the below command from the terminal window:

```shell
yarn start
```

It will trigger the default React app that is generated by `create-react-app` command-line utility and open the app in a browser window at URL `http://localhost:3000`.

![ss1](https://i.imgur.com/KMW1O19.png)

Now, setup the project as per the need. The following directory basic setup is how I like to setup a new React app (_when using Firebase as the backend service_).

![ss2](https://i.imgur.com/4EXRxj8.png)

Add an initial modification of `src/App.js` file to the file code snippet.

```js
import React from 'react';

function App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;
```

This modification is going to lead to the following change in a web browser window.

![ss3](https://i.imgur.com/fk5pNaU.png)

## Create Firebase project-based components

The basic directory structure is all setup, now let's create the Firebase project-related component folders. Each component folder inside `src/components/` is going to have an `index.js` file that is going to contain the code snippet related to that particular component.

For example, in a Firebase + React app, the sign in, sign out and sign up component is going to be three different components to handle user authentication. Thus, all are going to have separate folders. To create a component folder you can use the command-line interface or the editor or the IDE file explorer.

```shell
cd components/

mkdir SignIn SignOut SignUp
```

![ss4](https://i.imgur.com/Fh4Ha83.png)

The `./src/Pages` directory is optional. I like to separate presentation page components such as `Home` or `Landing` in a different folder but that depends on the project itself.

![ss5](https://i.imgur.com/NOdfdO3.png)

The initial components directory is done. In the next section, let us get the API keys from the Firebase project.

## Generate Firebase API keys

<blockquote display="info">
  Before you generate API keys for Firebase configuration in a React app, please
  make sure you have either set up a new Firebase app or have access to a
  Firebase app using its console.
</blockquote>

If you are new to Firebase apps, please refer to the post here that explains 👉 [how to create a new Firebase project?](https://amanhimself.dev/new-firebase-project/)

Once you have created or opened a Firebase project, from the dashboard screen, click on the _settings_ icon ⚙️ from the side menu.

![ss12](https://i.imgur.com/zkv9SNA.png)

The _Settings_ page opens as shown below.

![ss13](https://i.imgur.com/ZTgOnQk.png)

To create a new app, go to the section that says `Your apps` and click on the third icon or the Web icon. The first two icons shown are for creating keys for native platforms such as iOS and Android.

![ss16](https://i.imgur.com/FGaubt7.png)

Next, there is going to be a prompt about adding the name of the web app. Enter a name.

![ss14](https://i.imgur.com/m2mhbm6.png)

Then the API keys required by the web app are generated as shown below. The blacked-out part is the actual key values and I recommend not sharing with anyone.

![ss15](https://i.imgur.com/NGYOauf.png)

Make sure you save the `firebaseConfig` object. It is the object the contains all the API keys required to use various Firebase services such as authentication, database and so on.

Once you copied the `firebaseConfig` object, you press the button that says `Continue to console`. You are going to be taken back to the `Settings` page.

## Environment variables in a React app

Create a new file inside the React project called `.env`. Make sure to add this file to `.gitignore` and do not commit it to the [GitHub](https://github.com) repo or any other public repository on a version control platform.

This file is going to save all the Firebase API keys as shown below. All the `xxxx`'s represent the keys generated in the Firebase console. Replace them with your own keys.

```shell
DEV_API_KEY=xxxx

DEV_AUTH_DOMAIN=xxxx

DEV_DATABASE_URL=xxxx

DEV_PROJECT_ID=xxxx

DEV_STORAGE_BUCKET=xxxx

DEV_MESSAGING_SENDER_ID=xxxx

DEV_APP_ID=xxxx

DEV_MEASUREMENT_ID=xxxx
```

<blockquote display="info">
  You do not have to name each key with the prefix `DEV_`. You can either use
  their default name such as `API_KEY` or follow your own convention. I like to
  follow `DEV_` and `PROD_` prefixes to separate dev mode and production mode
  Firebase projects.
</blockquote>

## Connect Firebase with a React app

React app needs Firebase SDK installed as an npm dependency. Open terminal window, execute the following command to install the dependency.

```shell
yarn add firebase
```

For Firebase SDK to initialize with the React app and use the Firebase services further in the app, it needs to consume the API keys generated in the previous section as a configuration object. This object is a plain JavaScript object with key and value
pairs.

Create a new file `src/Firebase/firebase.js` import the `firebase` library and create a `firebaseConfig` object with appropriate keys and their values saved in `.env` file.

```js
// firebase.js

import * as firebase from 'firebase/app';

const firebaseConfig = {
  apiKey: process.env.DEV_API_KEY,
  authDomain: process.env.DEV_AUTH_DOMAIN,
  databaseURL: process.env.DEV_DATABASE_URL,
  projectId: process.env.DEV_PROJECT_ID,
  storageBucket: process.env.DEV_STORAGE_BUCKET,
  messagingSenderId: process.env.DEV_MESSAGING_SENDER_ID,
  appId: process.env.DEV_APP_ID,
  measurementId: process.env.DEV_MEASUREMENT_ID
};
```

The `firebase/app` import statement is always required when you add the Firebase SDK to a new Web app or React project. It should also be the import statement line in this file.

The current format of `firebaseConfig` object shows that all the Firebase services from its console are enabled.

<blockquote display="default">
  Side-note: To use a different set of API keys or Firebase projects such as for
  development and production, you can create two `config` objects here. For dev
  mode, create `devConfig` and for production, create `prodConfig`.
</blockquote>

```js
const prodConfig = {
  apiKey: process.env.PROD_API_KEY,
  authDomain: process.env.PROD_AUTH_DOMAIN,
  databaseURL: process.env.PROD_DATABASE_URL,
  projectId: process.env.PROD_PROJECT_ID,
  storageBucket: process.env.PROD_STORAGE_BUCKET,
  messagingSenderId: process.env.PROD_MESSAGING_SENDER_ID,
  appId: process.env.PROD_APP_ID,
  measurementId: process.env.PROD_MEASUREMENT_ID
};

const devConfig = {
  apiKey: process.env.DEV_API_KEY,
  authDomain: process.env.DEV_AUTH_DOMAIN,
  databaseURL: process.env.DEV_DATABASE_URL,
  projectId: process.env.DEV_PROJECT_ID,
  storageBucket: process.env.DEV_STORAGE_BUCKET,
  messagingSenderId: process.env.DEV_MESSAGING_SENDER_ID,
  appId: process.env.DEV_APP_ID,
  measurementId: process.env.DEV_MEASUREMENT_ID
};
```

Then using JavaScript conditional operator, you can condition between the two.

```js
const config = process.env.NODE_ENV === 'production' ? prodConfig : devConfig;
```

This way, you will prevent the mixing of data and other information between development mode app and production or deployed app.

## Initializing the Firebase SDK

Initializing the Firebase SDK with the current React app is the first step. To do this, you have to use a method called `initializeApp()` and pass the `firebaseConfig` as the only argument to this method after defining the config object.

```js
// firebase.js

firebase.initializeApp(firebaseConfig);
```

Lastly, to test that the Firebase SDK is working with the React app, let us export the `firebase` instance from `Firebase/firebase.js` file.

```js
export default firebase;
```

Open `App.js` file, import the `firebase` instance, and using `useEffect` hook let us try to see if it's initialized or not.

```js
import React, { useEffect } from 'react';

// TODO: REMOVE THIS IMPORT STATEMENT BELOW BEFORE PROCEEDING

import firebase from './Firebase/firebase';

function App() {
  // TODO: REMOVE THIS BEFORE PROCEEDING

  useEffect(() => {
    console.log(firebase);
  }, []);

  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;
```

To see the output of the console statement from the above code snippet, open Developer Tools -> Console tab in the web browser. On the initial render of `App` component or the React app, the `useEffect` hook is going to trigger.

![ss17](https://i.imgur.com/Nl4Mov8.png)

The object returned from Firebase clearly states that there are no errors with the current Firebase config in a React app.

It is important to notice that Firebase should only be initialized once in the React app. This pattern is called [singleton](https://en.wikipedia.org/wiki/Singleton_pattern). This initialization should be the top level component in the React components tree.

## Conclusion

Here is a summary of what has been done in this tutorial so far.

- Create a React app using `create-react-app`
- Create an opinionated directory structure inside React app to manage different components
- Generate Firebase API keys for configuration
- Used environment variables inside a React app to manage keys
- Install `firebase` SDK npm package
- Connect Firebase SDK to React app
- Initialize the Firebase SDK
- Why initialize a Firebase instance only once per React app?

👉 **Further reading:**

- [What is `firebase.app()` and why it is read-only?](https://firebase.google.com/docs/reference/js/firebase.app.App)
- `firebase` SDK [npm package](https://www.npmjs.com/package/firebase)
- [How to create a new Firebase project?](https://amanhimself.dev/blog/new-firebase-project/)
- [Singleton Pattern](https://en.wikipedia.org/wiki/Singleton_pattern)
- [How to add custom environment variables with `create-react-app`](https://create-react-app.dev/docs/adding-custom-environment-variables)?


How to setup a React App with a Firebase project

---
title: 'How to integrate Firebase and Firestore cloud database with a React application'
date: '2019-06-20'
slug: 'how-to-integrate-firebase-firestore-react-and-crowdbotics-platform'
thumbnail: '/thumbnails/firebase.png'
tag: 'firebase'
canonicalUrl: 'https://blog.crowdbotics.com//how-to-integrate-firebase-firestore-react-and-crowdbotics-platform/'
---

Firebase is a Backend as a Service (BaaS) that gives an advantage to web developers who use ReactJS for developing web applications. It is a platform that got acquired by Google and has a healthy and active community. Most users in this community are web and mobile developers. It includes services like mobile analytics, push notification, crash reporting and out of the box provides email as well as social authentication. As a web developer, by using Firebase you can start building an MVP (minimum viable product) by keeping the costs low and utilizing your time and effort in building the application quite faster than adopting a traditional approach by building your own custom backend solution.

**In this tutorial, we will be learning how to get started by integrating the Firebase and Firestore cloud database with a React application.** We will also create a bare minimum demo application from scratch with the help of Firebase & React Native to see how they work together.

**TLDR;**

- Requirements
- Getting started: New Firebase Project
- Connecting Firebase with React App
- Creating a Firestore Database

## Requirements

In order to gain everything by reading this tutorial, make sure you have:

- a Firebase account (_free tier_)
- NodeJS `v8.x.x` or higher installed along with `npm/yarn`
- `create-react-app` global module to scaffold a React project

## Getting Started: New Firebase Project

To get started you need a Firebase account. To sign-up or log-in for one, visit [console.firebase.com](https://console.firebase.google.com). Once you are logged in, you will be welcomed by a screen below.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss1-2.png' />

Click on the button **Add Project**. This leads to another screen which contains a form to be fulfilled in order to create a new Firebase project.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss2-1.png' />

Fill the name of the project, check both the boxes for now and click on the button `Create project`. This will take some moments. Once the Firebase project is created, you will be welcomed by the home screen like below.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss3-2.png' />

Take a look at the side menu bar on the left. This is the main navigation in any Firebase project. That's it for now. It is that simple to create a new Firebase project via the official console.

## Create React App

To create a new react app, first, we need to install `create-react-app` by running the below command in a terminal window.

```shell
npm install -g create-react-app

# Check for the current version

create-react-app --version

# Output: 3.0.0
```

The second execution is to check the semantic version of `create-react-app` module. Make sure you are on the same version (_which is latest at the time of writing this post_) or higher than this.

To generate a new project run `create-react-app react-firebase-demo`. This will take some time to generate a new project and install dependencies that required to kick-start the default React app. Do note that, React by default uses `yarn` instead of `npm` as the JavaScript package manager to install dependencies.

## Connecting Firebase with React App

To connect Firebase with a React app, you need API key and store in the client side app somewhere (_probably as environmental variables when deploying the app_). Click on the settings ⚙️ in the sidebar menu and go to **Project settings**. There you will see under **Your apps** section all the platforms available such as iOS, and web. Click on the **Web** as shown below.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss4-1.png' />

Next, copy only the `config` variable in a new file called `firebase.js` inside the `src` directory of the React project. Initially, the file might look like below snippet.

```js
//firebase.js
const config = {
  apiKey: 'XXXX',
  authDomain: 'XXXX',
  databaseURL: 'XXXX',
  projectId: 'XXXX',
  storageBucket: 'XXXX',
  messagingSenderId: 'XXXX'
};

firebase.initializeApp(config);
```

Where all the `XXXX`s are the key values. In order to continue, React app needs FirebaseSDK installed as an npm dependency. Open terminal window, make sure you are traversed inside the project directory and execute the following command.

```shell
yarn add firebase
```

Once the dependency is installed go back to `firebase.js` file and import firebase like below and it to the top of the file.

```js
//firebase.js
import firebase from 'firebase/app';

// ...

export default firebase;
```

You could have imported firebase from just `firebase`. The reason in the above file we are using `firebase/app` is that `/app` only adds the core of the firebase services. Right now, to integrate Firebase with our React app, we only need `initializeApp()` method to pass all the keys required to configure from the firebase.

While importing, if you use just `firebase`, it will include the whole bunch of services like auth, database, storage, functions, messaging, firestore, and so on. Most of them, we might not even need this demo application. This also increases the size of your bundle when deploying the application. Lastly, do not forget to export the instance configured firebase object that you will be using in the React app later.

## Creating a Firestore Database

There are two types of cloud-based database services provided by Firebase. One is called Cloud Firestore and the other one is a Real-time Database. This does not mean that Cloud Firestore cannot be used for real-time applications. Also, note that both of them are NoSQL databases.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss5-2.png' />

Real-time database stores data as one large JSON tree. Complex and scalable data is hard to organize in it. Firestore follows proper NoSQL terminology when it comes to storing data. It stores data in documents and each document can have sub-collections thus making it suitable for scalable and complex data scenarios.

Also, Realtime database only offers offline support for the mobile development using iOS and Android whereas Firestore supports both mobile platforms as well as web clients too. To read more about their differences you can visit the official documentation [here](https://firebase.google.com/docs/database/rtdb-vs-firestore).

In the Database section, choose the cloud Firestore and go to the second tab called **Rules**. If you are enabling Firestore for the first time, chances are you need to set the database security rules to test mode. This is where the firebase SDK will allow anyone (_one who has access to the config keys_) to read and write to the database. That said, this section should look like below.

```js
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}
```

Open `firebase.js` and import firestore instance.

```js
// firebase.js
// ... after other imports
import 'firebase/firestore';

// ... before export default statement
export const firestore = firebase.firestore();
```

Also, exporting the firestore instance will let you use it to query the database.

Now, go back to the Firebase console and go to the **Data** tab under Firestore.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss6.png' />

You will notice that there is currently no data inside the database. The **Add Collection** button represents the column that will contain the name of each collection that you might have in the database. Let us add some data using Firebase console interface such that we can query and display it in the next section. Click on the button **Add Collection** and enter the name of the collection as shown below.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss7-1.png' />

Click **Next** and enter two fields. One for the title of the book and the other one for the author's name. By default, the ID for each document will be auto-generated if the above option `Auto-id` is selected or remained untouched. Note that both of these fields represent one document as a whole.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss8.png' />

Notice that, we have not defined value for both the fields. Also, both the fields are of data type `string`. Of course, there are [other data types available and supported by Firestore](https://firebase.google.com/docs/firestore/manage-data/data-types). At last, click on the **Save** button to save the first, though the empty, entry in the Firestore database.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss9.png' />

_Did you notice how the ID for the document is generated on its own in the above image?_

## Creating the UI form

In this section, let us wire the React app to have a simple form that can be further used to send data and store it in the cloud. Currently, the React app is bare-minimum or default that is generated by the scaffolding tool `create-react-app`. To run it in its current state, from the terminal window execute `npm start`. This will start the development server, and open a new browser window in your default browser at the URL: `http://localhost:3000/`. If you do not have any errors (_which you won't_) you will see the following screen.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss10-1.png' />

The code that is being rendered in the above screen comes from the only component we have so far in our React app, inside `App.js` file. Open this file and then define the following state. Right now, the `App` component is a functional component.

```js
// App.js
class App extends React.Component {
  state = {
    title: '',
    author: ''
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}
```

Notice that, for the `App` component to have stated, we converted it to a class component. Next, inside the render function, add the following form that contains two input fields.

```js
// App.js
render() {
        const { title, author } = this.state

        return (
            <div className='App'>
                <form onSubmit={this.addBook}>
                    <input
                        type='text'
                        placeholder='Title of the Book?'
                        name='title'
                        onChange={this.updateInput}
                        value={title}
          />
          <br />
                    <input
                        type='text'
                        placeholder='Author of the Book?'
                        name='author'
                        onChange={this.updateInput}
                        value={author}
          />
          <br />
                    <button type='submit'>Submit</button>
                </form>
            </div>
        )
  }
```

This creates a not so awesome looking form but does serve the purpose of learning about Firestore.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss11-1.png' />

Both the input fields have a `value` attribute to specify which field is a target from the state object. Also, both the fields call a custom method `updateInput` to update the component's the state corresponding to the book's data from the input field. Let us right the business logic behind it before the render function in the above snippet.

```js
// App.js
updateInput = event => {
  this.setState({ [event.target.name]: event.target.value });
};
```

## Add data to the Firestore

In this section, you are going to write the logic behind how to add data from the React form to the Firestore. In the previous section, did you notice that the form has submitted button and an `onSubmit` event that leads to the function `addBook`. Define this function just before the `render()` method as below.

```js
// import this at the top of your file
import { firestore } from './firebase';

// App.js
addBook = event => {
  event.preventDefault();

  firestore.collection('books').add({
    title: this.state.title,
    author: this.state.author
  });

  this.setState({ title: '', author: '' });
};
```

In the above snippet, let us start by import an instance of the firestore from `firebase.js` that we previously defined. The `addBook` function takes an event as an argument. The first line inside the function stops the web page from refreshing after submitting the form. Refreshing a web page after clicking the submit button is the default behavior and we need to avoid.

Next, using the `firestore.collection("books")` points to the correct database collection where the data will be added on submitting the form. The collection name here is `books`. The `.add()` method submits the data from the updated to the firestore. Try adding one. Make sure `npm start` is running.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss12.png' />

After adding filling up the form as above, click on the submit button. After you add a book's title and its author, both the input field is set to the empty string, which is the default state and is a necessary step to add more data. Now, go back to the firebase console, to the books' collection and you will notice, as shown below, a new object with a random but unique ID and corresponding data in it.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss13.png' />

## Conclusion

You have now successfully integrated and added data to the Firebase store. The method discussed in this tutorial to access Firestore is not the only way, but yet a simple one. For more information or to dive deep, take a look at the Firestore documentation **[here](https://cloud.google.com/firestore/docs/)**.

[Originally published at Crowdbotics](https://crowdbotics.ghost.io/how-to-integrate-firebase-firestore-react-and-crowdbotics-platform/)


🔥 3 Posts filtered by tag "firebase"

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

How to setup a React App with a Firebase project

How to integrate Firebase and Firestore cloud database with a React application