React Native

Sign-in with google in react-native

Posted On
Posted By Neha Dwivedi

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…
  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

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
Note: which name is highlighted copy that client id and match this id with firebase WebClient id which we save in step 1, this is a most important part.

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/

and if any other issue then please comment

Happy Coding Guyz

Related Post

leave a Comment

Latest Post

React Native

How to setup crashlytics in react native

Read More
Posted On
React Native

How to create/generate ipa file in react native iOS

Read More
Posted On
React Native

How to Set Splash Screen and AppIcon in react native iOS

Read More
Posted On
React Native

Getting Started with React Native First App With Little Information(Course for beginners, start with basics)

Read More
Posted On
React Native

How To Integrating Firebase with iOS in React Native

Read More
Posted On