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/facebook-login-with-react-native/ which is working perfectly, but I'm not sure what to do at this point of the G+ docs:

In your view controller's .h file, import GooglePlus/GooglePlus.h, and declare that this controller class implements the GPPSignInDelegate protocol

If anyone could provide some pointers/code samples?

Thanks!

Answer 1

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

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