Not at npm registry yet
GitHub
LinkedIn
Google
Facebook
import React, { useEffect } from 'react';
import { render } from 'react-dom';
import {
handleRedirect as handleSocialRedirect,
handleSocialLogin as useSocialLogin,
} from '../src';
const onSuccess = (response) => console.log(response);
const onFailure = (response) => console.error(response);
export function App() {
useEffect(() => {
handleSocialRedirect();
}, []);
const handleGithub = useSocialLogin({
provider: 'github',
clientId: 'YOUR_GITHUB_CLIENT_ID',
onSuccess,
onFailure,
});
const handleLinkedin = useSocialLogin({
provider: 'linkedin',
clientId: 'YOUR_LINKEDIN_CLIENT_ID',
redirectUri: window.location.origin,
onSuccess,
onFailure,
});
const handleGoogle = useSocialLogin({
provider: 'google',
clientId: 'YOUR_GOOGLE_CLIENT_ID',
redirectUri: window.location.origin,
onSuccess,
onFailure,
});
const handleFacebook = useSocialLogin({
provider: 'facebook',
clientId: 'YOUR_FACEBOOK_CLIENT_ID',
redirectUri: window.location.origin,
onSuccess,
onFailure,
});
return (
<>
<button onClick={handleGithub}>Sign in with GitHub</button>
<button onClick={handleLinkedin}>Sign in with LinkedIn</button>
<button onClick={handleGoogle}>Sign in with Google</button>
<button onClick={handleFacebook}>Sign in with Facebook</button>
</>
);
}
render(<App />, document.getElementById('example'));
{string}
required
Client ID for GitHub OAuth application.
{string}
Registered redirect URI for GitHub OAuth application.
{string}
Scope for GitHub OAuth application. Defaults to user:email
.
{string}
CSS class for the login button.
{node}
Content for the login button.
{function}
Callback for every request.
{function}
Callback for successful login. An object will be passed as an argument to the callback, e.g. { "code": "..." }
.
{function}
Callback for errors raised during login.
$ npm start
-
Get code
-
Exchage code for token
POST https://www.linkedin.com/oauth/v2/accessToken
Params:
{client_id}
{client_secret}
{code}
{redirect_uri}
{grant_type}
= authorization_code
- Get profile
GET https://api.linkedin.com/v2/me
Headers:
{Authorization}
= Bearer {access_token}
-
Get code
-
Exchage code for token
GET https://graph.facebook.com/v10.0/oauth/access_token
Params:
{client_id}
{client_secret}
{code}
{redirect_uri}
- Get profile
GET https://graph.facebook.com/me
Params:
{fields}
= id,name,email,picture.type(large)
{access_token}
-
Get code
-
Exchage code for token
POST https://oauth2.googleapis.com/token
Params:
{client_id}
{client_secret}
{code}
{redirect_uri}
{grant_type}
= authorization_code
- Get profile
GET https://www.googleapis.com/oauth2/v1/userinfo
Params:
{alt}
= json
{access_token}