Implement Google+ Sign-In with React Native

Question

I\'m wanting to integrate G+ Sign In (as per https://developers.google.com/+/mobile/ios/sign-in) in a React Native app. I have Facebook Sign In working via http://brentvatne.ca/

Answer 1

After so much struggle I have gone through all the issues we face with Google+ signin integration in React Native app. Kindly find a step by step changes need to be done 1. Create Project in Google Cloud Platform : Try free trail I am using google cloud platform, if you are not using that, you just enable apis under google console

2. Enable Google+ API for your project and generate API Key in your google cloud console

3. Set YourSHA-1 key and package name (as given in AndroidManifest.xml ) of your android project ( Note: if you are using expo for this, then you should eject expo first to achieve this, Read How To Eject Expo )

To generate your own SHA-1 use the command -> keytool -list -v -keystore mystore.keystore

NOTE : If Your build is debug build then theSHA-1 generated with above command won’t work, kindly check your adb logs carefully, theSHA-1 being used by your android debug build will be logged in the device log. To check device log run the below command from your /Users//Library/Android/sdk/platform-tools —> adb logcat

4. Import the same project in firebase : If you are not using firebase then skip this step and next step

5. Setup android project in your firebase project, then setup authentication methods being used in your app.

6. Then setup sameSHA-1 Key for your firebase project: Navigate to Project setting from side bar and click on general , select android app and set SHA-1 key

NOTE: Once SHA-1 is setup, download google-services.json file in the same page. and keep the file under your android project director app folder /ReactNativeProjectFolder/android/app

7. add ‘react-native-google-signin’ and ‘firebase’ modules

npm install react-native-google-signin –save

npm install firebase –save

8. Add dependency in your /app/bundle.gradle

Note : in below code those excludes are most important, or else you will encounter strange linking errors.

implementation project(':react-native-google-signin')

if your app is using some other dependencies like react-native-maps or react-native-social-share then do below changes as well

implementation(project(":react-native-google-signin")){
    exclude group: "com.google.android.gms" // very important
}
compile(project(':react-native-maps')) {
      exclude group: 'com.google.android.gms', module: 'play-services-base'
      exclude group: 'com.google.android.gms', module: 'play-services-maps'
    }
implementation 'com.google.android.gms:play-services-base:11.+'
implementation 'com.google.android.gms:play-services-maps:11.+'

9. your android/bundle.gradle file should look as follows // Top-level build file where you can add configuration options common to all sub-projects/modules.

   buildscript { repositories { google() jcenter() } dependencies { classpath 'com.android.tools.build:gradle:3.0.1' classpath 'com.google.gms:google-services:3.0.0' // <--- add this // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files } }

   allprojects { repositories { mavenLocal() jcenter() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } } }

   ext { compileSdkVersion = 23 targetSdkVersion = 23 buildToolsVersion = "23.0.1" googlePlayServicesVersion = "10.2.4" androidMapsUtilsVersion = "0.5+" }

10. un below commands

npm install

react-native link

11. Once you run react native link – check android/settings.gradle file , cross check that there should not be duplicate lines of content.

So far we have done project level configurations, now let us see code changes

12. React Native Google sign-in/sign-up using firebase code

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

    function googleAuthConfig(successCallback, failureCallback) { GoogleSignin.configure({ iosClientId: CLIENT_IDS.GOOGLE_IOS_CLIENT_ID, webClientId: '', hostedDomain: '', forceConsentPrompt: true, accountName: '' }) .then(() => { console.log('Google Config Success'); successCallback(); }) .catch((err) => { console.log('Google Config Error'); failureCallback(err); }); }

    function googleSignin() { googleAuthConfig(() => { GoogleSignin.signIn() .then((user) => { const { accessToken } = user; var credentials = firebase.auth.GoogleAuthProvider.credential(null, accessToken); firebase.auth().signInWithCredential(credentials) .then((firebaseResult) => { loginToSG(dispatch, firebaseResult, props, 'Google', registerCallback); }) .catch(error => console.log('error while checking with firebase', error)); }) .catch((err) => { console.log(err); }); }, (googleConfigErr) => { console.log(googleConfigErr); }); }

13. Finally the most important step is -> once do npm cache clean, delete your existing app from device, delete build folders then run the app

react-native run-android

Credits : Step by step guide with screenshots and code snippets

Answer 2

So this is only semi-related to React Native, since your main issue seems to be writing the Obj-C side of the G+ sign in. To that end, grab the iOS Quick Start app for Google Plus:

https://developers.google.com/+/quickstart/ios

Follow the instructions to open the sample project and you'll find the SignInViewController.m file which contains this line:

@interface SignInViewController () <GPPSignInDelegate>

That appears to be what you're after.

Once you have that working, you'll need to implement the connection to React Native. The Facebook post you linked to shows how to do that, but the official documentation is here:

http://facebook.github.io/react-native/docs/nativemodulesios.html#content

I also wrote a post to show the simplest Native Module I could think of, which I think describes the general concept pretty well:

http://colinramsay.co.uk/2015/03/27/react-native-simple-native-module.html

Answer 3

EDIT 2017

Within the Expo framework, which is now the default for react-native apps, there is built in Google Authentication available:

Expo documentation: https://docs.expo.io/versions/latest/sdk/google.html

Get Android and iOS client ids: https://console.developers.google.com/apis/credentials

import React from 'react'
import Expo from 'expo'
import Button from 'react-native-button'

class Login extends React.Component {
  signInWithGoogleAsync = async () => {
    try {
      const result = await Expo.Google.logInAsync({
        androidClientId: process.env.GOOGLE_ANDROID_CLIENT_ID,
        iosClientId: process.env.GOOGLE_IOS_CLIENT_ID,
        scopes: ['profile'],
      })

      if (result.type === 'success') {
        return result
      }
      return { cancelled: true }
    } catch (e) {
      return { error: e }
    }
  }


  onLoginPress = async () => {
    const result = await this.signInWithGoogleAsync()
    // if there is no result.error or result.cancelled, the user is logged in
    // do something with the result
  }

  render() {
    return (<Button onPress={this.onLoginPress}>Login</Button>)
  }
}

OLD ANSWER

There is now a library for signing in with Google+ for react-native: https://github.com/devfd/react-native-google-signin