Build React Native Fitness App #10: [iOS] Firebase Google Login
Tags: formloginreactnat, reactnativegoogle, loginreactnative, loginpagereactnat
Published: 2020-02-05 15:58:22

---
title: Build React Native Fitness App #10: [iOS] Firebase Google Login
published: true
date: 2020-02-05 08:52:51 UTC
tags: form-login-react-nat,react-native-google-,login-react-native,login-page-react-nat
canonical_url: https://kriss.io/react-native-firebase-google-login/
cover_image: https://cdn-images-1.medium.com/max/1024/0*0ELqiWPcc_OX_Pm8.png
series:  Build React native Fitness app
---


This tutorial is tenth 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/)

this chapter we gonna implement Google login for iOS first I will try summarize what thing we will do in this chapter first we install react native google login package second we run cacao pod then we go to Xcode for config URL type lasting we activate Google login on Firebase finally with add sample code to our app and done

#### Install React native Google Login package

first install the package with yarn or npm

```
yarn add @react-native-community/google-signin
```

then install Cacao pod package

```
cd ios && pod install && cd ..
```

then close packager and re-run terminal again

#### Add URL Type in Xcode

for Reserved client id we just

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

and grab REVERSED\_CLIENT\_ID add to URL Type

![](https://cdn-images-1.medium.com/max/1024/0*4SNZvEkFhEEgP39s.png)

#### Activate Google Login on Firebase

next, we need to activate google login on Firebase

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

Firebase will take care of all everything

#### Adding sample code on our app

now we can make authentication with simple code in LoginScreen.js

```
async googleLogin() {
    try {
      // add any configuration settings here:
      await GoogleSignin.configure();

      const data = await GoogleSignin.signIn();

      // create a new firebase credential with the token
      const credential = firebase.auth.GoogleAuthProvider.credential(
        data.idToken,
        data.accessToken,
      );
      // login with credential
      const firebaseUserCredential = await firebase
        .auth()
        .signInWithCredential(credential);

      console.log(firebaseUserCredential.user.toJSON());
    } catch (e) {
      console.error(e);
    }
  }
```

we activate google login then grab idToken and accessToken then assign to Firebase and login with credential that got from Firebase

lastly, wrap google icon with TouchableOpacity help activate authentication

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

and let’s try login

![](https://cdn-images-1.medium.com/max/300/0*eCzmETINEntgNcri.gif)

and user data will show up below

![](https://cdn-images-1.medium.com/max/1024/0*gibmuaXe-ponVINE.png)

#### Conclusion

this chapter we learn how to config google login on Xcode and React Native also on Firebase too is quite easy for next chapter we will continued on Android part

_Originally published at _[_Kriss_](https://kriss.io/react-native-firebase-google-login/)_._

* * *