Newby Coder header banner

React Native Google Login

Using @react-native-community/google-signin package, Sign-in with Google feature can be integrated into a React Native application

In dart code, signing in to Google is invoked with


and a user gets redirected to a typical Google sign-in webview which requests permissions from a user for a configured application

Response on valid authentication returns a user object with attributes like id, email, givenName, familyName, photo, name

Prior to using signIn(), GoogleSignin is supposed to be configured with webClientId (and other optional settings)

  webClientId: '',

A web client id is associated with a Firebase application or application registered in Google cloud console

To sign out


Creating new React Native App

Check React Native Installation for installation related info

Use react-native init command to create a new React Native project (here named NcGoogleLoginApp)

react-native init NcGoogleLoginApp

This creates a directory named NcGoogleLoginApp and initializes it as a react native application directory

This can be skipped in case an existing react native project is being integrated into


To use GoogleSignin, GoogleSigninButton add @react-native-community/google-signin to project

Go to project directory and run following yarn command to install the dependency

yarn add @react-native-community/google-signin

Or using npm

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


Following setup requires an App to be registered to Firebase to integrate google sign in

Firebase is an app development platform offering typical cloud services for mobile app development and also decent free usage limits for testing & development

It seems to be occupying a position of being a conventional choice of cloud platform for contemporary mobile app development

Create Firebase project

Go to Firebase Console, sign in with a Google account and create a project


Enter a project name, a project can be used to create multiple apps


Optionally enable Google analytics and click on Create project

Enable Authentication in Firebase Console

Click the Authentication option in left navigation tab


Click on Set up the sign-in method and choose Google from among the Sign-in providers and Enable it

Enter a name for app to be shown when a user logs in using google


Click on Web SDK configuration and copy Web client ID to be used in code


Create Android app in Firebase console

App Code

Replace webClientId with Web client ID which is found under Web SDK configuration on enabling google-sign in Firebase console

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

  webClientId: '',

export default class App extends React.Component {

  constructor() {
    this.state = {
      authenticated: false

  // Check for presence of Google play services and initiate webview sign-in
  signIn = async () => {
    try {
      await GoogleSignin.hasPlayServices();
      const userInfo = await GoogleSignin.signIn();
      this.setState({ userInfo:userInfo, authenticated:true });
    } catch (error) {

  // render sign in button
  signInButton() {
    return (
      style={{ width: 192, height: 48 }}
      disabled={this.state.isSigninInProgress} />)

  renderUser() {
    const { id, email, givenName, familyName, photo, name } = this.state.userInfo.user;
    return (
      <View style={{ alignItems: 'center', width:'100%'}}>
        { photo.length == 0? null:
          <Image source={{uri:photo}} style={{ width:200, height:200, marginBottom:20 }}/> }
        <View style={{ width:'100%', alignItems: 'center', backgroundColor:'#628367', padding:20}}>
          <Text style={{color:'white'}}>Name: {name}</Text>
          <Text style={{color:'white'}}>Email: {email}</Text>

  render() {
    return (
      <View style={{ backgroundColor: 'white', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          { this.state.authenticated? this.renderUser() : this.signInButton()}

Run instructions

Running in Android

cd into project directory (here NcGoogleLoginApp)

cd NcGoogleLoginApp

Run metro server to serve js

react-native start

Go to project directory in another terminal tab

Enter following run command for Android:

react-native run-android