Group Hook ReactJS components for login social network
TypeScriptMIT
reactjs-social-login
Group social login for ReactJS
Facebook
Google
Linkedin
Github
Microsoft
Amazon
Instagram
Pinterest
Twitter
Apple
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!)
importReact,{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 BUTTONimport{FacebookLoginButton,GoogleLoginButton,GithubLoginButton,AmazonLoginButton,InstagramLoginButton,LinkedInLoginButton,MicrosoftLoginButton,TwitterLoginButton,AppleLoginButton,}from'react-social-login-buttons'import{ReactComponentasPinterestLogo}from'./assets/pinterest.svg'import{ReactComponentasTiktokLogo}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 closesconstREDIRECT_URI=window.location.href;constApp=()=>{const[provider,setProvider]=useState('')const[profile,setProfile]=useState<any>()constonLoginStart=useCallback(()=>{alert('login start')},[])constonLogoutSuccess=useCallback(()=>{setProfile(null)setProvider('')alert('logout success')},[])return(<>{provider&&profile ? (<Userprovider={provider}profile={profile}onLogout={onLogoutSuccess}/>) : (<divclassName={`App ${provider&&profile ? 'hide' : ''}`}><h1className='title'>ReactJS Social Login</h1><LoginSocialFacebookisOnlyGetTokenappId={process.env.REACT_APP_FB_APP_ID||''}onLoginStart={onLoginStart}onResolve={({ provider, data }: IResolveParams)=>{setProvider(provider)setProfile(data)}}onReject={(err)=>{console.log(err)}}><FacebookLoginButton/></LoginSocialFacebook><LoginSocialGoogleisOnlyGetTokenclient_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><LoginSocialAppleclient_id={process.env.REACT_APP_APPLE_ID||''}scope={'name email'}redirect_uri={REDIRECT_URI}onLoginStart={onLoginStart}onResolve={({ provider, data }: IResolveParams)=>{setProvider(provider);setProfile(data);}}onReject={err=>{console.log(err);}}><AppleLoginButton/></LoginSocialApple><LoginSocialAmazonisOnlyGetTokenclient_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><LoginSocialInstagramisOnlyGetTokenclient_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><LoginSocialMicrosoftisOnlyGetTokenclient_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><LoginSocialLinkedinisOnlyGetTokenclient_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><LoginSocialGithubisOnlyGetTokenclient_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><LoginSocialPinterestisOnlyGetTokenclient_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'><divclassName='content'><divclassName='icon'><PinterestLogo/></div><spanclassName='txt'>Login With Pinterest</span></div></LoginSocialPinterest><LoginSocialTwitterisOnlyGetTokenclient_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)}}><TwitterLoginButton/></LoginSocialTwitter><LoginSocialTiktokclient_key={process.env.REACT_APP_TIKTOK_CLIENT_KEY}redirect_uri={REDIRECT_URI}onLoginStart={onLoginStart}onResolve={({ provider, data })=>{setProvider(provider);setProfile(data);}}onReject={(err)=>{console.log(err);}}className="pinterest-btn"><divclassName="content"><divclassName="icon"><TiktokLogo/></div><spanclassName="txt">Login With Tiktok</span></div></LoginSocialTiktok></div>)}</>)}exportdefaultApp
JavaScript Version
importReact,{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 BUTTONimport{FacebookLoginButton,GoogleLoginButton,GithubLoginButton,AmazonLoginButton,InstagramLoginButton,LinkedInLoginButton,MicrosoftLoginButton,TwitterLoginButton,AppleLoginButton,}from'react-social-login-buttons'import{ReactComponentasPinterestLogo}from'./assets/pinterest.svg'import{ReactComponentasTiktokLogo}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 closesconstREDIRECT_URI=window.location.href;constApp=()=>{const[provider,setProvider]=useState('')const[profile,setProfile]=useState(null)constonLoginStart=useCallback(()=>{alert('login start')},[])constonLogoutSuccess=useCallback(()=>{setProfile(null)setProvider('')alert('logout success')},[])return(<>{provider&&profile ? (<Userprovider={provider}profile={profile}onLogout={onLogoutSuccess}/>) : (<divclassName={`App ${provider&&profile ? 'hide' : ''}`}><h1className='title'>ReactJS Social Login</h1><LoginSocialFacebookisOnlyGetTokenappId={process.env.REACT_APP_FB_APP_ID||''}onLoginStart={onLoginStart}onResolve={({ provider, data })=>{setProvider(provider)setProfile(data)}}onReject={(err)=>{console.log(err)}}><FacebookLoginButton/></LoginSocialFacebook><LoginSocialGoogleisOnlyGetTokenclient_id={process.env.REACT_APP_GG_APP_ID||''}onLoginStart={onLoginStart}onResolve={({ provider, data })=>{setProvider(provider)setProfile(data)}}onReject={(err)=>{console.log(err)}}><GoogleLoginButton/></LoginSocialGoogle><LoginSocialAppleclient_id={process.env.REACT_APP_APPLE_ID||''}scope={'name email'}redirect_uri={REDIRECT_URI}onLoginStart={onLoginStart}onResolve={({ provider, data })=>{setProvider(provider);setProfile(data);}}onReject={err=>{console.log(err);}}><AppleLoginButton/></LoginSocialApple><LoginSocialAmazonisOnlyGetTokenclient_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}><AmazonLoginButton/></LoginSocialAmazon><LoginSocialInstagramisOnlyGetTokenclient_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)}}><InstagramLoginButton/></LoginSocialInstagram><LoginSocialMicrosoftisOnlyGetTokenclient_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)}}><MicrosoftLoginButton/></LoginSocialMicrosoft><LoginSocialLinkedinisOnlyGetTokenclient_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)}}><LinkedInLoginButton/></LoginSocialLinkedin><LoginSocialGithubisOnlyGetTokenclient_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)}}><GithubLoginButton/></LoginSocialGithub><LoginSocialPinterestisOnlyGetTokenclient_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'><divclassName='content'><divclassName='icon'><PinterestLogo/></div><spanclassName='txt'>Login With Pinterest</span></div></LoginSocialPinterest><LoginSocialTwitterisOnlyGetTokenclient_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)}}><TwitterLoginButton/></LoginSocialTwitter><LoginSocialTiktokclient_key={process.env.REACT_APP_TIKTOK_CLIENT_KEY}redirect_uri={REDIRECT_URI}onLoginStart={onLoginStart}onResolve={({ provider, data })=>{setProvider(provider);setProfile(data);}}onReject={(err)=>{console.log(err);}}className="pinterest-btn"><divclassName="content"><divclassName="icon"><TiktokLogo/></div><spanclassName="txt">Login With Tiktok</span></div></LoginSocialTiktok></div>)}</>)}exportdefaultApp
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)