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!)
- 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
Edit appId
props with your own ones in demo/index.js
file and build demo:
$ npm start
You can then view the demo at http://localhost:8080.
For GitHub provider, see GitHub specifics first.
$ npm install --save react-social-login
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 }
</div>
)
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')
)
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) |
onLoginFailure | — | function | Callback on login fail |
onLoginSuccess | — | function | Callback on login success |
provider | — | amazon , facebook , github , google , instagram , linkedin |
Social provider to use |
scope | - | array/string | An array or string of scopes to be forwarded in request. Current support for google only; others to come |
any other prop | — | — | Any other prop will be forwarded to your component |
Transformed component props:
Prop | Type | Description |
---|---|---|
triggerLogin | function | Function to trigger login process, usually attached to an event listener |
all your props | — | All props from your original component, minus SocialLogin specific props |
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')
)
Though not mandatory, it is recommended to use latest npm5 to match lockfile versions.
$ npm install
$ npm run build
See Amazon developers documentation.
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.
See Google Sign-In for Websites guide.
See Instagram developers documentation.
See Where can I find my API key?
section on the FAQ.
GitHub provider is implemented in two different modes:
- One using GitHub Personal Tokens
- Another using GitHub OAuth
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.
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
).
v2.0.0 [26 Feb 2017]
- Use small case for providers
- Linkedin support added along with previous google and facebook
- A lot of refactoring done
- Uses Webpack 2.x __Huge Thanks to Nicolas Goudry for his generous contribution __
v2.0.1 [24 June 2017] merged Pull #15 Request which resolves:
- Facebook error
- code styling
- unnecessary console logs
- pre-commit lint
TBD
- Nicolas Goudry
- No longer just myself