Group social login for ReactJS
npm install reactjs-social-login> Group social login for ReactJS
>
> 1. Facebook
> 2. Google
> 3. Linkedin
> 4. Github
> 5. Microsoft
> 6. Amazon
> 7. Instagram
> 8. Pinterest
> 9. Twitter
> 10. Apple
> 11. Tiktok
This repository is all in one, includes multiple platform for social login, is written by TypeScript and React Hooks, tree-shakeable, zero dependencies, extremely lightweight.
You can customize any style UI as you like.
Reactjs Social Login is an HOC which provides social login through multiple providers.
``bash`
npm install --save reactjs-social-login
Clone project, open terminal and type these commands
`bash`
npm install
`bash`
npm run start
then go to directory /example, add .env.development by following format
``bash``
NODE_ENV=development
REACT_APP_FB_APP_ID=
REACT_APP_GG_APP_ID=
REACT_APP_AMAZON_APP_ID=
REACT_APP_INSTAGRAM_APP_ID=
REACT_APP_INSTAGRAM_APP_SECRET=
REACT_APP_MICROSOFT_APP_ID=
REACT_APP_LINKEDIN_APP_SECRET=
REACT_APP_LINKEDIN_APP_ID=
REACT_APP_GITHUB_APP_ID=
REACT_APP_GITHUB_APP_SECRET=
REACT_APP_PINTEREST_APP_ID=
REACT_APP_PINTEREST_APP_SECRET=
REACT_APP_TWITTER_APP_ID=
REACT_APP_TWITTER_V2_APP_KEY=
REACT_APP_TWITTER_V2_APP_SECRET=
REACT_APP_APPLE_ID=
REACT_APP_TIKTOK_CLIENT_KEY=
and on directory /example, then open another terminal, type these commands
`shell`
npm run start
You can then view the demo at
Typescript Version
``tsx
import React, { useCallback, useState } from 'react'
import './app.css'
import { User } from './User' // component display user (see detail on /example directory)
import {
LoginSocialGoogle,
LoginSocialAmazon,
LoginSocialFacebook,
LoginSocialGithub,
LoginSocialInstagram,
LoginSocialLinkedin,
LoginSocialMicrosoft,
LoginSocialPinterest,
LoginSocialTwitter,
LoginSocialApple,
LoginSocialTiktok,
IResolveParams,
} from 'reactjs-social-login'
// CUSTOMIZE ANY UI BUTTON
import {
FacebookLoginButton,
GoogleLoginButton,
GithubLoginButton,
AmazonLoginButton,
InstagramLoginButton,
LinkedInLoginButton,
MicrosoftLoginButton,
TwitterLoginButton,
AppleLoginButton,
} from 'react-social-login-buttons'
import { ReactComponent as PinterestLogo } from './assets/pinterest.svg'
import { ReactComponent as TiktokLogo } from './assets/tiktok.svg'
// REDIRECT URL must be same with URL where the (reactjs-social-login) components is locate
// MAKE SURE the (reactjs-social-login) components aren't unmounted or destroyed before the ask permission dialog closes
const REDIRECT_URI = window.location.href;
const App = () => {
const [provider, setProvider] = useState('')
const [profile, setProfile] = useState
const onLoginStart = useCallback(() => {
alert('login start')
}, [])
const onLogoutSuccess = useCallback(() => {
setProfile(null)
setProvider('')
alert('logout success')
}, [])
return (
<>
{provider && profile ? (
) : (
}>
ReactJS Social Login
appId={process.env.REACT_APP_FB_APP_ID || ''}
onLoginStart={onLoginStart}
onResolve={({ provider, data }: IResolveParams) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
client_id={process.env.REACT_APP_GG_APP_ID || ''}
onLoginStart={onLoginStart}
onResolve={({ provider, data }: IResolveParams) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
scope={'name email'}
redirect_uri={REDIRECT_URI}
onLoginStart={onLoginStart}
onResolve={({ provider, data }: IResolveParams) => {
setProvider(provider);
setProfile(data);
}}
onReject={err => {
console.log(err);
}}
>
client_id={process.env.REACT_APP_AMAZON_APP_ID || ''}
redirect_uri={REDIRECT_URI}
onResolve={({ provider, data }: IResolveParams) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err: any) => {
console.log(err)
}}
onLoginStart={onLoginStart}
>
client_id={process.env.REACT_APP_INSTAGRAM_APP_ID || ''}
client_secret={process.env.REACT_APP_INSTAGRAM_APP_SECRET || ''}
redirect_uri={REDIRECT_URI}
onLoginStart={onLoginStart}
onResolve={({ provider, data }: IResolveParams) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err: any) => {
console.log(err)
}}
>
client_id={process.env.REACT_APP_MICROSOFT_APP_ID || ''}
redirect_uri={REDIRECT_URI}
onLoginStart={onLoginStart}
onResolve={({ provider, data }: IResolveParams) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err: any) => {
console.log(err)
}}
>
client_id={process.env.REACT_APP_LINKEDIN_APP_ID || ''}
client_secret={process.env.REACT_APP_LINKEDIN_APP_SECRET || ''}
redirect_uri={REDIRECT_URI}
onLoginStart={onLoginStart}
onResolve={({ provider, data }: IResolveParams) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err: any) => {
console.log(err)
}}
>
client_id={process.env.REACT_APP_GITHUB_APP_ID || ''}
client_secret={process.env.REACT_APP_GITHUB_APP_SECRET || ''}
redirect_uri={REDIRECT_URI}
onLoginStart={onLoginStart}
onResolve={({ provider, data }: IResolveParams) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err: any) => {
console.log(err)
}}
>
client_id={process.env.REACT_APP_PINTEREST_APP_ID || ''}
client_secret={process.env.REACT_APP_PINTEREST_APP_SECRET || ''}
redirect_uri={REDIRECT_URI}
onLoginStart={onLoginStart}
onResolve={({ provider, data }: IResolveParams) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err: any) => {
console.log(err)
}}
className='pinterest-btn'
>
Login With Pinterest
client_id={process.env.REACT_APP_TWITTER_V2_APP_KEY || ''}
redirect_uri={REDIRECT_URI}
onLoginStart={onLoginStart}
onResolve={({ provider, data }: IResolveParams) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err: any) => {
console.log(err)
}}
>
redirect_uri={REDIRECT_URI}
onLoginStart={onLoginStart}
onResolve={({ provider, data }) => {
setProvider(provider);
setProfile(data);
}}
onReject={(err) => {
console.log(err);
}}
className="pinterest-btn"
>
Login With Tiktok
export default App
``
JavaScript Version
``jsx
import React, { useCallback, useState } from 'react'
import './app.css'
import { User } from './User' // component display user (see detail on /example directory)
import {
LoginSocialGoogle,
LoginSocialAmazon,
LoginSocialFacebook,
LoginSocialGithub,
LoginSocialInstagram,
LoginSocialLinkedin,
LoginSocialMicrosoft,
LoginSocialPinterest,
LoginSocialTwitter,
LoginSocialApple,
LoginSocialTiktok,
} from 'reactjs-social-login'
// CUSTOMIZE ANY UI BUTTON
import {
FacebookLoginButton,
GoogleLoginButton,
GithubLoginButton,
AmazonLoginButton,
InstagramLoginButton,
LinkedInLoginButton,
MicrosoftLoginButton,
TwitterLoginButton,
AppleLoginButton,
} from 'react-social-login-buttons'
import { ReactComponent as PinterestLogo } from './assets/pinterest.svg'
import { ReactComponent as TiktokLogo } from './assets/tiktok.svg'
// REDIRECT URL must be same with URL where the (reactjs-social-login) components is locate
// MAKE SURE the (reactjs-social-login) components aren't unmounted or destroyed before the ask permission dialog closes
const REDIRECT_URI = window.location.href;
const App = () => {
const [provider, setProvider] = useState('')
const [profile, setProfile] = useState(null)
const onLoginStart = useCallback(() => {
alert('login start')
}, [])
const onLogoutSuccess = useCallback(() => {
setProfile(null)
setProvider('')
alert('logout success')
}, [])
return (
<>
{provider && profile ? (
) : (
}>
ReactJS Social Login
appId={process.env.REACT_APP_FB_APP_ID || ''}
onLoginStart={onLoginStart}
onResolve={({ provider, data }) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
client_id={process.env.REACT_APP_GG_APP_ID || ''}
onLoginStart={onLoginStart}
onResolve={({ provider, data }) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
scope={'name email'}
redirect_uri={REDIRECT_URI}
onLoginStart={onLoginStart}
onResolve={({ provider, data }) => {
setProvider(provider);
setProfile(data);
}}
onReject={err => {
console.log(err);
}}
>
client_id={process.env.REACT_APP_AMAZON_APP_ID || ''}
redirect_uri={REDIRECT_URI}
onResolve={({ provider, data }) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
onLoginStart={onLoginStart}
>
client_id={process.env.REACT_APP_INSTAGRAM_APP_ID || ''}
client_secret={process.env.REACT_APP_INSTAGRAM_APP_SECRET || ''}
redirect_uri={REDIRECT_URI}
onLoginStart={onLoginStart}
onResolve={({ provider, data }) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
client_id={process.env.REACT_APP_MICROSOFT_APP_ID || ''}
redirect_uri={REDIRECT_URI}
onLoginStart={onLoginStart}
onResolve={({ provider, data }) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
client_id={process.env.REACT_APP_LINKEDIN_APP_ID || ''}
client_secret={process.env.REACT_APP_LINKEDIN_APP_SECRET || ''}
redirect_uri={REDIRECT_URI}
onLoginStart={onLoginStart}
onResolve={({ provider, data }) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
client_id={process.env.REACT_APP_GITHUB_APP_ID || ''}
client_secret={process.env.REACT_APP_GITHUB_APP_SECRET || ''}
redirect_uri={REDIRECT_URI}
onLoginStart={onLoginStart}
onResolve={({ provider, data }) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
client_id={process.env.REACT_APP_PINTEREST_APP_ID || ''}
client_secret={process.env.REACT_APP_PINTEREST_APP_SECRET || ''}
redirect_uri={REDIRECT_URI}
onLoginStart={onLoginStart}
onResolve={({ provider, data }) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
className='pinterest-btn'
>
Login With Pinterest
client_id={process.env.REACT_APP_TWITTER_V2_APP_KEY || ''}
redirect_uri={REDIRECT_URI}
onLoginStart={onLoginStart}
onResolve={({ provider, data }) => {
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
redirect_uri={REDIRECT_URI}
onLoginStart={onLoginStart}
onResolve={({ provider, data }) => {
setProvider(provider);
setProfile(data);
}}
onReject={(err) => {
console.log(err);
}}
className="pinterest-btn"
>
Login With Tiktok
export default App
``
> ### Loading more information like: user info, access_token on client side is discouraged and causes slow response, this should be done on server side, you can pass suggestion isOnlyGetCode={true} if you just want the code and don't need the access_token or isOnlyGetToken={true} if you just want the access_token and don't need the user's profile
| Prop | Type | Default | Description |
| :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------- |
| onResolve | function({provider, data}) { // } (required) | - | Return provider and data (include user's info & access_token,...) |function(err) { // } (required)
| onReject | | - | Return error |function() { // } (optional)
| onLoginStart | | - | Called when click login |string (required)
| client_id | | - | ID application |accessToken / idToken (optional)
| typeResponse | | accessToken | whether get idToken or accessToken |boolean (optional)
| auto_select | | false | if an ID token is automatically returned without any user interaction when there's only one Google session that has approved your app before |string (optional)
| scope | | https://www.googleapis.com/auth/userinfo.profile | Scope application |string (optional)
| className | | - | Class container |boolean (optional)
| isOnlyGetToken | | false | Only get access_token without get user's info (server-side) |
| other_props... |
| Prop | Type | Default | Description |
| :------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :------------------------------------------------------------------------------------: | :---------------------------------------------------------------- |
| onResolve | function({provider, data}) { // } (required) | - | Return provider and data (include user's info & access_token,...) |function(err) { // } (required)
| onReject | | - | Return error |string (required)
| appId | | - | ID application |string (optional)
| fields | | id,first_name,last_name,middle_name,name,name_format,picture,short_name,email,gender | User's fields |function() { // } (optional)
| onLoginStart | | - | Called when click login | className | string (optional) | - | Class for button |string (optional)
| scope | | email,public_profile | Scope application |string (optional)
| className | | - | Class container |boolean (optional)
| isOnlyGetToken | | false | Only get access_token without get user's info (server-side) |
| other_props... |
| Prop | Type | Default | Description |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :--------------------: | :---------------------------------------------------------------- |
| onResolve | function({provider, data}) { // } (required) | - | Return provider and data (include user's info & access_token,...) |function(err) { // } (required)
| onReject | | - | Return error |string (required)
| client_id | | - | ID application |function() { // } (optional)
| onLoginStart | | - | Called when click login |string (optional)
| scope | | profile openid email | Scope application |string (optional)
| className | | - | Class for button |boolean (optional)
| isOnlyGetToken | | false | Only get access_token without get user's info (server-side) |boolean (optional)
| isOnlyGetCode | | false | Only get code without access_token (server-side) |
| other_props... |
| Prop | Type | Default | Description |
| :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :-------: | :---------------------------------------------------------------- |
| onResolve | function({provider, data}) { // } (required) | - | Return provider and data (include user's info & access_token,...) |function(err) { // } (required)
| onReject | | - | Return error |string (required)
| client_id | | - | ID application |function() { // } (optional)
| onLoginStart | | - | Called when click login |string (optional)
| scope | | profile | Scope application |string (optional)
| className | | - | Class for button |boolean (optional)
| isOnlyGetToken | | false | Only get access_token without get user's info (server-side) |
| other_props... |
| Prop | Type | Default | Description |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :------------------------------------: | :---------------------------------------------------------------- |
| onResolve | function({provider, data}) { // } (required) | - | Return provider and data (include user's info & access_token,...) |function(err) { // } (required)
| onReject | | - | Return error |string (required)
| client_id | | - | App ID application |string (required)
| client_secret | | - | App Secret application |function() { // } (optional)
| onLoginStart | | - | Called when click login |string (optional)
| scope | | user_profile,user_media | Scope application |string (optional)
| fields | | id,username,account_type,media_count | Fields return |string (optional)
| className | | - | Class for button |boolean (optional)
| isOnlyGetToken | | false | Only get access_token without get user's info (server-side) |boolean (optional)
| isOnlyGetCode | | false | Only get code without access_token (server-side) |
| other_props... |
| Prop | Type | Default | Description |
| :------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :-------------: | :---------------------------------------------------------------- |
| onResolve | function({provider, data}) { // } (required) | - | Return provider and data (include user's info & access_token,...) |function(err) { // } (required)
| onReject | | - | Return error |string (required)
| client_id | | - | App ID application |string (required)
| client_secret | | - | App Secret application |function() { // } (optional)
| onLoginStart | | - | Called when click login |string (optional)
| scope | | r_liteprofile | Scope application |string (optional)
| className | | - | Class for button |boolean (optional)
| isOnlyGetToken | | false | Only get access_token without get user's info (server-side) |boolean (optional)
| isOnlyGetCode | | false | Only get code without access_token (server-side) |
| other_props... |
| Prop | Type | Default | Description |
| :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :---------: | :---------------------------------------------------------------- |
| onResolve | function({provider, data}) { // } (required) | - | Return provider and data (include user's info & access_token,...) |function(err) { // } (required)
| onReject | | - | Return error |string (required)
| client_id | | - | App ID application |string (required)
| client_secret | | - | Secret ID application |function() { // } (optional)
| onLoginStart | | - | Called when click login |string (optional)
| scope | | repo,gist | Scope application |string (optional)
| className | | - | Class for button |boolean (optional)
| isOnlyGetToken | | false | Only get access_token without get user's info (server-side) |boolean (optional)
| isOnlyGetCode | | false | Only get code without access_token (server-side) |
| other_props... |
| Prop | Type | Default | Description |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :-----: | :---------------------------------------------------------------- |
| onResolve | function({provider, data}) { // } (required) | - | Return provider and data (include user's info & access_token,...) |function(err) { // } (required)
| onReject | | - | Return error |string (required)
| client_id | | - | App ID application |string (required)
| client_secret | | - | Secret ID application |function() { // } (optional)
| onLoginStart | | - | Called when click login |string (optional)
| scope | | - | Scope application |string (optional)
| className | | - | Class for button |boolean (optional)
| isOnlyGetToken | | false | Only get access_token without get user's info (server-side) |boolean (optional)
| isOnlyGetCode | | false | Only get code without access_token (server-side) |
| other_props... |
| Prop | Type | Default | Description |
| :------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------- |
| onResolve | function({provider, data}) { // } (required) | - | Return provider and data (include user's info & access_token,...) |function(err) { // } (required)
| onReject | | - | Return error |string (required)
| client_id | | - | API Key |string (optional)
| fields | | created_at,description,entities,id,location,name,pinned_tweet_id,profile_image_url,protected,public_metrics,url,username,verified,withheld | User's fields |string (optional)
| state | | state | A random string you provide to verify against CSRF attacks. |string (optional)
| scope | | users.read%20tweet.read | Application's scope |function() { // } (optional)
| onLoginStart | | - | Called when click login |string (optional)
| className | | - | Class for button |boolean (optional)
| isOnlyGetToken | | false | Only get access_token without get user's info (server-side) |boolean (optional)
| isOnlyGetCode | | false | Only get code without access_token (server-side) |
| other_props... |
| Prop | Type | Default | Description |
| :---------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :----------: | :---------------------------------------------------------------- |
| onResolve | function({provider, data}) { // } (required) | - | Return provider and data (include user's info & access_token,...) |function(err) { // } (required)
| onReject | | - | Return error |string (required)
| client_id | | - | API Key |string (optional)
| scope | | name email | Application's scope |function() { // } (optional)
| onLoginStart | | - | Called when click login |string (optional)
| className | | - | Class for button |
| other_props... |
| Prop | Type | Default | Description |
| :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :----------: | :---------------------------------------------------------------- |
| onResolve | function({provider, data}) { // } (required) | - | Return provider and data (include user's info & access_token,...) |function(err) { // } (required)
| onReject | | - | Return error |string (required)
| client_key | | - | API Key |string (optional)
| scope | | name email | Application's scope |function() { // } (optional)
| onLoginStart | | - | Called when click login |string (optional)
| className | | -` | Class for button |
| other_props... |
> Create application developer and you can get detail id & secret_id on these link
1. Facebook
2. Instagram
3. Github
4. Linkedin
5. Google
6. Microsoft
7. Amazon
8. Pinterest
9. Twitter
10. Apple
11. Tiktok
MIT © Nguyen-Manh-Cuong