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