react-native-google-signin

Features

Support all 3 types of authentication methods (standard, with server-side validation or with offline access (aka server side access))
Native signin button
Consistent API between Android and iOS
Promise-based JS API

Installation

npm install react-native-google-signin --save
react-native link react-native-google-signin

Note

If you use React Native < v0.40 stick with v0.8.1 (npm install react-native-google-signin@0.8 --save).

If you use React Native < v0.47 stick with v0.10.0 (npm install react-native-google-signin@0.10 --save).

Project setup and initialization

See Android guide and iOS guide

Public API

1. GoogleSigninButton

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

render() {

  <GoogleSigninButton
    style={{width: 48, height: 48}}
    size={GoogleSigninButton.Size.Icon}
    color={GoogleSigninButton.Color.Dark}
    onPress={this._signIn.bind(this)}/>
}

Possible value for size are:

Size.Icon: display only Google icon. recommended size of 48 x 48
Size.Standard: icon with 'Sign in'. recommended size of 230 x 48
Size.Wide: icon with 'Sign in with Google'. recommended size of 312 x 48

Possible value for color are:

Color.Dark: apply a blue background
Color.Light: apply a light gray background

2. GoogleSignin

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

- hasPlayServices

Check if device has google play services installed. Always return true on iOS.

GoogleSignin.hasPlayServices({ autoResolve: true }).then(() => {
    // play services are available. can now configure library
})
.catch((err) => {
  console.log("Play services error", err.code, err.message);
})

when autoResolve the library will prompt the user to take action to solve the issue.

For example if the play services are not installed it will prompt:

- configure

It is mandatory to call this method before login.

Example for default configuration. you get user email and basic profile info.

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

GoogleSignin.configure({
  iosClientId: <FROM DEVELOPER CONSOLE>, // only for iOS
})
.then(() => {
  // you can now call currentUserAsync()
});

Example to access Google Drive both from the mobile application and from the backend server

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
  iosClientId: <FROM DEVELOPER CONSOLE>, // only for iOS
  webClientId: <FROM DEVELOPER CONSOLE>, // 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
  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
})
.then(() => {
  // you can now call currentUserAsync()
});

iOS Note: your app ClientID (iosClientId) is always required

- currentUserAsync

Typically called on the componentDidMount of your main component. This method give you the current user if already login or null if not yet signin.

GoogleSignin.currentUserAsync().then((user) => {
      console.log('USER', user);
      this.setState({user: user});
    }).done();

- currentUser

simple getter to access user once signed in.

const user = GoogleSignin.currentUser();
// user is null if not signed in

- signIn

Prompt the modal to let the user signin into your application

GoogleSignin.signIn()
.then((user) => {
  console.log(user);
  this.setState({user: user});
})
.catch((err) => {
  console.log('WRONG SIGNIN', err);
})
.done();

- getAccessToken (Android Only)

Obtain the user access token.

GoogleSignin.getAccessToken()
.then((token) => {
  console.log(token);
})
.catch((err) => {
  console.log(err);
})
.done();

iOS Note: an error with code -5 is returned if the user cancels the signin process

- signOut

remove user session from the device

GoogleSignin.signOut()
.then(() => {
  console.log('out');
})
.catch((err) => {

});

iOS Note: the signOut method does not return any event. you success callback will always be called.

- revokeAccess

remove your application from the user authorized applications

GoogleSignin.revokeAccess()
.then(() => {
  console.log('deleted');
})
.catch((err) => {

})

3. User

This is the typical information you obtain once the user sign in:

  {
    id: <user id. do not use on the backend>
    name: <user name>
    givenName: <user given name> (Android only)
    familyName: <user family name> (Android only)
    email: <user email>
    photo: <user picture profile>
    idToken: <token to authenticate the user on the backend>
    serverAuthCode: <one-time token to access Google API from the backend on behalf of the user>
    scopes: <list of authorized scopes>
    accessToken: <needed to access google API from the application>
  }

Android Note: To obtain the user accessToken call getAccessToken

idToken Note: idToken is not null only if you specify a valid webClientId. webClientId corresponds to your server clientID on the developers console. It HAS TO BE of type WEB

Read iOS documentation and Android documentation for more information

serverAuthCode Note: serverAuthCode is not null only if you specify a valid webClientId and set offlineAccess to true. once you get the auth code, you can send it to your backend server and exchange the code for an access token. Only with this freshly acquired token can you access user data.