Intro to Firebase

CodeSandbox link

You can find the full code for this tutorial at https://codesandbox.io/s/intro-to-firebase-gtnjo.

Create a Firebase project

Head over to the Firebase Console and click on Create a project.

Follow the three easy steps to create your first Firebase project:

1. Give a name to your project.
2. Enable Google Analytics if you wish to (you can always enable it later). For now, I'll disable it.
3. Wait for your project to be created and click on Continue.

Add you app

After your project has been created, you'll land on your project's Firebase console. There'll be a banner like this one, inviting you to add Firebase to your app. Click on the Web option - the button with the brackets.

Give your app a nickname. If you wish to host your app with Firebase Hosting, check the box. However, I won't host it on Firebase, so I won't check it. Then, click on Register app.

At step 2, there'll be a script with all your config variables. We will get back to it later. Click on Continue to console.

Add the Firebase SDK to your project

Next, we'll head over to React project. For the purpose of this tutorial, I'll be using Code Sandbox. Creating a new project and adding a dependency is pretty simple. Under the Dependencies tab on the right, search for Firebase and click the first result.

If your React app is on your local computer, you can install the Firebase SDK through the terminal with the following command:

npm i --save firebase

Set up the Firebase configuration

Next, we'll need to set up the configuration in our React project. In other words, we need to add the private keys from Firebase into our React project. The private keys are like an address to your Firebase project and will let React and Firebase communicate with each other to save the data at the right place.

Let's create a new file called firebase.js, where all of our Firebase configuration will be.

First, let's import Firebase at the top.

// firebase.js

import firebase from 'firebase'

Next, we'll need to copy the configuration keys from our Firebase project. At the right, click on the gear icon next the Project Overview, then on Project settings.

Scroll down the Your apps section. There, you'll see your Firebase SDK snippet. Copy everything from Your web app's Firebase configuration to firebase.initializeApp(firebaseConfig).

Head back to your React project and paste everything you just copied into the firebase.js file. We'll need to change a few things here.

Firstly, if you're not using Code Sandbox and you commit your project to Github or any similar platform, remember to never hard-code your private keys into your project as it is a big security flaw. We'll need to create a .env file and add all our keys there.

// .env
REACT_APP_FIREBASE_API_KEY=YOUR_API_KEY_HERE
REACT_APP_FIREBASE_AUTHDOMAIN=YOUR_AUTH_DOMAIN_HERE
REACT_APP_FIREBASE_PROJECT_ID=YOUR_PROJECT_HERE
REACT_APP_FIREBASE_STORAGE_BUCKET=YOUR_STORAGE_BUCKET_HERE
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=YOUR_MESSAGING_SENDER_ID_HERE
REACT_APP_FIREBASE_APP_ID=YOUR_FIREBASE_APP_ID

Then, create a .gitignore file and add .env to it. This will tell the terminal to ignore the .env file when you're committing to Github.

// .gitignore

.env

Back to our firebase.js file, we'll change all the hard-coded private keys to the ones we added in the .env file.

var firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTHDOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID
};

Note: In Code Sandbox, you can store your API keys under the Server Tab on the right side. However, to see the Server Menu, you must fork an imported Sandbox.

Next, before initializing the app, we need to make sure that the window isn't undefined first. So replace the firebase.initializeApp(firebaseConfig) line with this code:

let instance

export default function getFirebase() {
    if (typeof window !== "undefined") {
        if (instance) return instance
        instance = firebase.initializeApp(firebaseConfig);
        return instance
    }

    return null
}

In the code snippet above, we are creating a function that will make sure that the window isn't undefined - if it is, it'll return null instead of initializing Firebase for nothing. If there's a window, it'll return the instance of the Firebase app that we initialized.

Use Firebase

To use Firebase in your project, import the getFirebase() function at the top the file.

import getFirebase from "./firebase"

Make sure to check that we get an instance of Firebase before doing any action with Firebase.

let firebase = getFirebase()
if (firebase) {
    // Do something
}

Congratulations! You just set up Firebase in your React application! You can now head over to the Firebase Auth, Firestore and Firebase Storage sections of this handbook to learn how to use a specific Firebase service in your application.