How to Integrate ‘Sign in with Google’ in React Native (Android)

By Rashid •  September 24th, 2019 • 

Most of the mobile users in this world have atleast one google account. Hence, using Google account to authenticate user is always used in many mobile apps. In this blog post, let’s see how to setup ‘sign in with google’ in react native.

The part with the Google Firebase is done and now let’s turn to the react native part.

Firstly, install react native google signin library into your react native project using the following command.

yarn add react-native-google-signin

At the time of writing this blog post, this library doesn’t support auto-linking yet. Hence you have to link it manually using the following command.

react-native link react-native-google-signin

Things are not over yet, follow remaining instructions for installation- android and ios.

Now, let’s see how the coding part works.

First of all, do all the imports required.

import { GoogleSignin, GoogleSigninButton, statusCodes } from 'react-native-google-signin';

GoogleSignin helps you to authentication whereas GoogleSigninButton is a component which shows a beautiful button with ‘signin with google’ text. The statusCodes helps you to identify errors from the response.

GoogleSigninButton is simply a button with few useful props to customize. You can either use the button or you can create a button yourself.

react native sign in with google
<GoogleSigninButton
            style={styles.googleButton}
            size={GoogleSigninButton.Size.Wide}
            color={GoogleSigninButton.Color.Dark}
            onPress={this.signIn}
          />

The signIn function prompts the user to log in with the google account. The status codes help you to identify issues in login. The constant userInfo has the user details such as email and name.

  signIn = async () => {
    try {
      GoogleSignin.configure();
      await GoogleSignin.hasPlayServices();
      const userInfo = await GoogleSignin.signIn();
      this.setState({userInfo}, () => {
        console.log(this.state.userInfo);
      });
      //log in is success!
    } catch (error) {
      console.log(error);
      if (error.code === statusCodes.SIGN_IN_CANCELLED) {
        // user cancelled the login flow
      } else if (error.code === statusCodes.IN_PROGRESS) {
        // operation (f.e. sign in) is in progress already
      } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
        // play services not available or outdated
      } else {
        // some other error happened
      }
    }
  };

You may also need to check whether the user is already logged in or not.

 isSignedIn = async () => {
    const isSignedIn = await GoogleSignin.isSignedIn();
    if (isSignedIn) {
     //the user is already signed in
    } else {
      //the user is not logged in yet
    }
  };

This is how you can add Google authentication to your react native app.

Rashid

Keep Reading