https://github.com/cuongdevjs/reactjs-social-login
Group Hook ReactJS components for login social network
https://github.com/cuongdevjs/reactjs-social-login
amazon apple apple-login facebook github google instagram linkedin login microsoft oauth pinterest react reactjs single-sign-on social-login social-network sso twitter
Last synced: 4 months ago
JSON representation
Group Hook ReactJS components for login social network
- Host: GitHub
- URL: https://github.com/cuongdevjs/reactjs-social-login
- Owner: cuongdevjs
- License: mit
- Created: 2020-12-13T16:01:39.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-29T06:46:05.000Z (over 1 year ago)
- Last Synced: 2025-09-11T08:10:52.929Z (4 months ago)
- Topics: amazon, apple, apple-login, facebook, github, google, instagram, linkedin, login, microsoft, oauth, pinterest, react, reactjs, single-sign-on, social-login, social-network, sso, twitter
- Language: TypeScript
- Homepage: https://react-social-login.netlify.app
- Size: 81.6 MB
- Stars: 181
- Watchers: 5
- Forks: 83
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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.
## **Currently supports Amazon, Facebook, GitHub, Google, Instagram, Linkedin, Pinterest, Twitter, Microsoft, Apple, Tiktok as providers (more to come!)**
[](https://www.npmjs.com/package/reactjs-social-login)
[](https://www.npmjs.com/package/reactjs-social-login)
[](http://nodejs.org/download/)
[](https://www.npmjs.com/package/reactjs-social-login)
[](https://standardjs.com)
## Install
```bash
npm install --save reactjs-social-login
```
## Demo
[Online Demo](https://react-social-login.netlify.app)
## Example code
[Code Demo](https://github.com/cuongdevjs/reactjs-social-login/blob/master/example/src/App.tsx)
## Contribute / Testing
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 .
## How to use
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
{
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
{
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
{
setProvider(provider);
setProfile(data);
}}
onReject={err => {
console.log(err);
}}
>
{
setProvider(provider)
setProfile(data)
}}
onReject={(err: any) => {
console.log(err)
}}
onLoginStart={onLoginStart}
>
{
setProvider(provider)
setProfile(data)
}}
onReject={(err: any) => {
console.log(err)
}}
>
{
setProvider(provider)
setProfile(data)
}}
onReject={(err: any) => {
console.log(err)
}}
>
{
setProvider(provider)
setProfile(data)
}}
onReject={(err: any) => {
console.log(err)
}}
>
{
setProvider(provider)
setProfile(data)
}}
onReject={(err: any) => {
console.log(err)
}}
>
{
setProvider(provider)
setProfile(data)
}}
onReject={(err: any) => {
console.log(err)
}}
className='pinterest-btn'
>
Login With Pinterest
{
setProvider(provider)
setProfile(data)
}}
onReject={(err: any) => {
console.log(err)
}}
>
{
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
{
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
{
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
{
setProvider(provider);
setProfile(data);
}}
onReject={err => {
console.log(err);
}}
>
{
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
onLoginStart={onLoginStart}
>
{
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
{
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
{
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
{
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
{
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
className='pinterest-btn'
>
Login With Pinterest
{
setProvider(provider)
setProfile(data)
}}
onReject={(err) => {
console.log(err)
}}
>
{
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
### 1. Google Props
| Prop | Type | Default | Description |
| :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------- |
| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info & access_token,...) |
| onReject | `function(err) { // } (required)` | `-` | Return error |
| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |
| client_id | `string (required)` | `-` | ID application |
| typeResponse | `accessToken / idToken (optional)` | `accessToken` | whether get idToken or accessToken |
| auto_select | `boolean (optional)` | `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 |
| scope | `string (optional)` | `https://www.googleapis.com/auth/userinfo.profile` | Scope application |
| className | `string (optional)` | `-` | Class container |
| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |
| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialGoogle/index.tsx#L11) |
### 2. Facebook Props
| Prop | Type | Default | Description |
| :------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :------------------------------------------------------------------------------------: | :---------------------------------------------------------------- |
| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info & access_token,...) |
| onReject | `function(err) { // } (required)` | `-` | Return error |
| appId | `string (required)` | `-` | ID application |
| fields | `string (optional)` | `id,first_name,last_name,middle_name,name,name_format,picture,short_name,email,gender` | User's fields |
| onLoginStart | `function() { // } (optional)` | `-` | Called when click login | className | `string (optional)` | `-` | Class for button |
| scope | `string (optional)` | `email,public_profile` | Scope application |
| className | `string (optional)` | `-` | Class container |
| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |
| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialFacebook/index.tsx#L10) |
### 3. Microsoft Props
| Prop | Type | Default | Description |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :--------------------: | :---------------------------------------------------------------- |
| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info & access_token,...) |
| onReject | `function(err) { // } (required)` | `-` | Return error |
| client_id | `string (required)` | `-` | ID application |
| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |
| scope | `string (optional)` | `profile openid email` | Scope application |
| className | `string (optional)` | `-` | Class for button |
| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |
| isOnlyGetCode | `boolean (optional)` | `false` | Only get code without access_token (server-side) |
| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialMicrosoft/index.tsx#L10) |
### 4. Amazon Props
| Prop | Type | Default | Description |
| :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :-------: | :---------------------------------------------------------------- |
| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info & access_token,...) |
| onReject | `function(err) { // } (required)` | `-` | Return error |
| client_id | `string (required)` | `-` | ID application |
| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |
| scope | `string (optional)` | `profile` | Scope application |
| className | `string (optional)` | `-` | Class for button |
| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |
| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialAmazon/index.tsx#L10) |
### 5. Instagram Props
| Prop | Type | Default | Description |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :------------------------------------: | :---------------------------------------------------------------- |
| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info & access_token,...) |
| onReject | `function(err) { // } (required)` | `-` | Return error |
| client_id | `string (required)` | `-` | App ID application |
| client_secret | `string (required)` | `-` | App Secret application |
| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |
| scope | `string (optional)` | `user_profile,user_media` | Scope application |
| fields | `string (optional)` | `id,username,account_type,media_count` | Fields return |
| className | `string (optional)` | `-` | Class for button |
| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |
| isOnlyGetCode | `boolean (optional)` | `false` | Only get code without access_token (server-side) |
| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialInstagram/index.tsx#L11) |
### 6. Linkedin Props
| Prop | Type | Default | Description |
| :------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :-------------: | :---------------------------------------------------------------- |
| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info & access_token,...) |
| onReject | `function(err) { // } (required)` | `-` | Return error |
| client_id | `string (required)` | `-` | App ID application |
| client_secret | `string (required)` | `-` | App Secret application |
| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |
| scope | `string (optional)` | `r_liteprofile` | Scope application |
| className | `string (optional)` | `-` | Class for button |
| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |
| isOnlyGetCode | `boolean (optional)` | `false` | Only get code without access_token (server-side) |
| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialLinkedin/index.tsx#L11) |
### 7. Github Props
| Prop | Type | Default | Description |
| :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :---------: | :---------------------------------------------------------------- |
| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info & access_token,...) |
| onReject | `function(err) { // } (required)` | `-` | Return error |
| client_id | `string (required)` | `-` | App ID application |
| client_secret | `string (required)` | `-` | Secret ID application |
| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |
| scope | `string (optional)` | `repo,gist` | Scope application |
| className | `string (optional)` | `-` | Class for button |
| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |
| isOnlyGetCode | `boolean (optional)` | `false` | Only get code without access_token (server-side) |
| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialGithub/index.tsx#L11) |
### 8. Pinterest Props
| Prop | Type | Default | Description |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :-----: | :---------------------------------------------------------------- |
| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info & access_token,...) |
| onReject | `function(err) { // } (required)` | `-` | Return error |
| client_id | `string (required)` | `-` | App ID application |
| client_secret | `string (required)` | `-` | Secret ID application |
| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |
| scope | `string (optional)` | `-` | Scope application |
| className | `string (optional)` | `-` | Class for button |
| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |
| isOnlyGetCode | `boolean (optional)` | `false` | Only get code without access_token (server-side) |
| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialPinterest/index.tsx#L11) |
### 9. Twitter Props
| Prop | Type | Default | Description |
| :------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------- |
| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info & access_token,...) |
| onReject | `function(err) { // } (required)` | `-` | Return error |
| client_id | `string (required)` | `-` | API Key |
| fields | `string (optional)` | `created_at,description,entities,id,location,name,pinned_tweet_id,profile_image_url,protected,public_metrics,url,username,verified,withheld` | User's fields |
| state | `string (optional)` | `state` | A random string you provide to verify against CSRF attacks. |
| scope | `string (optional)` | `users.read%20tweet.read` | Application's scope |
| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |
| className | `string (optional)` | `-` | Class for button |
| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |
| isOnlyGetCode | `boolean (optional)` | `false` | Only get code without access_token (server-side) |
| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialTwitter/index.tsx#L12) |
### 10. Apple Props
| Prop | Type | Default | Description |
| :---------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :----------: | :---------------------------------------------------------------- |
| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info & access_token,...) |
| onReject | `function(err) { // } (required)` | `-` | Return error |
| client_id | `string (required)` | `-` | API Key |
| scope | `string (optional)` | `name email` | Application's scope |
| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |
| className | `string (optional)` | `-` | Class for button |
| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialApple/index.tsx#L10) |
### 11. Tiktok Props
| Prop | Type | Default | Description |
| :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :----------: | :---------------------------------------------------------------- |
| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info & access_token,...) |
| onReject | `function(err) { // } (required)` | `-` | Return error |
| client_key | `string (required)` | `-` | API Key |
| scope | `string (optional)` | `name email` | Application's scope |
| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |
| className | `string (optional)` | `-` | Class for button |
| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialTiktok/index.tsx#L11) |
### How get client_id, client_secret_id
> Create application developer and you can get detail id & secret_id on these link
1. [Facebook](https://developers.facebook.com/apps/)
2. [Instagram](https://developers.facebook.com/apps/)
3. [Github](https://github.com/settings/developers)
4. [Linkedin](https://www.linkedin.com/developers/apps/)
5. [Google](https://console.developers.google.com/apis/credentials)
6. [Microsoft](https://portal.azure.com/)
7. [Amazon](https://developer.amazon.com/loginwithamazon/console/site/lwa/overview.html)
8. [Pinterest](https://developers.pinterest.com/docs/api/v5/)
9. [Twitter](https://developer.twitter.com/en/docs/authentication/)
10. [Apple](https://developer.apple.com/account/resources/)
11. [Tiktok](https://developers.tiktok.com/apps/)
## License
MIT © [Nguyen-Manh-Cuong](https://github.com/cuongdevjs )