How to build a React Native App using Firebase. (Part 4)(Facebook Login)

Updated Oct 25: Switched from using “Callbacks” to “Promises — ( all files updated)

Updated May 11: Added Step 5 (CRUD).

• *UPDATED FEB 2nd 2018**

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 Part 3, we created our app scenes and injected the Redux store into the app. In this tutorial, we will add Facebook login.

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

Step 8: Backend (Actions)

Actions
For our Facebook login, we will add an additional function to the actions.js file in the auth module directory.

The signInWithFacebook function takes in the Facebook token that is returned when the user grants access to the app. Using the token, we create a credential object that is passed to Firebase signInWithCredential function in order to log in the user. If successful, the user object is returned.

Add the code below to the actions.js file.

Step 9: Frontend (Scenes)

Constants
Before we update the scene, we will update the constants.js file in the auth module.

auth/constants.js

Welcome
In our Welcome scene, we will add an additional button for Facebook Login, we will be using the Social Icon button component from the React Native Elements package and 3 additional functions.

In the auth module, update the Welcome.js file in the scenes folder with the code below.

Using Expo’s Facebook logInWithReadPermissionsAsync function, our onSignInWithFacebook prompts the user to log into Facebook and grant the app permission to access their Facebook data. If login is successful, we call the signInWithFacebook function in our actions file.

If the function returns successfully, the app either navigates the user to the CompleteProfile scene or the Main scene.

If the function returns an error, our onError function is in charge of displaying an error message.

In Part 5, we will add the CRUD functionalities.

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 1) (Setup)
4. How to build a React Native App using Firebase. (Part 2) (Backend)
5. How to build a React Native App using Firebase. (Part 3) (Frontend)
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