Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-google-oauth with all npm packages installed. Try it out:

var reactGoogleOauth = require("react-google-oauth")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-google-oauth v1.0.0

A Google OAuth component for React

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.

Google button with hover state

How it works

This module is composed by two kind of components :

  • <GoogleAPI> used to inject and initialize the Google Api with your Google client ID, follow this Google's documentation to get yours
  • <GoogleLogin> <GoogleLogout> <CustomGoogleLogin> <CustomGoogleLogout> 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 <GoogleAPI> 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 <GoogleAPI> can have only one child

GooleApi props

See Google documentation for complet values

ParametersDefault valueCommentType
clientIdREQUIREDString
responseType'permission'String
Prompt''DocString
cookiePolicy'single_host_origin'String
fetchBasicProfiletrueAutomatically add profile and email in Scope see DocBool
uxMode'popup'String
hostedDomainNoneString
redirectUriNoneString
Scope''More scope on this pageString
onUpdateSigninStatusf => fSee belowFunc
onInitFailureerr => console.error(err)See belowFunc

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

CallbackDefault valueComment
onLoginSuccess(response)f => fFunction called when the authentification is done. Maybe it's more preferable to use onUpdateSigninStatus from <GoogleAPI>. Fulfilled with the GoogleUser instance when the user successfully authenticates and grants the requested scopes.
onLoginFailure(error)f => ffunction called when a error occured. By example when a user closed the Google's popup before he choiced an account. This function take an object containing an error property. See Error Code on Google's documentation for more details.
onRequest()f => fCalled just before the call to Google Api Script, you can used this callback to display a loader by example. None parameter.
Text' Sign in with Google'Text displayed in button
backgroundColor#4285f4See Rendering paragraph
disabledFalseSee Rendering paragraph
width240pxSee Rendering paragraph

GoogleLogout params

CallbackDefault valueComment
onLogoutSuccess()f => fFunction called when the user has been signed out
onLogoutFailure(error)f => ffunction called when a error occured. This function take an object containing an error property. See Error Code on Google's documentation for more details.
onRequest()f => fCalled just before the call to Google Api Script, you can used this callback to display a loader by example. None parameter.
Text' Sign in with Google'Text displayed in button
backgroundColor#4285f4See Rendering paragraph
disabledFalseSee Rendering paragraph
width240pxSee Rendering paragraph

Rendering

<GoogleLogin> & <GoogleLogout>

Without parameters, buttons look like this :

<GoogleLogin />
<GoogleLogout />

GoogleLogin button GoogleLogout button

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"
    />

Red GoogleLogin button

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

Login button

ParameterDefault value
textSign in with Google
width240px
backgroundColor#4285f4

Logout button

ParameterDefault value
textSign out
width180px
backgroundColor#A31515
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free