Mega Bundle Sale is ON! Get ALL of our React Native codebases at 95% OFF discount 🔥

Get Bundle

There are various popular ways to login into a mobile application. Facebook is a great authentication choice. In fact, we are using it in all of our React Native Templates, at Instamobile. Login with Facebook is an easy and efficient way to make the user comfortable with signing up for your app. In this tutorial, we are integrating Facebook Login React Native leveraging Firebase Auth. We are using Expo, to reduce development friction.

So we are going to make Facebook Login integration an easier task for you with Firebase Auth. In this tutorial, I’m going to show you how Expo and Firebase make it easy. Let’s get started…

Kickstart Facebook Login React Native Integration with Expo

If you don’t want to touch Android studio or Xcode, then Expo is the best choice, since it makes development extremely easy for beginners.

Open up your terminal and type in:

expo init fb-react-native-firebase

Once the installation is done, you should end up in this state:

Open the project in Visual Studio Code, and then open a terminal directly inside VS Code:

Go to the project folder using cd Project-Name. Run yarn start . Expo will open a new window in the browser as shown below.

Now, you can view all the commands to run Android emulators and iOS simulators as well as the history and console log output. You can run a virtual device from here, but you can also use the Expo app on your phone by scanning the QR Code to run the app within a real device.

Building the UI Facebook Login Screen

To develop our interface quickly, we are going to use Native Base for development. We are ready to import the necessary Native Base component inside our project in App.js:

import { Container, Form, Button} from "native-base";

After importing, we will construct a user interface for the frontend form:

render() {
  return (
      <Container style={styles.container} >
        <Form>
          <Button full rounded>
            <Text>SignIn</Text>
          </Button>
        </Form>
      </Container>
    );
  }
}

Let’s apply some basic flex layout to center and style the button:

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "#fff",
       justifyContent: "center"
   }
});

Now you can see the result on the following screen:

In the next step, we are going to create a Facebook app in the Developers’ Portal.

Creating a New Facebook App

Go to the Facebook Developer website and create a new app.

Select Basic Settings in the dashboard.

And click Add Platform. You will see a pop up on the screen as shown below:

Select iOS , which will land you to the following screen:

We need to add the Bundle ID. Go to Expo Facebook Docs  and grab bundle ID.

Paste it  into the Facebook Developers Portal:

Grab the App ID and App Secret for your newly created Facebook app.

Now Facebook app is fully configured and ready to go.

Firebase Auth Setup for Facebook Login

Go to Firebase Console and create a new app.

Add Facebook App ID and Secret Key to the FB authentication method in firebase console as shown below:

That’s all Firebase needs. We are finally ready to write the React Native code.

Integrating Firebase into a React Native App

To add Firebase, we need to run the command npm i firebase –save and add the Firebase import into App.js as shown below:

import * as firebase from "firebase";

Next step is to create a firebase project. Go to Firebase Console, create a project, find the API key and configuration as shown in the image below:

We grab all that and paste it into our project as shown below:

Now let’s implement the code for Facebook Login React Native integration.

Facebook Login React Native with Expo

On a high-level, the step by step logic behind the logging in with Facebook and Expo looks like this:

1. User triggers the log in
2. Expo opens up the Facebook App or a pop-up Web View
3. User authorizes your App
4. Redirect and return Facebook credentials to your App
5. Sign into Firebase with Facebook credentials
6. Done! Your user is now logged in with Facebook.

Now, let’s implement code inside the app. First import Facebook from Expo in our app:

import { Facebook } from "expo";

We create async function because we interact with another service.

async Facebooklogin() {

Secondly, we’re adding the interaction between Facebook and the Expo app. Don’t be too curious why we don’t call firebase function first, we will discuss it later. So pass in App_ID and permissions to Expo Facebook and expect the response status and facebook token:

const { type, token } = await
Facebook.logInWithReadPermissionsAsync(
       "342823069910303",{
              permission: "public_profile"
    } 
);

If the login succeeds, we log into Firebase with the Facebook credentials:

if (type == "success") {
  const credential =   
    firebase
      .auth
      .FacebookAuthProvider
      .credential(token);
}

Let’s print the error. if any issues come up with the network request:.

firebase
   .auth().signInWithCredential(credential).catch(error => {
       console.log(error);
   });
}

After successfully logging into Firebase Auth with Facebook, we can collect the user data.

Fetching the Facebook User Data from Firebase

We can get the user data once they log in by using the code below:

componentDidMount() {
  firebase.auth().onAuthStateChanged(user => {
    if (user != null) {
        console.log(user);
    }
  });
}

Run the app in your simulator and play with it. You should be getting this exact functionality:

Awesome, it worked perfectly. Now, go to firebase console and check whether you can see some data from Facebook:

Congrats! We have just integrated Facebook Login React Native using Firebase Authentication and Expo.

Bottom Line

We have made everything work properly. We successfully implemented Login with Facebook in React Native in the easiest way, by leveraging Expo API. I hope you enjoyed this tutorial and it will help you make your own React Native app more quickly. If you have any questions, leave them in the comment section. Please don’t forget to share this React Native tutorial with other developers. Happy Coding!