react-social-signin v0.0.3

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

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.

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

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]"
}