Social Login in React Native App

Posted By : Ashwini Kumar Gupta | 17-Dec-2020

In my previous blog, I have described the Social login and its benefit on our online business. In that blog, I have explained what is Social Media? What is Social Login and its various benefits? For detailed information,  please take a look here

 

How Does Social Login Work?

 

Step 1- The user selects the desired social media network.

 

Step 2- The system sends a login request to the selected social network.

 

Step 3- The user is asked to enter their login details (if they are not already logged in). Then, a pop-up asks you to inform the user that you would be collecting some information. Only after approval by the user, he is registered through his social media account.

 

Now I am going to show you how to integrate the google sign-in in our React Native application.

 

Google+ sign-in allows users to sign-in by your React Native app with their existing Google account and get their profile information like nameemailprofile pic, and other details.

 

G+ integration is really advantageous as it provides users a fast and convenient way to register on your app, thus encouraging them to use it.

 

Features-

  • Provides three methods of authentication viz. standard, with server-side validation or with offline access (aka server-side access)
  • Has the consistency of Promise-based API between Android and iOS
  • Typings for TypeScript and Flow
  • Native sign in buttons

 

The react-native-google-signin is like an envelope around the official Google login library. It provides access to the users accessToken and idToken which are required to create a Firebase credential. 

 

Project setup and initialization

For RN >= 0.60 please use version 3 installed from @react-native-community/google-signin

npm install @react-native-community/google-signin

For RN <= 0.59 use version 2 installed from react-native-google-signin

npm install react-native-google-signin

 

Steps for implementation:-

We can achieve Sign in by following two type

1. By Own Sign In Button

Step 1: Configure the library.

  • The configure the method only needs to be called once during your app’s lifecycle.
  • Configuration settings can be obtained from here;

    import { GoogleSignin, statusCodes } from '@react-native-community/google-signin';

    async function bootstrap() {

      await GoogleSignin.configure();

    }

Step 2: Log in with Google  

import { GoogleSignin, statusCodes } from '@react-native-community/google-signin';

.........

........

async googleLogin() {

  try {

     await GoogleSignin.signIn().then((data)=>{      

         -----------------------------

         ----------------------------

     });

  } catch (e) {

   console.log(e);

   showErrorToast(StringConstant.SOMETHING_WENT_WRONG);

  }

}

Step 3: Parse response of GoogleSignin.signIn() to obtain current Google user profile information viz. nameemailprofile pic, and other details.

Step 4: Call your domain Social Login API callSocialLoginAPI and validate Google User.

async googleLogin() {

  try {

     await GoogleSignin.signIn().then((data)=>{    

      this.callSocialLoginAPI(data.user, userId);

        GoogleSignin.signOut();

     });

  } catch (e) {

   console.log(e);

   showErrorToast(StringConstant.SOMETHING_WENT_WRONG);

  }

}

 

2. By Google Sign In Button

  • import button
    import { GoogleSignin, GoogleSigninButton } from '@react-native-community/google-signin';
  • Add button in our Component Button
    render() {
      <GoogleSigninButton
        style={{ width: 192, height: 48 }}
        size={GoogleSigninButton.Size.Wide}
        color={GoogleSigninButton.Color.Dark}
        onPress={this._signIn}
        disabled={this.state.isSigninInProgress} />
    }

     

Conclusion :

It is better to include a user by Google+ via Social login in our React Native Applicaiton. The given library works for both Mobile Platforms Android & iOS as well on Web and well documented.

 

We, at Oodles Technologies, provide full-scale SaaS app development services to build scalable, responsive, and quality-driven web and mobile applications. Contact us for technical assistance or drop us a line at [email protected] for more detail. 

About Author

Author Image
Ashwini Kumar Gupta

.He is the Lead Mobile Application Developer. Works on React Native and Native Android technology.

Request for Proposal

Name is required

Comment is required

Sending message..