Package Health Score

60 / 100

security
No known security issues
popularity
Small
maintenance
Inactive
community
Active

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

Version				Vulnerabilities	License Risk
2.6.3	\|	08/2023	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.5.6	\|	08/2022		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.5.2	\|	09/2021		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.4.2	\|	09/2021		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.3.3	\|	07/2021		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Small

Weekly Downloads (7,730)

GitHub Stars: 173
Forks: 76
Contributors: 8

Direct Usage Popularity

The npm package reactjs-social-login receives a total of 7,730 downloads a week. As such, we scored reactjs-social-login popularity level to be Small.

Based on project statistics from the GitHub repository for the npm package reactjs-social-login, we found that it has been starred 173 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Active

Readme.md: Yes
Contributing.md: Yes
Code of Conduct: Yes
Contributors: 8
Funding: No

This project has seen only 10 or less contributors.

Embed Package Health Score Badge

Maintenance

Inactive

Commit Frequency

No Recent Commits

Open Issues: 28
Open PR: 10
Last Release: 1 year ago
Last Commit: 1 year ago

Further analysis of the maintenance status of reactjs-social-login based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for reactjs-social-login is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: >=10

Age: 4 years
Dependencies: 0 Direct
Versions: 42
Install Size: 153 kB
Dist-tags: 1
# of Files: 20
Maintainers: 1
TS Typings: Yes

reactjs-social-login has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

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!)

Install

npm install --save reactjs-social-login

Demo

Online Demo

Example code

Code Demo

Contribute / Testing

Clone project, open terminal and type these commands

npm install

npm run start

then go to directory /example, add .env.development by following format

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

npm run start

You can then view the demo at .

How to use

Typescript Version

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 = () =&gt; {
  const [provider, setProvider] = useState('')
  const [profile, setProfile] = useState()

  const onLoginStart = useCallback(() =&gt; {
    alert('login start')
  }, [])

  const onLogoutSuccess = useCallback(() =&gt; {
    setProfile(null)
    setProvider('')
    alert('logout success')
  }, [])

  return (
    &lt;&gt;
      {provider &amp;&amp; profile ? (
        
      ) : (
        <div>
          <h1>ReactJS Social Login</h1>
           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) =&gt; {
              console.log(err)
            }}
          &gt;
            
          

           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) =&gt; {
              console.log(err)
            }}
          &gt;
            
          

           {
              setProvider(provider);
              setProfile(data);
            }}
            onReject={err =&gt; {
              console.log(err);
            }}
          &gt;
            
          

           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err: any) =&gt; {
              console.log(err)
            }}
            onLoginStart={onLoginStart}
          &gt;
            
          

           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err: any) =&gt; {
              console.log(err)
            }}
          &gt;
            
          

           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err: any) =&gt; {
              console.log(err)
            }}
          &gt;
            
          

           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err: any) =&gt; {
              console.log(err)
            }}
          &gt;
            
          

           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err: any) =&gt; {
              console.log(err)
            }}
          &gt;
            
          
           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err: any) =&gt; {
              console.log(err)
            }}
            className='pinterest-btn'
          &gt;
            <div>
              <div>
                
              </div>
              <span>Login With Pinterest</span>
            </div>
          

           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err: any) =&gt; {
              console.log(err)
            }}
          &gt;
            
          

           {
              setProvider(provider);
              setProfile(data);
            }}
            onReject={(err) =&gt; {
              console.log(err);
            }}
            className="pinterest-btn"
          &gt;
            <div>
              <div>
                
              </div>
              <span>Login With Tiktok</span>
            </div>
          
        </div>
      )}
    
  )
}

export default App

JavaScript Version

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 = () =&gt; {
  const [provider, setProvider] = useState('')
  const [profile, setProfile] = useState(null)

  const onLoginStart = useCallback(() =&gt; {
    alert('login start')
  }, [])

  const onLogoutSuccess = useCallback(() =&gt; {
    setProfile(null)
    setProvider('')
    alert('logout success')
  }, [])

  return (
    &lt;&gt;
      {provider &amp;&amp; profile ? (
        
      ) : (
        <div>
          <h1>ReactJS Social Login</h1>
           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) =&gt; {
              console.log(err)
            }}
          &gt;
            
          

           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) =&gt; {
              console.log(err)
            }}
          &gt;
            
          

           {
              setProvider(provider);
              setProfile(data);
            }}
            onReject={err =&gt; {
              console.log(err);
            }}
          &gt;
            
          

           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) =&gt; {
              console.log(err)
            }}
            onLoginStart={onLoginStart}
          &gt;
            
          

           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) =&gt; {
              console.log(err)
            }}
          &gt;
            
          

           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) =&gt; {
              console.log(err)
            }}
          &gt;
            
          

           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) =&gt; {
              console.log(err)
            }}
          &gt;
            
          

           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) =&gt; {
              console.log(err)
            }}
          &gt;
            
          

           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) =&gt; {
              console.log(err)
            }}
            className='pinterest-btn'
          &gt;
            <div>
              <div>
                
              </div>
              <span>Login With Pinterest</span>
            </div>
          

           {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) =&gt; {
              console.log(err)
            }}
          &gt;
            
          

           {
              setProvider(provider);
              setProfile(data);
            }}
            onReject={(err) =&gt; {
              console.log(err);
            }}
            className="pinterest-btn"
          &gt;
            <div>
              <div>
                
              </div>
              <span>Login With Tiktok</span>
            </div>
          
        </div>
      )}
    
  )
}

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...

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
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...

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...

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...

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...

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...

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...

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...

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...

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...

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...

How get client_id, client_secret_id

> Create application developer and you can get detail id & secret_id on these link

License

FAQs

What is reactjs-social-login?

Group social login for ReactJS. Visit Snyk Advisor to see a full health score report for reactjs-social-login, including popularity, security, maintenance & community analysis.

Is reactjs-social-login popular?

The npm package reactjs-social-login receives a total of 7,730 weekly downloads. As such, reactjs-social-login popularity was classified as small. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is reactjs-social-login well maintained?

We found indications that reactjs-social-login is an Inactive project. See the full package health analysis to learn more about the package maintenance status.

Is reactjs-social-login safe to use?

The npm package reactjs-social-login was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 16 November-2024, at 04:22 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (7,730)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

reactjs-social-login

Currently supports Amazon, Facebook, GitHub, Google, Instagram, Linkedin, Pinterest, Twitter, Microsoft, Apple, Tiktok as providers (more to come!)

Install

Demo

Example code

Contribute / Testing

How to use

1. Google Props

2. Facebook Props

3. Microsoft Props

4. Amazon Props

5. Instagram Props

6. Linkedin Props

7. Github Props

8. Pinterest Props

9. Twitter Props

10. Apple Props

11. Tiktok Props

How get client_id, client_secret_id

License