Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@1nd/react-social-login
Advanced tools
Readme
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!)
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:
See https://deepakaggarwal7.github.io/react-social-login.
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.
$ 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 }
</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')
)
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 |
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:
Demo
is displaying UserCard
only if user is loggedUserCard
gets forwarded a logout
functionUserCard
calls forwarded logout
prop on click on the logout buttonlogout
function triggers triggerLogout
prop from a ref to SocialLogin componentWe 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.
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:
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
).
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
TBD
FAQs
React Component for Login via Social Providers
The npm package @1nd/react-social-login receives a total of 4 weekly downloads. As such, @1nd/react-social-login popularity was classified as not popular.
We found that @1nd/react-social-login demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.