How to build a React Native App using Firebase. (Part 1)

Moses Esan
Dec 15, 2017 · 4 min read

Updated May 11: Added Step 5 (CRUD).

Please note that this tutorial assumes you have some JavaScript or React Native experience, this tutorial does not explain each line of the code instead it presents you with the code and gives you an overview of what the code does and points out the important parts of the code. I have made the code as simple as possible, if you have any questions, please do not hesitate to leave a comment.

In this tutorial, we will build a React Native app that uses Firebase Authentication and Realtime Database services, to find out more about Firebase, visit this link.

By the end of Part 4, this is what we would have built. [Facebook login not shown in GIF].

Demo

Now, that we have gotten that out of the way, LET THE CODING BEGIN!

Step 0: Register our app with Firebase and Facebook

Facebook
Follow the instructions at this link to register your app and set it up for Facebook integration. Follow the instructions for The Expo client app.

Firebase
To create a new firebase project, go to your Firebase console, click “Add Project”, type in your project’s name and select your region.

Enable Facebook Login: (taken from https://firebase.google.com/docs/auth/ios/facebook-login)

  1. In the Firebase console, open the Authentication section.
  2. On the Sign in method tab, enable the Facebook sign-in method and specify the App ID and App Secret you got from Facebook.
  3. Then, make sure your OAuth redirect URI (e.g. ) is listed as one of your OAuth redirect URIs in your Facebook app's settings page on the Facebook for Developers site in the Product Settings > Facebook Login config.
  4. On the your Facebook app’s settings page, click ‘Add Product’, select the ‘Facebook Login’ product and click ‘Set Up’.
  5. On the left side, click ‘Settings’ under Facebook Login and add your OAuth redirect URI to your app’s Valid OAuth redirect URIs

On the left side, select “Project Overview” and click “Add firebase to your web app” link on the home screen and take note of the config object, this will be later used in our app config file.

Step 1: Getting Started

If this is your first time creating a React Native app, make sure you have Node, npm or yarn installed. For this project, I will be using yarn and create-react-native-app which has been dubbed as the easiest way to start building a new React Native app.

There are many advantages to using CRNA, one being that it allows you to start a project without installing or configuring any tools to build native code — no Xcode or Android Studio installation required and you can install the Expo app on your iOS or Android phone for testing.

Before we begin, we have to globally install the create-react-native-app command line utility using npm or yarn.

Open up your terminal and run one of the commands below depending on whether you are using npm or yarn.

$ npm install -g create-react-native-app
# or
$ yarn global add create-react-native-app

Now that CRNA is installed, we can create a new project by running the command below:

$ create-react-native-app firebase-auth-app
$ cd firebase-auth-app/

Step 2: Install Dependencies

We will be using the following packages:

and of course

Install Dependencies

Before we continue, run the command below to test the app, This will start a development server for you, and print a QR code in your terminal. If you are using the Expo app, you can scan the QR code.

$ yarn start

In Part 2, we will create the app’s directory, redux actions, reducers and api.

Thats all folks!

Related Tutorials

  1. Tutorial 1: React Native Redux Boilerplate
  2. Tutorial 2: React Native Redux with CRUD operations
  3. How to build a React Native App using Firebase. (Part 2) (Backend)
  4. How to build a React Native App using Firebase. (Part 3) (Frontend)
  5. How to build a React Native App using Firebase. (Part 4)(Facebook Login)
  6. How to build a React Native App using Firebase. (Part 5)(CRUD)

Other Tutorials

  1. Tutorial 4: How to Build a Laravel 5.4 JWT-Powered Mobile App Authentication API
  2. Tutorial 5: How to Build a Laravel 5.4 JWT Authentication API with E-Mail Verification
  3. Tutorial 6 & 7: How to Build a Laravel 5.4 Administration Module with Role-based permissions using Entrust package

Mesan Digital

Sharing tutorials on the development of React Native and PHP projects.

Moses Esan

Written by

Full Stack Developer

Mesan Digital

Sharing tutorials on the development of React Native and PHP projects.