README

React Social Login · · · ·

React Social Login is an HOC which provides social login through multiple providers.

Currently supports Amazon, Facebook, GitHub, Google, Instagram and LinkedIn as providers (more to come!)

We aren't using Google+ Api. Library will work fine even after Google+ deprecation.

Motivation

Having a component that doesn't dictates the HTML
All-in-One login component for different social providers
Takes care of warnings from provider's SDKs when multiple instances are placed
Kind of re-birth of my previous .Net driven similar open source - SocialAuth.NET

Scopes

While this library does a good job of fetching basic profile, at times you might need to get additional attributes from providers like DateOfBirth, HomeTowm, etc. which aren't returned by default. Scopes are purely provider dependent and their documentation is the best place to look for supported scopes and literal to be passed as argument. You can pass those scopes using the scope tag. For example, if you want birth date from Facebook (which isn't returned by default), you'd add following scope to your tag:

 scope='user_birthday,user_hometown'

Below are some links to official scopes guide for a few providers:

Online demo

See https://deepakaggarwal7.github.io/react-social-login.

Demo

Edit appId props with your own ones in demo/index.js file and build demo:

$ npm start

You can then view the demo at https://localhost:8080.

For GitHub provider, see GitHub specifics first.

Install

$ npm install --save react-social-login

Usage

Create the component of your choice and transform it into a SocialLogin component.

SocialButton.js

import React from 'react'
import SocialLogin from 'react-social-login'

const Button = ({ children, triggerLogin, ...props }) => (
  <button onClick={triggerLogin} {...props}>
    { children }
  </button>
)

export default SocialLogin(Button)

Then, use it like a normal component.

index.js

import React from 'react'
import ReactDOM from 'react-dom'

import SocialButton from './SocialButton'

const handleSocialLogin = (user) => {
  console.log(user)
}

const handleSocialLoginFailure = (err) => {
  console.error(err)
}

ReactDOM.render(
  <div>
    <SocialButton
      provider='facebook'
      appId='YOUR_APP_ID'
      onLoginSuccess={handleSocialLogin}
      onLoginFailure={handleSocialLoginFailure}
    >
      Login with Facebook
    </SocialButton>
  </div>,
  document.getElementById('app')
)

Reference

Raw component props (before transform):

Prop	Default	Type / Values	Description
appId	—	string	Your app identifier (see find my appId)
autoCleanUri	false	boolean	Enable auto URI cleaning with OAuth callbacks
autoLogin	false	boolean	Enable auto login on `componentDidMount`
gatekeeper	—	string	Gatekeeper URL to use for GitHub OAuth support (see GitHub specifics)
getInstance	—	function	Return node ref like `ref` function would normally do (react known issue)
onLoginFailure	—	function	Callback on login fail
onLoginSuccess	—	function	Callback on login success
onLogoutFailure	—	function	Callback on logout fail (`google` only)
onLogoutSuccess	—	function	Callback on logout success
provider	—	`amazon`, `facebook`, `github`, `google`, `instagram`, `linkedin`	Social provider to use
redirect	-	string	URL to redirect after login (available for `github` and `instagram` only)
scope	-	array, string	An array or string of scopes to be granted on login.
any other prop	—	—	Any other prop will be forwarded to your component

Note about redirect: if you are redirecting on root (eg: https://localhost:8080), you have to omit the trailing slash.

Transformed component props:

Prop	Type	Description
triggerLogin	function	Function to trigger login process, usually attached to an event listener
triggerLogout	function	Function to trigger logout process, usually attached to a container handling login state
all your props	—	All props from your original component, minus SocialLogin specific props

Logout

To implement logout, we need a container handling login state and triggering logout function from a ref to SocialLogin component.

As it is implemented in the demo, we have two components working together to trigger logout:

Here is how they work together:

Old component support

We decided to keep the old behavior as a fallback, it only supports facebook, google and linkedin providers and is available as a named export:

import React from 'react'
import ReactDOM from 'react-dom'
import { OldSocialLogin as SocialLogin } from 'react-social-login'

const handleSocialLogin = (user, err) => {
  console.log(user)
  console.log(err)
}

ReactDOM.render(
  <div>
    <SocialLogin
      provider='facebook'
      appId='YOUR_APP_ID'
      callback={handleSocialLogin}
    >
      <button>Login with Google</button>
    </SocialLogin>
  </div>,
  document.getElementById('app')
)

Build

Though not mandatory, it is recommended to use latest npm5 to match lockfile versions.

$ npm install
$ npm run build

Miscellaneous

Find my appId

Amazon

See Amazon developers documentation.

Facebook

See facebook for developers documentation.

GitHub (see GitHub specifics)

Basic authentication method using personal access tokens: see GitHub Help.
OAuth authentication: see GitHub Developer guide.

Google

See Google Sign-In for Websites guide.

Instagram

See Instagram developers documentation.

See Where can I find my API key? section on the FAQ.

GitHub specifics

GitHub provider is implemented in two different modes:

One using GitHub Personal Tokens
Another using GitHub OAuth

GitHub Personal Tokens mode

Actually, this one is more a hacky way to get user profile than a way to really connect your app like OAuth does.

Plus, it requires from users to create their personal token from their GitHub account, which is not a good experience for them.

This mode is the default if you do not provide gatekeeper prop and will try to use the appId prop to get user data. Anyway, we strongly advise you to use the GitHub OAuth authentication flow.

GitHub OAuth

If you provide a gatekeeper prop, this mode will be active and will use a server of your own to fetch GitHub OAuth access token. This is a know issue of GitHub.

The simplest way to setup this mode is to use the Gatekeeper project. Just follow setup instructions then tell RSL to use it:

<SocialLogin
  provider='github'
  gatekeeper='http://localhost:9999'
  appId='YOUR_GITHUB_CLIENT_ID'
  redirect='http://localhost:8080'
>
  Login with GitHub OAuth
</SocialLogin>

You can also implement it your own way but you must use the same routing than Gatekeeper (/authenticate/:code) and return a JSON response containing a token or error property (it will also throw if it doesn't find token).

Special instructions to run demo

RSL demo is served over https with webpack-dev-server. This is a requirement of Amazon Login SDK. Gatekeeper is served over insecure http so you will have to serve the demo through http also to work with GitHub (but it will break Amazon):

$ npm run start:insecure

Tests

TBD

Main contributors

Kind contributors

Kamran Ahmed : custom Google scopes
Adrien Cohen : multiple Google buttons
Jason Loo : full google auth response
Andri Janusson : LinkedIn public profile URL
Adrien Pascal : SSR support

@1nd/react-social-login

Usage no npm install needed!