Implementing Google OAuth Sign-In in React Native: A Step-by-Step Guide

In This article, we are going to see about creating OAuth SignIn using React native. 

The world is running very advanced, In a modern application everyone is trying to adopt this important feature to their application. OAuth is a simple feature to easyly access our application using our existing Oauth providers like Google, Github, Facebook etc.

 Users can conveniently use one account to sign up and log in to multiple apps, eliminating the need to remember multiple passwords for different sites. In this example i’m gona demo for Google Oauth Provider with React native,

npm i @react-native-google-signin/google-signin

I have used React native google signin npm and For google configration we need WEB_CLINET_ID and ADROID_CLINET_ID.

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

const GoogleSSO: React.FC = () => {
 
  return (
    <ButtonComponent
      modifier="Outlined"
      icon={<GoogleIcon/>}
      title="Sign in with Google"
      onPress={() => {

        GoogleSignin.configure({
          offlineAccess: true,
          webClientId: WEB_CLIENT_ID,
          androidClientId: ANDROID_CLIENT_ID,
        } as any);

        GoogleSignin.hasPlayServices()
          .then(async hasPlayService => {
            if (hasPlayService) {
              await GoogleSignin.signIn()
                .then(userInfo => {
                  console.log('userInfo',userInfo);
                  //In userInfo we can get the success google user account details
                
                })
                .catch(e => {
                  console.log('ERROR IS: ' + JSON.stringify(e));
                });
            }
          })
          .catch(e => {
            console.log('ERROR IS: ' + JSON.stringify(e));
          });

      }}
    />
  );
};

export default GoogleSSO;

In userInfo, we will get successfully loggedIn Google user account details.
The output will be,

{
    "scopes": [
        "https://www.googleapis.com/auth/userinfo.profile",
        "https://www.googleapis.com/auth/userinfo.email"
    ],
    "serverAuthCode": "4/0AfJohXlifgG6E5nP6t2QPqOLuQ9LqvAYdjshjq6LiHkGO3b4yPE-JoUMQRZ4tE3d6Bh8Uuwpw",
    "idToken": "eyJhbGciOiJSUzI1NifgjIsImtpZCI6ImEwNmFmMGI2OGEyMTE5ZDY5MmNhYzRhYmY0MTVmZjM3ODgxMzZmNjUiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL2FjY291bnRzLmdvb2dsZS5jb20iLCJhenAiOiI4NDI5NzUwNzYzMzMtYjk1MW1raThpZmdkcHY1M3Y4dDc4c2MwZWN2bzNkNGguYXBwcy5nb29nbGV1c2VyY29udGVudC5jb2QiOiI4NDI5NzUwNzYzMzMtY2Jyb2ZmNmptdWc3ajUwbTNhZ292bnFiNW43NGI3ZzQuYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJzdWIiOiIxMTgxMTI0MDEzNzEwNjM2MDAwODUiLCJlbWFpbCI6ImsucHJlbTMwMDlAZ21haWwuY29tIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsIm5hbWUiOiJQcmVtIEt1bWFyIiwicGljdHVyZSI6Imh0dHBzOi8vbGgzLmdvb2dsZXVzZXJjb250ZW50LmNvbS9hL0FDZzhvY0ozRmJkVFBGTkJqbEx1QWl6Zjh6TXJ0b1ZCMVNrM0lYcVFXYVhueW1HeDBXMD1zOTYtYyIsImdpdmVuX25hbWUiOiJQcmVtIiwiZmFtaWx5X25hbWUiOiJLdW1hciIsImxvY2FsZSI6ImVuIiwiaWF0IjoxNjk4Mzk1NjUzLCJleHAiOjE2OTgzOTkyNTN9.xufmMzrzAfVrY0mGqpyMFAIfSh8LDhTlxnuk2TRwq0Z9mhqqgPd9H1WnCphChdN1MrTns3e9kMxzpBpnpcjx-EE0N5L6jpbYM6dYi0oJeBUgXLiPF9WT-oY-29eCN8nPohQRJAve_4ou5UMHqQoyBdVkGBmE-UzSaCdgLN-wQlI5naQVIQVSlSFgBHIjSEtcuW3ySFz1pP-HQoHlBXCTlSR-3tTx0tgnwqtInZjC7f8r8ZrkNjNiiA0YcdZBZLXxh74-00oXD2jJWkg8hL3gSaIIKZnN1hDw20pg9aHu4AqqV008HLiEBzmXRtLI1qtO0haiTjh4Hf4klsHSrlwpxg",
    "user": {
        "photo": "https://lh3.googleusercontent.com/a/ACg8ocJ3FbdTPFNBjlLuAizf8zMrtoVB1Sk3IXqQWaXnymGx0W0=s96-c",
        "email": "k.prem300932@gmail.com",
        "familyName": "Kumar",
        "givenName": "Prem",
        "name": "Prem Kumar",
        "id": "118112401371063600085231"
    }
}

Using the server auth code, you can connect to your application and verify the account exists in the application.
Incase, any error occur while google login, catch will occur.

Hope this information is useful. Thank you for reading until the end. If you have any queries kindly comment and email me at k.prem3009@gmail.com