react-native-simple-google-login

react-native-simple-google-login

A <GoogleLogin /> component for react-native no native code added light weight library to make user Google login. No setup, no linking required,use it like a component.

This module uses Google OAuth2.

Installation

npm i --save react-native-simple-google-login

or

yarn add react-native-simple-google-login

Linking

As this module uses react-native-webview react-native-webview as dependencies, it's required to link them at the moment.

react-native link react-native-webview
react-native link @react-native-community/async-storage

TODO: Making the them automate

Setup Instructions

1. Go to the Google Developers Console
2. Select your project or create a new one (and then select it)
3. Create a service account for your project

• In the sidebar on the left, expand APIs & auth > Credentials
• Click blue "Add credentials" button
• Select the "OAuth client ID" option
• Select the "other" key type option
• Click blue "Create" button
• Save the Client_id, that's all you need (it is the only copy!)

Props

name	desc	type	default
credentialsDetails	Google client details	object	{redirectUrl: '', clientId:''}
scope	scope for the login which will be included in access token	string	'profile email openid'
getAccessToken	Callback for access token when token received	function	undefined
getUserDetails	Callback for user details when received	function	undefined

Usage

import React, { useState } from 'react';
import GoogleLogin, { getCurrentUser, getToken, getStatus, revokeAccess } from 'react-native-simple-google-login';

export default function App() {
  const clientId = 'YOUR_CLIENT_ID';
  const GOOGLE_REDIRECT_URI = 'http://localhost';
  const [ isLoggedIn, setLoggedIn ] = useState(false);

  function _onPressLoginButton() {
    if(isLoggedIn) {
      //do something else
    } else {
      setLoggedIn(true);
    }
  }

  function getAccessToken(token) {
      console.log(token, 'User logged in, token received');
      setLoggedIn(false);
  }

  function getUserDetails(data) {
      console.log(data, 'User details received');
  }

  function _onPressDetailsButton() {
    getCurrentUser().then(userDetails => {
      console.log(userDetails, 'stored user details in async storage');
    });
  }

  return (
    <View style={{flex: 1}}>
      <GoogleLogin
        credentialsDetails={{
          redirectUrl: GOOGLE_REDIRECT_URI,
          clientId,
        }}
        getAccessToken={getAccessToken}
        getUserDetails={getUserDetails}
      />
      <TouchableOpacity onPress={_onPressLoginButton}>
        <Text>Login with Google</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={_onPressDetailsButton}>
        <Text>Get user details</Text>
      </TouchableOpacity>
    </View>
  )
}

Docs

Exposed data: userDetails, accessToken, sessionValid

name	desc	type	default
getCurrentUser	Details of user logged in	Promise	null
getToken	Access token after logged in	Promise	null
getStatus	Returns a bool value which can be checked if the user is already logged in	Promise	null
revokeAccess	Remove your application from the user authorized applications.	Promise	null

Dependency

react-native-webview react-native-webview

Contribute

Help to make it better! Please see CONTRIBUTING.md for more details.

License

---

MIT License