react-google-oauth v1.0.0

react-google-oauth

Directly inspired from react-google-login project.

With react-google-oauth you can quickly and easly add Login and Logout Google button.

How it works

This module is composed by two kind of components :

• \ used to inject and initialize the Google Api with your Google client ID, follow this Google's documentation to get yours
• \ \ \ \ components used to display buttons and connect each clickEvents to Google Oauth Api.

Install

npm install react-google-oauth

How use it

1°) Inject and init Google API script

Add \ component in your tree

import React from 'react';
import ReactDOM from 'react-dom';
import {GoogleAPI} from 'react-google-oauth'

ReactDOM.render(
        <GoogleAPI clientId="YOUR CLIENT ID"
            onUpdateSigninStatus={Function}
            onInitFailure={Function} >
         	<YourApp />
        </GoogleAPI>, document.getElementById('root'));

By default the Google API is initialize to make a simple Oauth with profile...

Caution : As other React component \ can have only one child

GooleApi props

See Google documentation for complet values

onUpdateSigninStatus - Callback

Doc : listen for changes in the current user's sign-in state

A function that takes a boolean value. Passes true to this function when the user signs in, and false when the user signs out.

onInitFailure - Callback

The function called with an object containing an error property, if GoogleAuth failed to initialize

2°) Add a button

Add a button component under GoogleAPI (each button component check if it is a child of GoogleAPI, if not an error message is displayed)

import React from 'react';
import ReactDOM from 'react-dom';
import {GoogleAPI,GoogleLogin,GoogleLogout} from 'react-google-oauth'

ReactDOM.render(
        <GoogleAPI clientId="YOUR CLIENT ID"
            onUpdateSigninStatus={CALLBACK}
            onInitFailure={CALLBACK} >
			<div>
              	<div><GoogleLogin /></div>
              	<div><GoogleLogout /></div>
    		</div>
        </GoogleAPI>, document.getElementById('root'));

GoogleLogin params

GoogleLogout params

Rendering

\ & \

Without parameters, buttons look like this :

<GoogleLogin />
<GoogleLogout />

Text, Color, Width

With pre-define rendering you can only change the text, the width and the background color.

Sample

<GoogleLogin 
  	backgroundColor="#A31515" 
  	text="login"
  	width="180px"
  	/>

Hover and active state are automaticaly generate (opacity 50% for Hover state and filter:brightness(80%) for active state.)

Login button

Logout button