Build React Native Fitness App #8 : [iOS] Firebase Facebook Login
Tags: reactnativefirebas, firebase
Published: 2020-02-03 13:47:15

---
title: Build React Native Fitness App #8 : [iOS] Firebase Facebook Login
published: true
date: 2020-02-03 05:37:00 UTC
tags: react-native-firebas,firebase
canonical_url: https://kriss.io/build-react-native-fitness-app-8-ios-firebase-facebook-login/
cover_image: https://cdn-images-1.medium.com/max/1024/0*Zi-H6NonKNlpenCh.png
series:  Build React native Fitness app
---


This tutorial is eight chapter of series build fitness tracker this app use for track workouts, diets, or health activities and analyze data and display suggestion the ultimate goal is to create food and health recommendation using Machine learning we start with creating app that user wants to use and connect to google health and apple heath for gathering everything to create dataset that uses for train model later I start with ultimate goal. Still, we will start to create a react native app and set up screen navigation with React navigation. inspired by [React native template](http://instamobile.io/) from instamobile

your can view the [previous chapter here](https://kriss.io/category/react-native-fitness/)

in this chapter we want to add more way that user can authenticate to the app first we implement Facebook login in this part we deal with iOS then will deal with Android in the next episode

first, we need to install react-native-fbsdk package

```
yarn add react-native-fbsdk
```

next, we need to follow the official document install cacao pod package

```
cd ios ; pod install
```

now we finish on React native part

#### Configure on Xcode

next, open our project in Xcode add code below to info.plist

```
<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>fb6598530980\*\*\*\*</string>
  </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>65985309808\*\*\*\*</string>
<key>FacebookDisplayName</key>
<string>FitnessMaster</string>
```

result like here

![](https://cdn-images-1.medium.com/max/809/0*ZvwaRaK3jssh3cQg.png)

#### React native part

next, we come back to react-native part in LoginScreen.js import react-native-fbsdk package

```
import {LoginManager, AccessToken} from 'react-native-fbsdk';
```

then add function for handle Authentication data

```
async FacebookLogin() {
    const result = await LoginManager.logInWithPermissions([
      'public\_profile',
      'email',
    ]);

    if (result.isCancelled) {
      throw new Error('User cancelled the login process');
    }
    const data = await AccessToken.getCurrentAccessToken();

    if (!data) {
      throw new Error('Something went wrong obtaining access token');
    }

    const credential = firebase.auth.FacebookAuthProvider.credential(
      data.accessToken,
    );

    await firebase.auth().signInWithCredential(credential);
    alert('Registration success');
    setTimeout(() => {
      navigation.navigate('HomeScreen');
    }, 2000);
  }
```

Here, we’ve implemented the FacebookLogin() function as an asynchronous function. First, we activate the Facebook login. Then, we’ll get an access token in return, which we save to Firebase. And when Firebase returns the login credentials, we manually authenticate to Firebase. And after ensuring that everything is a success, we navigate to the Home screen.

Next, we need to add the FacebookLogin() function to the onPress event of the SocialIcon component, which represents the Facebook login button:

```
<TouchableOpacity onPress={() => this.FacebookLogin()}>
                      <SocialIcon type="facebook" light />
                    </TouchableOpacity>
```

#### Activate the Firebase login method

lasting we need to activate Facebook authentication on Firebase and then App ID and App secret

![](https://cdn-images-1.medium.com/max/1021/0*buBvS57YIZ9i9vFU.png)

now we can log in to our app

#### Conclusion

in this chapter, we learn how to add Facebook login to iOS part in the next chapter we learn adding Facebook login again but on android part

_Originally published at _[_Kriss_](https://kriss.io/build-react-native-fitness-app-8-ios-firebase-facebook-login/)_._

* * *