Name	Name	Last commit message	Last commit date
Latest commit History 48 Commits
.github/ISSUE_TEMPLATE	.github/ISSUE_TEMPLATE
example	example
src	src
.editorconfig	.editorconfig
.eslintignore	.eslintignore
.eslintrc	.eslintrc
.gitignore	.gitignore
.prettierrc	.prettierrc
.travis.yml	.travis.yml
CODE_OF_CONDUCT.md	CODE_OF_CONDUCT.md
CONTRIBUTING.md	CONTRIBUTING.md
Img.png	Img.png
LICENSE	LICENSE
README.md	README.md
gif.gif	gif.gif
package-lock.json	package-lock.json
package.json	package.json
tsconfig.json	tsconfig.json
yarn.lock	yarn.lock

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,
} 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 onLoginStart = useCallback(() => {
    alert('login start')
  }, [])

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

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

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

          <LoginSocialAmazon
            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}
          >
            <AmazonLoginButton />
          </LoginSocialAmazon>

          <LoginSocialInstagram
            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)
            }}
          >
            <InstagramLoginButton />
          </LoginSocialInstagram>

          <LoginSocialMicrosoft
            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)
            }}
          >
            <MicrosoftLoginButton />
          </LoginSocialMicrosoft>

          <LoginSocialLinkedin
            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)
            }}
          >
            <LinkedInLoginButton />
          </LoginSocialLinkedin>

          <LoginSocialGithub
            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)
            }}
          >
            <GithubLoginButton />
          </LoginSocialGithub>
          <LoginSocialPinterest
            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'
          >
            <div className='content'>
              <div className='icon'>
                <PinterestLogo />
              </div>
              <span className='txt'>Login With Pinterest</span>
            </div>
          </LoginSocialPinterest>

          <LoginSocialTwitter
            client_id={process.env.REACT_APP_TWITTER_API_KEY || ''}
            client_secret={process.env.REACT_APP_TWITTER_APP_SECRET || ''}
            redirect_uri={REDIRECT_URI}
            onLoginStart={onLoginStart}
            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
onLoginStart	`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
onLoginStart	`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
onLoginStart	`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
onLoginStart	`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
onLoginStart	`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
onLoginStart	`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
onLoginStart	`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
onLoginStart	`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
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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

Uh oh!

Releases 13

Packages

Uh oh!

Contributors 8

Uh oh!

Languages

License

cuongdevjs/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

Topics

Resources

License

Code of conduct

Contributing

Uh oh!

Stars

Watchers

Forks

Releases 13

Packages 0

Uh oh!

Contributors 8

Uh oh!

Languages

Packages