Implement Google+ Sign-In with React Native

DaBeeeenster picture DaBeeeenster · Mar 27, 2015 · Viewed 13.6k times · Source

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

Danny Sullivan picture Danny Sullivan · Aug 21, 2016

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