Google Signin for your react native applications

react-native-google-signin

Google Signin for your react native applications.

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).

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

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