Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-google-contacts

Package Overview
Dependencies
Maintainers
2
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-google-contacts

A Google Button to import user's gmail contacts

  • 1.0.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
285
increased by18.75%
Maintainers
2
Weekly downloads
 
Created
Source

React Google Contacts

A Google Button to import user's gmail contacts

React Google Contacts

Install

npm install react-google-contacts

How to use

import React from 'react';
import ReactDOM from 'react-dom';
import GoogleContacts from 'react-google-contacts';

const responseCallback = (response) => {
  console.log(response);
}

ReactDOM.render(
  <GoogleContacts
    clientId="429632624144-40js6mbas4r3tmjursoco68eoum0a24v.apps.googleusercontent.com"
    buttonText="Import"
    onSuccess={responseCallback}
    onFailure={responseCallback}
  />,
  document.getElementById('googleButton')
);

Google button without styling or custom button

ReactDOM.render(
  <GoogleContacts
    clientId="429632624144-40js6mbas4r3tmjursoco68eoum0a24v.apps.googleusercontent.com"
    render={renderProps => (
      <button onClick={renderProps.onClick}>This is my custom Google button</button>
    )}
    buttonText="Import"
    onSuccess={responseCallback}
    onFailure={responseCallback}
  />,
  document.getElementById('googleButton')
);

onSuccess callback

If responseType is not 'code', callback will return an array of objects (contacts).

If responseType is 'code', callback will return the offline token for use on your server.

If you use the hostedDomain param, make sure to validate the id_token (a JSON web token) returned by Google on your backend server:

  1. In the responseGoogle(response) {...} callback function, you should get back a standard JWT located at response.hg.id_token
  2. Send this token to your server (preferably as an Authorization header)
  3. Have your server decode the id_token by using a common JWT library such as jwt-simple or by sending a GET request to https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=YOUR_TOKEN_HERE
  4. The returned decoded token should have an hd key equal to the hosted domain you'd like to restrict to.

Parameters

paramsvaluedefault valuedescription
clientIdstringREQUIRED
jsSrcstring-
maxResultsnumber999By passing a number here you can restrict how many results you want to return
hostedDomainstring-URL of the Javascript file normally hosted by Google
responseTypestringpermissionCan be either space-delimited 'id_token', to retrieve an ID Token + 'permission' (or 'token'), to retrieve an Access Token, or 'code', to retrieve an Authorization Code.
accessTypestringonlineCan be either 'online' or 'offline'. Use offline with responseType 'code' to retrieve a refresh token
onSuccessfunctionREQUIRED
onFailurefunctionREQUIRED
onRequestfunction-
buttonTextstringImport from Gmail
classNamestring-
styleobject-
disabledStyleobject-
loginHintstring-
promptstring-
tagstringbuttonsets element tag (div, a, span, etc
typestringbuttonsets button type (submit
disabledbooleanfalse
discoveryDocs-https://developers.google.com/discovery/v1/using
uxModestringpopupThe UX mode to use for the sign-in flow. Valid values are popup and redirect.
themestringlightIf set to dark the button will follow the Google brand guidelines for dark. Otherwise it will default to light (https://developers.google.com/identity/branding-guidelines)
iconbooleantrueShow (true) or hide (false) the Google Icon
redirectUristring-If using ux_mode='redirect', this parameter allows you to override the default redirect_uri that will be used at the end of the consent flow. The default redirect_uri is the current URL stripped of query parameters and hash fragment.
renderfunction-Render prop to use a custom element, use renderProps.onClick

onSuccess callback ( w/ offline false)

onSuccess callback returns an array of objects (contacts).

property namevaluedefinition
titlestringFirst Name and Last Name
emailstringEmail
phoneNumberstringPhone Number

onSuccess callback ( w/ offline true)

property namevaluedefinition
codeobjectoffline token

You can also pass child components such as icons into the button component.

  <GoogleContacts
    clientId={'429632624144-40js6mbas4r3tmjursoco68eoum0a24v.apps.googleusercontent.com'}
    onSuccess={responseCallback}
    onFailure={responseCallback}
  >
    <FontAwesome
      name='google'
    />
    <span> Import from Gmail</span>
  </GoogleContacts>

onFailure callback

onFailure callback is called when either initialization or a signin attempt fails.

property namevaluedefinition
errorstringError code
detailsstringDetailed error description

Common error codes include:

error codedescription
idpiframe_initialization_failedinitialization of the Google Auth API failed (this will occur if a client doesn't have third party cookies enabled)
popup_closed_by_userThe user closed the popup before finishing the sign in flow.
access_deniedThe user denied the permission to the scopes required
immediate_failedNo user could be automatically selected without prompting the consent flow.

More details can be found in the official Google docs:

Dev Server

npm run start

Default dev server runs at localost:8080 in browser. You can set IP and PORT in webpack.config.dev.js

Run Tests

npm run test:watch

Production Bundle

npm run bundle

Credits

Based on the amazing work of @anthonyjgrove: https://github.com/anthonyjgrove/react-google-login

Keywords

FAQs

Package last updated on 03 Apr 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc