Google Login in React-Native App [Android]
Recently, I faced a nightmare in applying google login while working on a react-native project. I tried rubbing myself online for 3 days and still got result as failure.
Today, finally i succeed and the steps are extremely simple. Follow the steps exactly as followed and you’ll be good to go.
Let’s Start [I will use react-native-google-sigin by react-community on git.]
1. create-react-native-app
First let’s create a react-native-app using create-react-native-app and enter the project
create-react-native-app googleLogin
cd googleLogin2. Eject the App to run in Simulator/Android Device
To run the app in our android app or Simulator, first we need to eject the app. Run following command and select “React Native: I’d like a regular React Native Project” using cursor.
Following enter, it will ask for your App name and package name. Enter desired and enter
npm run eject
Now, let’s try running in our Simulator/Android Device just to make sure, everything is fine. Open your simulator form Android Studio or connect your android phone and run
npm run androidIf everything is fine, you will see following screen in your Android Device/Simulator

3. Setting up our project in Android Studio
install react-native-google-signin by react-community
npm i --save react-native-google-signinNow, it’s time to spent some time in Android Studio for configuration
3.1 Open your project in Android Studio using “Open an existing Android Studio project”.
3.2 Select the android directory from your project
3.3 Once started, If Android Studio prompts to upgrade the gradle, It’s recommended to upgrade it.
3.4 Further, Studio will build the project and throws error (if any) with solution. [You can get the error for updating the buildTools, update by clicking the blue link just below the error and re-sync]
3.5 You can also probably get a warning of compile is obsolete. Either you can choose to ignore that but if you want to be sure, in future you app doesn’t break, due to some deprecation, I recommend it resolve that warning.
Follow the steps to remove “compile is obsolete” warning in android studio
3.5.1 Open File -> Project Structure
3.5.2 Click on app from sidemenu and go to Dependencies tab
3.5.3 There you’ll find Compile selected under Scope.
3.5.4 Click and change all to implementation
Now, we’re good to proceed with our Google-Signin Integration

4. Setting up Firebase and Google API
4.1 Open SDK Manager in Android Studio (Tools -> SDK Manager)
4.2 Select “Appearance & Behavior -> System Settings -> Android SDK”
4.3 Click on SDK Tools tab and Make sure following packages are installed
Android SDK Build Tools
Android SDK Platform-Tools
Android SDK Tools
Google Play Services
Android Support Repository
Google Repository
Intel x86 Emulator Accelerator (HAXM installer) // for Simulator
4.4 If anyone of them are not selected, select it and click OK. Android Studio will download them and apply to your project and re-sync the project.
4.5 Visit Firebase Console and click on Add Project. It will open modal which asks for project name, location. Enter desired and click Create Project. In few seconds, firebase will create your project, then click continue
4.6 Click Project Settings in Settings gear icon in the sidebar

4.7 At bottom of the page, you will see option to add apps in your project. Click Add Firebase to your Android App.
4.8 It will asks for package name and SHA-1
You can find your package name in first line of android/app/src/main/AndroidManifest.xml
For SHA-1
go to back to your command prompt and navigate to android/keystores/
You’ll find a file by the name of debug.keystore in there. If not run following command
keytool -genkey -v -keystore debug.keystore -alias keystorealias -keyalg RSA -keysize 2048 -validity 10000Above command will first prompt for password, Enter your desired password, then it asks few questions, fill in and continue. [Remember both the passwords (key and store)]
Since, now we have our debug.keystore file run the following command to get the SHA-1
keytool -exportcert -keystore ~/.android/debug.keystore -list -vEnter the keystore password and hit enter.
It will provide you Certificate fingerprints. Copy SHA1 from there and paste in the firebase, (where we left).
Click Register app
4.9 This is will generate a google-services.json file. Download the file and save it in android/app/ and click Next.
Add following line in android/build.gradle
buildscript {
repositories {
jcenter()
google()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.1.4'
classpath 'com.google.gms:google-services:4.0.1' <-- add this
}
}!!! THIS IS IMPORTANT
update the above file and make google() function before jcenter(). So finally, you build.gradle should look like
buildscript {
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.1.4'
classpath 'com.google.gms:google-services:4.0.1'
}
}
allprojects {
repositories {
google()
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}Now, add following line in android/app/build.gradle
dependencies {
implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation 'com.android.support:appcompat-v7:23.0.1'
implementation 'com.facebook.react:react-native:+'
// From node_modules
implementation 'com.google.firebase:firebase-core:16.0.1' <-- add this
}
// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into 'libs'
}
apply plugin: 'com.google.gms.google-services' <-- this is last lineFinally, press Sync Now.
Back to console.firebase.com
Press Next,

and uninstall the App in Simulator/Device and run again using
npm run androidAfter few secs firebase will show success message, click continue to console

Now, We need a webClientId which will be needed in google sign in integration.
Visit console.developers.google.com and you’ll find an auto created Web Client id under OAuth 2.0 client IDs [We have to use Web client and not android one]. Copy the id and save it somewhere.
4.10 Now back to Android Studio.
Go to File -> Project Structure and click on app in the sidebar. Select Signing tab. You’ll see a debug option on left, if not click on green plus icon to create one and fill in the details. [I told you earlier to remember both the passwords during creating debug.keystore file. Now you need them]

Click OK and Android Studio will re-sync the project.
4.11 Let’s link the react-native-google-signin with our project
Add following lines of code in
- android/settings.gradle
include ':react-native-google-signin', ':app'
project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-google-signin/android')- android/app/build.gradle
dependencies {
implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.facebook.react:react-native:+'
// From node_modules
implementation(project(":react-native-google-signin")){
exclude group: "com.google.android.gms" // very important
}
implementation 'com.google.android.gms:play-services-auth:16.0.0'
implementation 'com.google.firebase:firebase-core:16.0.1'
}- update complileSdkVersion to 27 in same file (android/app/build.gradle)
compileSdkVersion 27- android/src/main/java/MainApplication.java
import co.apptailor.googlesignin.RNGoogleSigninPackage;
... rest imports ....public class MainApplication extends Application implements ReactApplication {
......
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNGoogleSigninPackage() // <-- add this
);
}
......
}
Click Sync Now. Studio may prompt with some warnings related to buildSDKTools. Click on the blue link behind the warnings to remove them.

We are ready with integration, Now let’s open your project in your favorite editor.
I’ll edit the App.js file directly for this demo.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { GoogleSignin, GoogleSigninButton } from 'react-native-google-signin';export default class App extends React.Component {
componentDidMount() {
GoogleSignin.configure({
webClientId: webClientId i told you to save somewhere,
forceConsentPrompt: true, // if you want to show the authorization prompt at each login
});
} googleSignInHandler = () => {
GoogleSignin.hasPlayServices()
.then(res => {
GoogleSignin.signIn()
.then(res => {
console.log(res);
})
.catch(err => {
console.log(error.code);
});
})
.catch(err => {
console.log(err);
});
} render() {
return (
<View style={styles.container}>
<GoogleSigninButton
style={{ width: 48, height: 48 }}
size={GoogleSigninButton.Size.Icon}
color={GoogleSigninButton.Color.Dark}
onPress={this.googleSignInHandler}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});
We’re ready.
Run the App.
npm run android
Click on the Google Icon and Select the user from the modal and check your console using Debug JS Remotely.

That’s it.
If you are reading this thanks a lot for being with me till this long.
Follow to get connected.
See you next time, till then
Keep Learning (KL🤟 )
