How to login with google using firebase in react-native: 

For login with google, npm provide a great plugin which is react-native-google-sign in, there is some step that follows carefully to implement google login, so let’s start the integration of “Sign-in with google in react-native“.

Output is like –

1. Register project on firebase and setup firebase.
2. Setup google develope account.
3. Setup Communication between Firebase and google developer.
4. Implement this plugin in project.— react-native-google-signin
5. Then testing the login feature

 so let’s start to implement a google login

1) Register project on firebase and setup

• For registering the project with firebase we need to follow all steps which are defined in this tutorial please follow this step by step. https://www.itechinsiders.com/2019/09/how-to-send-firebase-notification-in-react-native/ 
• Enable Google Login in Firebase after setup firebase
• Authentication → Sign-In Method → Google, and click the Enable toggle.
• It’s something that looks like…

Note : Save the web client id because we need it in other steps, this web client id and client id which we generate using google developer account are must be the same, this is a most important part of this setup.

2) Setup google develope account

So let’s start to set up a google account, for register your project with Google, follow these steps

• Go to Google Developer Console to set up your app. 
• Log in to your Google account and create a new project.

Screen is like…

• Select the project then go into sidemenu->credentials and add a new credential, which is like

• You’ll need to set a product name for your app. Do that by pressing the configure consent screen button.

• Add web application and android both

• Provide the name of the project and save it, the screen is like

Authenticating Your Client

• Then open the terminal on your computer and type:
• For mac/Linux — key tool -list -v \

-alias androiddebugkey -keystore ~/.android/debug.keystore

null
• For windows —
• keytool -list -v \-alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore
• Ask about password: android(for both)
• It shows certificate like — Certificate fingerprint: SHA1: DA:39:A3:EE:5E:6B:4B:0D:32:55:BF:EF:95:60:18:90:AF:D8:07:09
• https://developers.google.com/android/guides/client-auth Clicking Create gives you your Android Client ID (you’ll need this in your code later)”

• After all the setup go to credentials menu, it looks like

3)Check and Setup Communication between Firebase and google developer

• copy the SH1 key and add it into firebase
• now we again goto firebase console add the key and set up the support mail, the screen looks like

• And then again download the google-services.json file. 
  

 4) Implement this plugin in project– react-native-google-signin —

• Now we are ready to implement google login with our project, so first, we need to install this plugin in our project

npm install react-native-google-signin –save

• Now we link this plugin with our project

react-native link   react-native-google-signin

• After this it must check all library is link properly, then start next step
• Now we configure the google setting in our project, componentDidMount

GoogleSignin.configure({
  // scopes: ['https://www.googleapis.com/auth/drive.readonly'], // 
   what API you want to access on behalf of the user, default is email 
   and profile
   webClientId: "1069313016635-haqprteis.apps.googleusercontent.com", 
   // client ID of type WEB for your server (needed to verify user ID 
   and offline access)
   offlineAccess: true, // if you want to access Google API on behalf 
   of the user FROM YOUR SERVER
   hostedDomain: '', // specifies a hosted domain restriction
   loginHint: '', // [iOS] The user's ID, or email address, to be 
   prefilled in the authentication UI if possible. [See docs here]. 
  (https://developers.google.com/identity/sign- 
 in/ios/api/interface_g_i_d_sign_in.html#a0a68c7504c31ab0b728432565f6e33fd)
  forceConsentPrompt: true, // [Android] if you want to show the authorization prompt at each login
 accountName: '', // [Android] specifies an account name on the device that should be used
iosClientId: '1069313016635-h2c1fnoik1la1jdbpg7uegv5l5s6kjtu.apps.googleusercontent.com', // [iOS] optional, if you want to specify the client ID of type iOS (otherwise, it is taken from GoogleService-Info.plist)
})

Explanation:

• scopes: This tells what API you want to access on behalf of the user, leave it blank for just email and profile access. For more API access, you might have to get your app verified, or you’ll see this warning when logging in.
• webClientId: Client ID of type WEB for your server needed to verify user ID and offline access. This is what we copied from Firebase console in Step 2.
• offlineAccess: If you want to access Google API on behalf of the user from your server.
• hostedDomain: Specifies a hosted domain restriction for auth.
• loginHint: Only for iOS – The user’s ID, or email address, to be prefilled in the authentication UI if possible. (See docs here)
• forceConsentPrompt: Only for Android —  if you want to show the authorization prompt at each login.
• accountName: Only for Android —  Specifies an account name on the device that should be used.
• iosClientId: Only for iOS — Optional, if you want to specify the client ID of type iOS (otherwise, it is taken from GoogleService-Info.plist). Of course, if you omit this, yourGoogleService-Info.plist needs to be correctly configured in XCode.
• Now we need to import the plugin where we need to setup.

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

• google provide default design and button of google login

render() {
<GoogleSigninButton style={{width:192,height:48}} size={GoogleSigninButton.Size.Wide} color={GoogleSigninButton.Color.Dark} onPress={this._signIn} disabled={this.state.isSigninInProgress}/> 
}

Design looks like —

async loginwithGoogle() { 
 GoogleSignin.signOut()
 try {
  await GoogleSignin.hasPlayServices();
     GoogleSignin.signIn().then((user) => { 
        this.setState({ googleUserInfo : user });
           console.log('sigedin user========',user)
   })
}

• Response: response of google login in like

Now, this is completed, if you get any issue, please follow https://www.itechinsiders.com/2019/10/possible-issues-in-google-login-using-firebase/ this link

and if you not able to get SH1 key then follow https://www.itechinsiders.com/2019/10/how-to-get-sh1-key-in-react-native/

So the topic  “Sign-in with google in react-native” is completed, you can find the next lesson here.

and if any other issue then please comment

Happy Coding Guyz