reactjs-social-login

Group social login for ReactJS

Facebook

Google

Linkedin

Github

Microsoft

Amazon

Instagram

Pinterest

Twitter

This repository 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 as providers (more to come!)

Install

npm install --save reactjs-social-login

Demo

Online Demo

Example code

Code Demo

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_API_KEY=
REACT_APP_TWITTER_APP_SECRET=
REACT_APP_TWITTER_TOKEN=

and on directory /example, then open other terminal, type these commands

npm run start

You can then view the demo at [https://localhost:3000][demo].

Usage

import React, { useCallback, useRef, 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,
  IResolveParams,
  TypeCrossFunction
} from 'reactjs-social-login'

// CUSTOMIZE ANY UI BUTTON
import {
  FacebookLoginButton,
  GoogleLoginButton,
  GithubLoginButton,
  AmazonLoginButton,
  InstagramLoginButton,
  LinkedInLoginButton,
  MicrosoftLoginButton,
  TwitterLoginButton
} from 'react-social-login-buttons'

import { ReactComponent as PinterestLogo } from './assets/pinterest.svg'

const REDIRECT_URI = 'http://localhost:3000/account/login'

const App = () => {
  const [provider, setProvider] = useState('')
  const [profile, setProfile] = useState<any>()
  const amazonRef = useRef<TypeCrossFunction>(null!)
  const instagramRef = useRef<TypeCrossFunction>(null!)
  const googleRef = useRef<TypeCrossFunction>(null!)
  const facebookRef = useRef<TypeCrossFunction>(null!)
  const microsoftRef = useRef<TypeCrossFunction>(null!)
  const linkedinRef = useRef<TypeCrossFunction>(null!)
  const githubRef = useRef<TypeCrossFunction>(null!)
  const pinterestRef = useRef<TypeCrossFunction>(null!)
  const twitterRef = useRef<TypeCrossFunction>(null!)

  const onLoginStart = useCallback(() => {
    alert('login start')
  }, [])

  const onLogoutFailure = useCallback(() => {
    alert('logout fail')
  }, [])

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

  const onLogout = useCallback(() => {
    switch (provider) {
      case 'amazon':
        amazonRef.current?.onLogout()
        break
      case 'facebook':
        facebookRef.current?.onLogout()
        break
      case 'google':
        googleRef.current?.onLogout()
        break
      case 'instagram':
        instagramRef.current?.onLogout()
        break
      case 'microsoft':
        microsoftRef.current?.onLogout()
        break
      case 'github':
        githubRef.current?.onLogout()
        break
      case 'pinterest':
        pinterestRef.current?.onLogout()
        break
      case 'twitter':
        twitterRef.current?.onLogout()
        break
      case 'linkedin':
        linkedinRef.current?.onLogout()
        break
      default:
        break
    }
  }, [provider])

  return (
    <>
      {provider && profile && (
        <User provider={provider} profile={profile} onLogout={onLogout} />
      )}
      <div className={`App ${provider && profile ? 'hide' : ''}`}>
        <h1 className='title'>ReactJS Social Login</h1>
        <LoginSocialFacebook
          ref={facebookRef}
          appId={process.env.REACT_APP_FB_APP_ID || ''}
          onLoginStart={onLoginStart}
          onLogoutSuccess={onLogoutSuccess}
          onResolve={({ provider, data }: IResolveParams) => {
            setProvider(provider)
            setProfile(data)
          }}
          onReject={(err) => {
            console.log(err)
          }}
        >
          <FacebookLoginButton />
        </LoginSocialFacebook>

        <LoginSocialGoogle
          ref={googleRef}
          client_id={process.env.REACT_APP_GG_APP_ID || ''}
          onLogoutFailure={onLogoutFailure}
          onLoginStart={onLoginStart}
          onLogoutSuccess={onLogoutSuccess}
          onResolve={({ provider, data }: IResolveParams) => {
            setProvider(provider)
            setProfile(data)
          }}
          onReject={(err) => {
            console.log(err)
          }}
        >
          <GoogleLoginButton />
        </LoginSocialGoogle>

        <LoginSocialAmazon
          ref={amazonRef}
          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}
          onLogoutSuccess={onLogoutSuccess}
        >
          <AmazonLoginButton />
        </LoginSocialAmazon>

        <LoginSocialInstagram
          ref={instagramRef}
          client_id={process.env.REACT_APP_INSTAGRAM_APP_ID || ''}
          client_secret={process.env.REACT_APP_INSTAGRAM_APP_SECRET || ''}
          redirect_uri={REDIRECT_URI}
          onLoginStart={onLoginStart}
          onLogoutSuccess={onLogoutSuccess}
          onResolve={({ provider, data }: IResolveParams) => {
            setProvider(provider)
            setProfile(data)
          }}
          onReject={(err: any) => {
            console.log(err)
          }}
        >
          <InstagramLoginButton />
        </LoginSocialInstagram>

        <LoginSocialMicrosoft
          ref={microsoftRef}
          client_id={process.env.REACT_APP_MICROSOFT_APP_ID || ''}
          redirect_uri={REDIRECT_URI}
          onLoginStart={onLoginStart}
          onLogoutSuccess={onLogoutSuccess}
          onResolve={({ provider, data }: IResolveParams) => {
            setProvider(provider)
            setProfile(data)
          }}
          onReject={(err: any) => {
            console.log(err)
          }}
        >
          <MicrosoftLoginButton />
        </LoginSocialMicrosoft>

        <LoginSocialLinkedin
          ref={linkedinRef}
          client_id={process.env.REACT_APP_LINKEDIN_APP_ID || ''}
          client_secret={process.env.REACT_APP_LINKEDIN_APP_SECRET || ''}
          redirect_uri={REDIRECT_URI}
          onLoginStart={onLoginStart}
          onLogoutSuccess={onLogoutSuccess}
          onResolve={({ provider, data }: IResolveParams) => {
            setProvider(provider)
            setProfile(data)
          }}
          onReject={(err: any) => {
            console.log(err)
          }}
        >
          <LinkedInLoginButton />
        </LoginSocialLinkedin>

        <LoginSocialGithub
          ref={githubRef}
          client_id={process.env.REACT_APP_GITHUB_APP_ID || ''}
          client_secret={process.env.REACT_APP_GITHUB_APP_SECRET || ''}
          redirect_uri={REDIRECT_URI}
          onLoginStart={onLoginStart}
          onLogoutSuccess={onLogoutSuccess}
          onResolve={({ provider, data }: IResolveParams) => {
            setProvider(provider)
            setProfile(data)
          }}
          onReject={(err: any) => {
            console.log(err)
          }}
        >
          <GithubLoginButton />
        </LoginSocialGithub>
        <LoginSocialPinterest
          ref={pinterestRef}
          client_id={process.env.REACT_APP_PINTEREST_APP_ID || ''}
          client_secret={process.env.REACT_APP_PINTEREST_APP_SECRET || ''}
          redirect_uri={REDIRECT_URI}
          onLoginStart={onLoginStart}
          onLogoutSuccess={onLogoutSuccess}
          onResolve={({ provider, data }: IResolveParams) => {
            setProvider(provider)
            setProfile(data)
          }}
          onReject={(err: any) => {
            console.log(err)
          }}
          className='pinterest-btn'
        >
          <div className='content'>
            <div className='icon'>
              <PinterestLogo />
            </div>
            <span className='txt'>Login With Pinterest</span>
          </div>
        </LoginSocialPinterest>

        <LoginSocialTwitter
          ref={twitterRef}
          client_id={process.env.REACT_APP_TWITTER_API_KEY || ''}
          client_secret={process.env.REACT_APP_TWITTER_APP_SECRET || ''}
          redirect_uri={REDIRECT_URI}
          onLoginStart={onLoginStart}
          onLogoutSuccess={onLogoutSuccess}
          onResolve={({ provider, data }: IResolveParams) => {
            setProvider(provider)
            setProfile(data)
          }}
          onReject={(err: any) => {
            console.log(err)
          }}
        >
          <TwitterLoginButton />
        </LoginSocialTwitter>
      </div>
    </>
  )
}

export default App

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
onLogoutFailure	`function() { // } (optional)`	`-`	Called when logout failure
onLogoutSuccess	`function() { // } (optional)`	`-`	Called when logout successfully
onLoginTrigger	`function() { // } (optional)`	`-`	Called when click login
client_id	`string (required)`	`-`	ID application
className	`string (optional)`	`-`	Class container
other_props...

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
onLogoutSuccess	`function() { // } (optional)`	`-`	Called when logout successfully
onLoginTrigger	`function() { // } (optional)`	`-`	Called when click login
other_props...

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
onLogoutSuccess	`function() { // } (optional)`	`-`	Called when logout successfully
onLoginTrigger	`function() { // } (optional)`	`-`	Called when click login
className	`string (optional)`	`-`	Class for button
other_props...

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
onLogoutSuccess	`function() { // } (optional)`	`-`	Called when logout successfully
onLoginTrigger	`function() { // } (optional)`	`-`	Called when click login
className	`string (optional)`	`-`	Class for button
other_props...

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
onLogoutSuccess	`function() { // } (optional)`	`-`	Called when logout successfully
onLoginTrigger	`function() { // } (optional)`	`-`	Called when click login
className	`string (optional)`	`-`	Class for button
other_props...

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
onLogoutSuccess	`function() { // } (optional)`	`-`	Called when logout successfully
onLoginTrigger	`function() { // } (optional)`	`-`	Called when click login
className	`string (optional)`	`-`	Class for button
scope	`string (optional)`	`-`	Scope application
other_props...

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
onLogoutSuccess	`function() { // } (optional)`	`-`	Called when logout successfully
onLoginTrigger	`function() { // } (optional)`	`-`	Called when click login
className	`string (optional)`	`-`	Class for button
other_props...

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
onLogoutSuccess	`function() { // } (optional)`	`-`	Called when logout successfully
onLoginTrigger	`function() { // } (optional)`	`-`	Called when click login
className	`string (optional)`	`-`	Class for button
other_props...

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
client_secret	`string (required)`	`-`	Secret Key
onLogoutSuccess	`function() { // } (optional)`	`-`	Called when logout successfully
onLoginTrigger	`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

Name		Name	Last commit message	Last commit date
Latest commit History 24 Commits
example		example
src		src
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc		.eslintrc
.gitignore		.gitignore
.prettierrc		.prettierrc
.travis.yml		.travis.yml
Img.png		Img.png
README.md		README.md
gif.gif		gif.gif
package.json		package.json
tsconfig.json		tsconfig.json
tsconfig.test.json		tsconfig.test.json
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

reactjs-social-login

Install

Demo

Example code

Usage

Google Props

Facebook Props

Microsoft Props

Amazon Props

Instagram Props

Linkedin Props

Github Props

Pinterest Props

Twitter Props

How get client_id, client_secret_id

License

About

Releases

Packages

Languages

StarFruit-JSC/reactjs-social-login

Folders and files

Latest commit

History

Repository files navigation

reactjs-social-login

Install

Demo

Example code

Usage

Google Props

Facebook Props

Microsoft Props

Amazon Props

Instagram Props

Linkedin Props

Github Props

Pinterest Props

Twitter Props

How get client_id, client_secret_id

License

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages