Build React Native Fitness App #13: Expo Facebook login

This tutorial is the thirteenth chapter of the series build fitness tracker this app use for track workouts, diets, or health activities and analyze data and display suggestions. The ultimate goal is to create food and health recommendation using Machine learning. We start with creating an app that the user wants to use and connect to google health and apple heath for gathering everything to create the dataset that applies for train model later. I start with the ultimate goal. Still, we will begin to build a react native app and set up screen navigation with React navigation. inspired by React native template from instamobile

here we continued from the previous chapter that we migrate codebase to Expo our app is not required any advanced feature for now that we can use Expo manage template for a fast workflow but the future if we required feature that out of support we can eject project from manage to bare workflow, for now, Expo team have release set of package that we use on manage workflow to individual package that pain is gone

this chapter we will implement Google and Facebook login by Expo package

Facebook login

change bundle identifier comes from Expo client app

Add host.exp.Exponent as an iOS Bundle ID. then add rRW++LUjmZZ+58EbN5DVhGAnkX4= in Android Key hash

add app id to app.json in an extra key that we create a new one

"extra": {
     "firebase": {
       "apiKey": "xxxxxxxxxxxxxxxx",
       "authDomain": "rock-elevator-xxxxxxxx.firebaseapp.com",
       "databaseURL": "https://rock-elevator-xxxxxxxx.firebaseio.com",
       "projectId": "rock-elevator-xxxxxxxx",
       "storageBucket": "rock-elevator-xxxxxxxx.appspot.com",
     },
     "facebook": {
       "appId": "xxxxxxxx"
     }
   }

now we can come back to LoginScreen.js for finishing login logic

first import firebase and expo facebook package and Expo constant for the handle environment variable

import firebase from "../components/Firebase";
import \* as Facebook from "expo-facebook";
import Constants from "expo-constants";

then we initial getting AppId from app.json

signInWithFacebook = async () => {
  const appId = Constants.manifest.extra.facebook.appId;
  const permissions = ["public\_profile", "email"]; 
  await Facebook.initializeAsync(appId);
  const { type, token } = await Facebook.logInWithReadPermissionsAsync({
    permissions
  });

  if (type == "success") {
    await firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL);
    const credential = firebase.auth.FacebookAuthProvider.credential(token);
    const facebookProfileData = await firebase
      .auth()
      .signInWithCredential(credential); // Sign in with Facebook credential
    console.log(facebookProfileData);
  }
};

then start facebook login after getting access token we add to Firebase

and we will see a result like a screenshot below

Conclusion

this chapter we learn how to use Facebook Login with Expo .so simple and sweet Expo handle all everything help us move quickly for next chapter we will try Google login

Originally published at [_Kriss](https://kriss.io/build-react-native-fitness-app-12-facebook-login/)._

---