React Component for Login via Social Providers
npm install react-social-login[npm:img]: https://img.shields.io/npm/v/react-social-login.svg?style=flat-square
[npm:url]: https://www.npmjs.org/package/react-social-login
[standard:img]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
[standard:url]: http://standardjs.com
[dependencies:img]: https://david-dm.org/deepakaggarwal7/react-social-login.svg?style=flat-square
[dependencies:url]: https://github.com/deepakaggarwal7/react-social-login/blob/master/package.json#L33
[license:img]: https://img.shields.io/badge/License-MIT-brightgreen.svg?style=flat-square
[license:url]: https://opensource.org/licenses/MIT
!alt text
js
scope = "user_birthday,user_hometown";
`
Below are some links to official scopes guide for a few providers:
- FACEBOOK
- GOOGLE
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:
`shell
$ npm start
`
You can then view the demo at [https://localhost:8080][demo].
For GitHub provider, see [GitHub specifics][githubspecifics] first.
Install
`shell
$ npm install --save react-social-login
`
Usage
Create the component of your choice and transform it into a SocialLogin component.
SocialButton.js
`js
import React from "react";
import SocialLogin from "react-social-login";
class SocialButton extends React.Component {
render() {
const { children, triggerLogin, ...props } = this.props;
return (
);
}
}
export default SocialLogin(SocialButton);
`
Then, use it like a normal component.
index.js
`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(
appId="YOUR_APP_ID"
onLoginSuccess={handleSocialLogin}
onLoginFailure={handleSocialLoginFailure}
>
Login with Facebook
,
document.getElementById("app")
);
`
$3
There are times when initialization of a component can take longer than expected.
To support these changes there is the optional loader component.
Simply pass the component as a second parameter to SocialLogin
SocialButton.js
`js
import React from "react";
import SocialLogin from "react-social-login";
import Loading from "./Loading";
class SocialButton extends React.Component {
render() {
const { children, triggerLogin, ...props } = this.props;
return (
);
}
}
export default SocialLogin(SocialButton, Loading);
`
$3
Raw component props (before transform):
| Prop | Default | Type / Values | Description |
| ----------------- | ------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| appId | — | string | Your app identifier (see [find my appId][findmyappid]) |
| 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][githubspecifics]) |
| 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 |
| onInternetFailure | — | function | Doesn't open popup if returns false and internet isn't there |
| 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. |
| version | - | string | Can be used to explicitly specify FBsdk version (default is v5.0) |
| 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 |
$3
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:
- [Demo container][democontainer]
- [UserCard component][usercardcomponent]
Here is how they work together:
1. [Demo is displaying UserCard only if user is logged][logoutstep1]
2. [UserCard gets forwarded a logout function][logoutstep2]
3. [UserCard calls forwarded logout prop on click on the logout button][logoutstep3]
4. [logout function triggers triggerLogout prop from a ref to SocialLogin component][logoutstep4]
$3
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:
`js
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(
appId="YOUR_APP_ID"
callback={handleSocialLogin}
>
,
document.getElementById("app")
);
`
Build
Though not mandatory, it is recommended to use latest npm5 to match lockfile versions.
`shell
$ npm install
$ npm run build
`
Miscellaneous
$3
#### Amazon
See [Amazon developers documentation][amazondoc].
#### Facebook
See [facebook for developers documentation][fb4devdoc].
#### GitHub (see [GitHub specifics][githubspecifics])
- Basic authentication method using personal access tokens: see [GitHub Help][githubhelp].
- OAuth authentication: see [GitHub Developer guide][githubdoc].
#### Google
See [Google Sign-In for Websites guide][gsignindoc].
#### Instagram
See [Instagram developers documentation][instadoc].
#### LinkedIn
See Where can I find my API key? section on the [FAQ][linkedinfaq].
$3
GitHub provider is implemented in two different modes:
- One using [GitHub Personal Tokens][ghpersonaltokens]
- 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][ghoauthwebflowissue].
The simplest way to setup this mode is to use the [Gatekeeper project][gatekeeper]. Just follow setup instructions then tell RSL to use it:
`
gatekeeper='http://localhost:9999'
appId='YOUR_GITHUB_CLIENT_ID'
redirect='http://localhost:8080'
>
Login with GitHub OAuth
`
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):
`shell
$ npm run start:insecure
`
FAQs
- How to get a bigger picture in FB?
=use /me/picture?width=999
Change Log
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 request #15
- Facebook error
- code styling
- unnecessary console logs
- pre-commit lint
v3.0.0 [30 July 2017] merged pull request #19
- Rewrote as HOC
- Instagram
- GitHub
- Auto login
- Better error handling
- Various fixes
v3.1.0 [01 August 2017] merged pull request #20
- Amazon
- https
v3.2.0 [14 September 2017] 3.2.0
- Custom Google scopes
- Multiple Google buttons
- GitHub doc
v3.2.1 [06 October 2017] React 16, better build, update dep, additions and fixes
- Update React to v16
- Update all dependencies to latest stable versions
- Optimize webpack build
- Return full googleAuthResponse
- Preserve redirect url query string and hash
- Cancel loading on componentWillUnmount
- Various fixes
v3.3.0 [22 October 2017] Logout, custom scopes and fixes
- Add publicProfileURL for LinkedIn
- Add logout support
- Fix wrong GitHub id
- Add custom scope support (all but LinkedIn)
- Update documentation
v3.4.0 [22 October 2017] Fix logout issues, expose wrapped component ref and fixes
- Fix logout issue with Amazon
- Don’t throw error on Instagram logout (like fake SDK load doesn’t throw)
- Expose wrapped component ref (react know issue)
- Small fixes
v3.4.1 [08 November 2017] Fix logout issues, adds SSR support and fixes
- Fix unknown prop triggerLogout forwarded to wrapped component
- Server-side rendering support
- Small fixes
- Update README to explain how logout is implemented in demo
v3.4.2 [26 December 2017] Fix SSR, refs and update build
- Fixes url parser when window is undefined (SSR fix)
- Don’t use refs on stateless components
- Update build system (babel-preset-env`, updated dependencies, lighter npm package)