React Social Signin

A Google oAUth Sign-in / Log-in Component for React

Install

npm install react-social-signin

How to use GoogleLogin

import React from 'react';
import ReactDOM from 'react-dom';
import { GoogleLogin } from 'react-social-signin';

function App() {
  const callback = (response) => {
    console.log(response);
  };

  return <GoogleLogin clientId={'CLIENT_ID'} callback={callback} />;
}

export default App;

GoogleLogin Props

params	value	default value	description
clientId	string	REQUIRED	You can create a clientID by creating a new project on Google developers website.
callback	function	REQUIRED	Return Google User Details in JWT decoded form
buttonTheme	object	{ theme: 'outline'; text: 'signin_with'; shape: 'rectangular'; size: 'large'; width: '40px' }	handle Button theme
promptEnable	boolean	false	Google One tap popup enable

callback

callback returns a GoogleUser object which provides access to all of the GoogleUser methods listed here: https://developers.google.com/identity/gsi/web/reference/js-reference#CredentialResponse .

You can also access the returned values via the following properties on the returned object.

property name	value	definition
sub	number	The unique ID of the user's Google Account
email	string	The user's email address
email_verified	boolean	true, if Google has verified the email address
name	string	User Name
picture	string	Profile image
given_name	string	User First Name
family_name	string	User Last Name

How to use FacebookLogin

import React from 'react';
import ReactDOM from 'react-dom';
import { FacebookLogin } from 'react-social-signin';

function App() {
  const callback = (res) => {
    console.log(res);
  };
  const onFailure = (res) => {
    console.log(res);
  };

  return <FacebookLogin fbAppId={'APP_ID'} onFailure={onFailure} callback={callback} />;
}

export default App;

FacebookLogin button without styling

import React from 'react';
import ReactDOM from 'react-dom';
import { FacebookLogin } from 'react-social-sign';

function App() {
  const callback = (res) => {
    console.log(res);
  };
  const onFailure = (res) => {
    console.log(res);
  };

  return (
    <FacebookLogin
      fbAppId={'APP_ID'}
      onFailure={onFailure}
      callback={callback}
      render={(renderProps) => <button onClick={renderProps.onClick}>This is my custom FB button</button>}
    />
  );
}

export default App;

How to use LinkdinLogin

First, we create a button and provide required props:

import React, { useState } from 'react';

import { LinkedIn } from 'react-social-signin';

function App() {
  const callback = (res) => {
    console.log(res);
  };
  const onFailure = (res) => {
    console.log(res);
  };
  return (
    <LinkedIn
      clientId={CLIENT_ID}
      redirectUri={`${window.location.origin}/linkedin`}
      onSuccess={(code) => {
        console.log(code);
      }}
      onError={(error) => {
        console.log(error);
      }}
    />
  );
}
export default App;

Then we point redirect_url to LinkedInCallback. You can use react-router-dom or Next.js's file system routing

• react-router-dom:

import React from 'react';
import { LinkedInCallback } from 'react-social-signin';

import { BrowserRouter, Route } from 'react-router-dom';

function Demo() {
  return (
    <BrowserRouter>
      <Route exact path='/linkedin' component={LinkedInCallback} />
    </BrowserRouter>
  );
}

• Next.js's file system routing:

// pages/linkedin.js
import { LinkedInCallback } from 'react-social-signin';
export default function LinkedInPage() {
  return <LinkedInCallback />;
}

How to use AppleLogin

import React, { useState } from 'react';

import { AppleLogin } from 'react-social-signin';

function App() {
  return <AppleLogin clientId='com.react.apple.login' redirectURI='https://redirectUrl.com' />;
}
export default App;

Login Props

params	value	default value	description
clientId	string	REQUIRED	The developer’s client identifier, as provided by WWDR.
scope	string	-	The amount of user information requested from Apple. Valid values are name and email. You can request one, both(separated by space), or none.
redirectURI	string	REQUIRED	The URI to which the authorization redirects.
responseType	string	code	The type of response requested. Valid values are code and id_token. You can request one or both(separated by space). When requesting an id_token response type, response_mode must be either fragment or form_post.
responseMode	string	query	The type of response mode expected. Valid values are query, fragment, and form_post. If you requested any scopes, the value must be form_post.
state	string	-	The current state of the request.
autoLoad	boolean	false	-
nonce	string	-	A String value used to associate a client session with an ID token. This value is also used to mitigate replay attacks.
usePopup	boolean	false	A Boolean that enables showing the flow in a popup.
designProp.height	number	30	The height of the button image. The minimum and maximum values are 30 and 64, respectively
designProp.width	number	140	The width of the button image. The minimum and maximum values are 130 and 375, respectively.
designProp.color	string	black	The background color for the button image. The possible values are white and black (the default).
designProp.border	boolean	false	A Boolean value that determines whether the button image has a border.
designProp.type	string	sign-in	The type of button image returned. The possible values are sign-in (the default) and continue.
designProp.border_radius	number	15	The corner radius for the button image. The minimum and maximum values are 0 and 50, respectively.
designProp.scale	number	1	The scale of the button image. The minimum and maximum values are 1 and 6, respectively.
designProp.locale	string	en_US	The language used for text on the button.
render	function	-	Render prop to use a custom element, use renderProps.onClick
callback	function	-	callback only work with Response Mode query.

Apple response

Upon authorization success, the server returns the following data object:

{
     "authorization": {
       "state": "[STATE]",
       "code": "[CODE]",
       "id_token": "[ID_TOKEN]"
     },
     "user": {
       "email": "[EMAIL]",
       "name": {
         "firstName": "[FIRST_NAME]",
         "lastName": "[LAST_NAME]"
       }
     }
}

Note

• The user object will only be presented the first time the user authorizes the application.
• With usePopup: true, designProp won't work except designProp.locale.

Upon failure, the server returns the following data object:

{
    "error": "[ERROR_CODE]"
}