cuongdevjs/reactjs-social-login

Group Hook ReactJS components for login social network

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 https://localhost:3000.

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 = () => {
  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
            isOnlyGetToken
            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
            isOnlyGetToken
            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>

          <LoginSocialApple
            client_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>

          <LoginSocialAmazon
            isOnlyGetToken
            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
            isOnlyGetToken
            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
            isOnlyGetToken
            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
            isOnlyGetToken
            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
            isOnlyGetToken
            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
            isOnlyGetToken
            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
            isOnlyGetToken
            client_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>

          <LoginSocialTiktok
            client_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"
          >
            <div className="content">
              <div className="icon">
                <TiktokLogo />
              </div>
              <span className="txt">Login With Tiktok</span>
            </div>
          </LoginSocialTiktok>
        </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 = () => {
  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 ? (
        <User provider={provider} profile={profile} onLogout={onLogoutSuccess} />
      ) : (
        <div className={`App ${provider && profile ? 'hide' : ''}`}>
          <h1 className='title'>ReactJS Social Login</h1>
          <LoginSocialFacebook
            isOnlyGetToken
            appId={process.env.REACT_APP_FB_APP_ID || ''}
            onLoginStart={onLoginStart}
            onResolve={({ provider, data }) => {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) => {
              console.log(err)
            }}
          >
            <FacebookLoginButton />
          </LoginSocialFacebook>

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

          <LoginSocialApple
            client_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>

          <LoginSocialAmazon
            isOnlyGetToken
            client_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>

          <LoginSocialInstagram
            isOnlyGetToken
            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 }) => {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) => {
              console.log(err)
            }}
          >
            <InstagramLoginButton />
          </LoginSocialInstagram>

          <LoginSocialMicrosoft
            isOnlyGetToken
            client_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>

          <LoginSocialLinkedin
            isOnlyGetToken
            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 }) => {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) => {
              console.log(err)
            }}
          >
            <LinkedInLoginButton />
          </LoginSocialLinkedin>

          <LoginSocialGithub
            isOnlyGetToken
            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 }) => {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) => {
              console.log(err)
            }}
          >
            <GithubLoginButton />
          </LoginSocialGithub>

          <LoginSocialPinterest
            isOnlyGetToken
            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 }) => {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) => {
              console.log(err)
            }}
            className='pinterest-btn'
          >
            <div className='content'>
              <div className='icon'>
                <PinterestLogo />
              </div>
              <span className='txt'>Login With Pinterest</span>
            </div>
          </LoginSocialPinterest>

          <LoginSocialTwitter
            isOnlyGetToken
            client_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>

          <LoginSocialTiktok
            client_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"
          >
            <div className="content">
              <div className="icon">
                <TiktokLogo />
              </div>
              <span className="txt">Login With Tiktok</span>
            </div>
          </LoginSocialTiktok>
        </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

1. Facebook
2. Instagram
3. Github
4. Linkedin
5. Google
6. Microsoft
7. Amazon
8. Pinterest
9. Twitter
10. Apple
11. Tiktok

License

MIT © Nguyen-Manh-Cuong

reactjs-social-login's Issues

Receiving error when attempting to login via twitter

After clicking the authorize app button in the popup for twitter login I see that a network request is made and I receive this error. It seems like the request to https://cors.bridged.cc is expecting some authorization header which isn't present. I dug through your code and noticed that there is some key that you are passing "PASS_CORS_KEY" but this key is not present in the package (obviously). Could you tell me how to get this key and allow us to pass our own version into LoginSocialTwitter?

Twitter login takes 2 attempts on Live demo

Describe the bug
Currently in live Demo and in local development, twitter login needs 2 tries before getting to work.

To Reproduce
Steps to reproduce the behavior:

1. Go to demo
2. Click on Twitter login
3. Network tab shows 400
4. Try again
5. Works

Expected behavior
Twitter login should only need 1 try to login

Screenshots
See one failed attempt to get token

Desktop (please complete the following information):

• OS: Mac OS
• Browser Chrome
• Version 107.0.5304.87

Google One Tap SignIn Popup not showing on guest mode on chrome browser

Describe your environment

• Chrome latest version on MAC OS
• WEB Google identity service: WEB : https://accounts.google.com/gsi/client

Describe the problem:
I am migrating to google identity services to implement Google One Tap SignIn in my react project with typeResponse="idToken"

One tap prompt is well displayed when user has account logged to chrome. But when user in guest mode, I am expecting to see the Warm welcome page which allows user to sigh up to the account if they wish.

What I noticed is that on firefox I can see the popin which allows to login/register with google.

Can anyone know if that's possible with google identity services: https://accounts.google.com/gsi/client

If it's possible to login/register with Google One Tap in guest mode on chrome?

After running build the LoginAuthentication starts to give {authResponse: null, status: 'unknown'} yet when running in development mode its running fine

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

The Twitter login doesn't run

The twitter login doesn't run in your demo application on https://react-social-login.netlify.app/.
By the way, it doesn't run in my application too!

If you note, there is a } at the end of the button container. It is black and not easily visible. Maybe that could be a source of error.

Error Could not find a declaration file

Hi,

I'm getting the following error using the plugin:

Could not find a declaration file for module 'reactjs-social-login'. '/Users/hendrik/Repository/assetsquare/ui/node_modules/reactjs-social-login/dist/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/reactjs-social-login` if it exists or add a new declaration (.d.ts) file containing `declare module 'reactjs-social-login';`  TS7016

    4 | import { Grid, Button, Divider, Typography } from '@material-ui/core';
    5 | import useAuth from '../../hooks/useAuth';
  > 6 | import { LoginSocialFacebook, LoginSocialGoogle } from 'reactjs-social-login';
      |                                                        ^
    7 | 
    8 | const AuthWithSocial: React.FC = () => {
    9 |   const { loginWithFacebook, loginWithGoogle } = useAuth();

I already deleted my node_modules folder and re-run yarn buit it dind't help.

Do you have an idea?

idToken not response GoogleLogin

I added "openid" attribute to the scope but idToken does not contain response data.

Google not working

Describe the bug
When trying to login with google nothing happens.
It does not show that there is an error with the client_id or something else

"reactjs-social-login": "^2.0.1"

disabled attribute is not available

Is your feature request related to a problem? Please describe.
I need to prevent user to click LoginSocialLinkedin button before some kind of Agreement checkbox.
So I try to use disabled=true attribute to make LoginSocialLinkedin disabled.
But I got this error : Property 'disabled' does not exist on type 'IntrinsicAttributes & Props'
I also try put AppButton within LoginSocialLinkedin and make AppButton disabled. The button show disabled, but it can still click and show linkedin login.

Describe the solution you'd like
LoginSocial plugin should support disabled attribute similar to other control like AppButton.

google not returning id_token

I only see the access_token in the response. I have tried different options but still can't get id_token (JWT). Is it possible to get it from the client directly without a server?

How to get authorization code instead of access token?

First of all, thank you for the great package :)

In my setup, I have reactjs application on the front end side and nestjs on the back end.

Because of API, I would like to use an authorization code to get the user information on the back end side, but currently as far as I've tested for facebook and google the code is automatically used by the onGetMe function to get the user information.

How can I prevent this function from being called and get the authorization code on the onResolve function to be able to send it to my API?

Hi, I am facing the exact same problem. My API keys are correctly configured

Hi, I am facing the exact same problem. My API keys are correctly configured

Originally posted by @bmorenobel in #12 (comment)

Can't prevent double request due to double click

Describe the bug
When I double click the social buttons it does 2 requests, the SDK popup reopens and onResolve is called twice etc.
I've tried setting isDisabled to true on the first click but that didn't help.

I believe there was logic to prevent this before, but it was removed here to fix another issue? f8eee2d

It would be great if some logic could be added again so the buttons can only be clicked again after the previous click was resolved/rejected (without recreating the previous issue where the button couldn't be reclicked if the login was cancelled by the user).

To Reproduce
It can be reproduced with the example demo if you remove the alert in onLoginStart and then click for example the Facebook button multiple times

Google - Add firstname/lastname fields

Hello!

Could you please add the firstname and lastname fields to the Google Auth datas?

reactjs-social-login/src/LoginSocialGoogle/index.tsx

Line 120 in 42f2ec8

data.name = profile.getName()

data.firstName = profile.getGivenName()
data.lastName = profile.getFamilyName()

Thank you!

401 on twitter API when logging in

Hey I'm using this library with nextjs and have this configuration for twitter the dialogue for Login shows and when I authorize APP it sends an API request to
https://cors.bridged.cc/https://api.twitter.com/2/oauth2/token
this API fails with 401. Any idea what I'm doing wrong or is it something from the library?

The code is here:

<LoginSocialTwitter
        redirect_uri={REDIRECT_URI}
        client_id={process.env.TWITTER_CLIENT_ID}
        onResolve={({ provider, data }) => {
          console.log(provider, data, "Twitter Data");
        }}
        onReject={(err) => {
          console.log(err);
        }}
      >
        <div className="register-login-modal-socials-btn">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="23"
            height="23"
            viewBox="0 0 23 23"
            fill="none"
          >
            <path
              d="M22.1466 4.03046C21.3329 4.40106 20.4567 4.65159 19.5377 4.76353C20.4761 4.18773 21.1964 3.27454 21.5357 2.18695C20.6569 2.72019 19.6859 3.1081 18.6485 3.31607C17.8218 2.41101 16.6401 1.84576 15.3325 1.84576C12.8249 1.84576 10.7906 3.93184 10.7906 6.50461C10.7906 6.86985 10.8295 7.22436 10.9075 7.56572C7.13161 7.37091 3.78441 5.51806 1.54193 2.69615C1.15074 3.38666 0.927028 4.18773 0.927028 5.04088C0.927028 6.65652 1.72914 8.0827 2.94839 8.91855C2.20494 8.89588 1.50283 8.68394 0.88931 8.33738V8.39465C0.88931 10.6527 2.45564 12.5362 4.53548 12.9628C4.15467 13.0722 3.75292 13.1269 3.3382 13.1269C3.0458 13.1269 2.7598 13.0988 2.4828 13.0442C3.0612 14.8944 4.73809 16.242 6.72692 16.278C5.17219 17.5284 3.21207 18.2734 1.08413 18.2734C0.717504 18.2734 0.354859 18.2522 0 18.2094C2.01098 19.529 4.40018 20.3009 6.96482 20.3009C15.3231 20.3009 19.8922 13.2026 19.8922 7.04563C19.8922 6.84303 19.8882 6.64043 19.8804 6.4418C20.7687 5.78468 21.5395 4.96492 22.1466 4.03046Z"
              fill="#00AAEC"
            />
          </svg>
          <span className="register-login-modal-socials-btn-text">
            Continue with Twitter
          </span>
        </div>
      </LoginSocialTwitter>

Add support for React v18

Describe the bug
Unable to install reactjs-social-login due to incompatibility with React v18

Expected behavior
Support for React v18

Desktop (please complete the following information):

• Chrome 100.0.4896.127 (Official Build) (64-bit)
• Windows 10
• Latest npx create-react-app . --template typescript
  • "react": "^18.0.0",
  • "react-dom": "^18.0.0",

Additional context

>npm i reactjs-social-login

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from [email protected]
npm ERR! node_modules/reactjs-social-login
npm ERR!   reactjs-social-login@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See ...\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     ...\Local\npm-cache\_logs\2022-04-19T07_01_58_670Z-debug-0.log

Redirect does not comply with Electron App

Great project!

So testing out in a bare bones Electron app using React & Typescript.

In an Electron app, it appears the issue is around the creation and or use of the RedirectURI.

If we use the following:

const REDIRECT_URI =window.location.href;

This tends to get us back something like:

storagerelay://file/?id=autxxxxxxx

And that is not a valid URI that can be supplied to Googles OAuth Credentials for a redirect.

Just testing with Google only at the moment and this is the reponse:

You can see that the RedirectURI is the issue. So this is not a bug in your solution, but rather a challenge to get around the Google requirements.

Any advice you can provide here would be awesome.

Cheers

not getting user data on Twitter logging

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Click on LoginSocialTwitter

Expected behavior
getting logging use information

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• Browser [e.g. chrome, safari]

Additional context
Code Example

<LoginSocialTwitter
client_id={client_id}
client_secret={client_secret}
redirect_uri="https://localhost:3000/club-settings/social-account"
scope="tweet.read users.read follows.read+follows.write offline.access"
onResolve={({provider, data}: IResolveParams) => {
console.log('twitter', provider, data)
}}
onReject={(err: any) => {
console.log("err",err)
}}
>
<Button
title={buttonTitle}
classAddon=" c-button--icons mr-60"
icon={c-icon${buttonIcon}}
/>

after successful login and redirect URL call and getting this error

{error: "invalid_request", error_description: "Value passed for the authorization code was invalid."}

API called post https://cors.bridged.cc/https://api.twitter.com/2/oauth2/token

parameters
{
code:
redirect_uri:
https://localhost:3000/club-settings/social-account
client_id:
grant_type: authorization_code
code_verifier: challenge
}

Can't click Facebook/Google/Amazon buttons again after cancelling signup

Describe the bug
After I close the popup window from Facebook/Google/Amazon to cancel, reclicking the button doesn't work untill I refresh the page. I don't have this issue with the other buttons from Instagram etc.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://react-social-login.netlify.app/
2. Click on 'Log in with Facebook' (or Google or Amazon)
3. Click on 'OK'
4. Close the Facebook popup window/tab
5. Click on 'Log in with Facebook' (or Google or Amazon)
   Error: nothing happens

Expected behavior
When clicking the 'Log in with Facebook/Google/Amazon' button the 2nd time in step 5 I expect the button to work as before.

Desktop (please complete the following information):

• OS: iOS
• Browser: Chrome Version 102.0.5005.115 (Official Build) (x86_64)

module has no exports

This is the error I am getting
export 'default' (imported as 'LoginSocialLinkedin') was not found in 'reactjs-social-login' (module has no exports)

can anybody point me in the right direction on how to fix this?

Migrate from Google Sign-In to Google Identity Services

When displaying a Google login button with React devtools, the following is sent to the browser's console:

Your client application uses libraries for user authentication or authorization that will soon be deprecated. See the Migration Guide for more information.

Also, listed in one of the benefits of the Google Identity Services is "the option to add user sign-in to your site's static content using just HTML". It would be great to implement that as well since I find the Google button takes a second or two longer to load than the Facebook one.

ReferenceError: require is not defined in ES module scope, you can use import instead This file is being treated as an ES module because it has a '.js' file extension and 'app/node_modules/reactjs-social-login/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'app/node_modules/reactjs-social-login/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

i using in next js app with typescript

If the Google modal is closed, it won't open again for a certain period of time.

Describe the bug
If I click the close icon in Google modal and I want to login again, the modal does not open without clearing the Browser memory. These periods are also included in the google document. But at least the google button should have the information that I was signed in before and it should open when I click it. For example, you can take a look at Twitter.

the `'./User'` directory is completely missed from the repository

Describe the bug
It looks like the './User' directory is completely missed from the repository

Failed to compile.

./src/App.tsx
Module not found: Can't resolve './User' in '/ssd/reactjs-social-login/example/src'

To Reproduce
Steps to reproduce the behavior:

1. Just follow the instruction: when running npm run start it returns the error
   Just looking at the code, there are two errors:

a) import { User } from './User' ts2307 impossible to find './User' module
b) the same for

import {
  LoginSocialGoogle,
  LoginSocialAmazon,
  LoginSocialFacebook,
  LoginSocialGithub,
  LoginSocialInstagram,
  LoginSocialLinkedin,
  LoginSocialMicrosoft,
  LoginSocialPinterest,
  LoginSocialTwitter,
  IResolveParams,
  TypeCrossFunction
} from 'reactjs-social-login'

ts2307 impossible to find 'reactjs-social-login' module

Additional context
Running on Ubuntu 20.04

Instagram page not found issue

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to your online demo
2. Click on Instagram login
3. See the error page not Found ( if a user is not already login )

Expected behavior
need to open the login page

Screenshots

Desktop (please complete the following information):

• Browser [ Chrome ]

Additional context
This issue is not getting generated before.

Linkedin Login Issue

When click login in Linkedin i getting following error

Uncaught TypeError: Failed to resolve module specifier "@linkedin/jsecure". Relative references must start with either "/", "./", or "../".

TikTok Login Kit Support

Hey @cuongdevjs

Would be awesome if you can look into also supporting TikTok:
https://developers.tiktok.com/doc/getting-started-create-an-app/

Client Id is logged in the console for the Google component

Describe the bug*
After clicking the log in with Google button, an intermediate object is logged onto the console.
The object contains the client Id and I don't think that's safe. I don't know if it happens because it takes too long to even load in the first place or if it's for some other reason.

To Reproduce
Steps to reproduce the behavior:

1. Click on 'Log In with google' button
2. Open the console
3. Data is logged in line 1 of reactjs-social-login.modern.js

Expected behavior
No logging of sensitive information

Desktop (please complete the following information):

• Chrome

Make getAccessToken & getProfile optional

It would be great if it was possible to pass down a param to only execute onLogin without calling getAccessToken and getProfile.

Essentially all that we need is the auth code that is coming back from the original authorization window, then we handle the rest server side, so no need to exchange the code and grab profile data. Will be great if you can make an option for that!

Twitter API v2 / OAuth 2.0 Support

Great work on this repo @cuongdevjs ! Is there any chance to implement the new OAuth 2.0 Flow that was introduced with the Twitter API v2?

The new OAuth 2.0 Flow doesn't require to disclose the client secret, so it would actually be possible to use the gem in production.

See the documentation here for reference:
https://developer.twitter.com/en/docs/authentication/oauth-2-0/authorization-code

Facebook logout function does not work

I was trying the demo, Facebook login functionality works as expected, after login no information is shown. No pop up or button appears for logout.

Cors issue for google login

Google login fails:

with the following error:
Access to fetch at 'https://cors.bridged.cc/https://www.googleapis.com/oauth2/v3/userinfo?alt=json' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Anyone can help?

Client Secret Vulnerability

I see some of the social media platforms need to use the client secret that visible for end users in the example. I think it doesn't make sense to use the client secret this way and I consider that as a security vulnerability. So, does that matter if we use the client secret this way?

<LoginSocialInstagram
  isOnlyGetToken
  client_id={"1024858944679033"}
  client_secret="ac6793cb58a36f1a18d99b629f1408a6"
  redirect_uri={REDIRECT_URI}
  onLoginStart={onLoginStart}
  onResolve={({ provider, data }) => {
    setProvider(provider);
    setProfile(data);
  }}
  onReject={(err) => {
    console.log(err);
  }}
>
  <InstagramLoginButton />
</LoginSocialInstagram>

Can't click Google button again after the LoginSocialGoogle component previously dismounted

Describe the bug
In my app after I login with LoginSocialGoogle I go to a different page without the LoginSocialGoogle component. Then when I logout and go back to login again the button doesn't work.

Looking at your source code I found that the reason is because after the LoginSocialGoogle dismounts and then mounts again, the SDK script is still in the DOM so if (checkIsExistsSDKScript()) is true and isSdkLoaded is set to true, but instance is still null because it got reset when the component dismounted, so then this check if (instance) instance.requestAccessToken() won't succeed.

I made a workaround to fix the issue in my app by removing the SDK script when the component dismounts in a useEffect cleanup function. That way when the component mounts again checkIsExistsSDKScript() will return false and the script and instance are set again.

useEffect(() => {
    return () => {
        document.getElementById(SCRIPT_ID)?.remove();
    };
}, []);

But maybe you could add a fix in your library instead?

To Reproduce
In your demo the issue doesn't happen because when you login the LoginSocialGoogle component doesn't actually dismount, it is only hidden with <div className={`App ${provider && profile ? 'hide' : ''}`}>. So to reproduce the issue you should render LoginSocialGoogle conditionally so it dismounts after logging in`

After making that change

1. Login with the Google button
2. Logout
3. Click the Google button again

Expected behavior
After dismounting and remounting the LoginSocialGoogle component and clicking the Google login button a 2nd time requestAccessToken should be called again as before

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Hi ,
I encountered a problem when adding the package to my project. I use react 17.0.2 with typescript and when adding the button for the connection with Facebook, the project stops working when calling the connection page with the following message:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem

At the line 52

window is not defined

I got error message window is not defined in nextjs, codes implemented

<LoginSocialGoogle
      client_id={props.appId}
      onResolve={({ data }) => {
        alert(JSON.stringify(data));
      }}
      onReject={(err) => alert(err)}
    >
      Test
    </LoginSocialGoogle>

In Firefox and Safari users are logged in to Facebook despite cancelling the login

Describe the bug
When I tried the Facebook login in Firefox and Safari I got logged in after closing the login popup window

To Reproduce
Steps to reproduce the behavior:

1. Go to https://react-social-login.netlify.app/ in Firefox or Safari
2. Log in with the "Log in with Facebook" button
3. Go to facebook.com and log out there (I used a new tab)
4. Go back to the demo app tab and refresh the page
5. Click the "Log in with Facebook" button
6. Close the popup window
   Now the login continues anyway

getting error while requesting authtoken from code in postman

Hi,

Good Morning,
Regarding Linked In
I am trying to get access tokens by using auth code. but I am not able to retrieve the access token it is giving below error.

Curl To Get Access Token:
curl --location -g --request POST 'https://www.linkedin.com/oauth/v2/accessToken?client_id={{CLIENT_ID}}&grant_type=authorization_code&client_secret={{CLIENT_SECRET}}&redirect_uri=http://localhost:8000/app/&code={{AUTH_CODE}}'
--header 'Content-Type: application/x-www-form-urlencoded'
--header 'Cookie: bcookie="v=2&3f8f0496-266a-4b58-8e31-de7bcb0b4335"; lang=v=2&lang=en-us; lidc="b=OB15:s=O:r=O:a=O:p=O:g=3349:u=15:x=1:i=1645891377:t=1645977777:v=2:sig=AQHemytg36vYW-bZISZrBOR9NZ5RcnfK"; bscookie="v=1&20220225065334e2c41646-ffef-4358-8108-4102f1456b06AQECWF_H_IfxpOayfaZt98rtaFFxMJDe"; bcookie="v=2&3f8f0496-266a-4b58-8e31-de7bcb0b4335"; lang=v=2&lang=en-us; lidc="b=OB15:s=O:r=O:a=O:p=O:g=3349:u=15:x=1:i=1645891377:t=1645977777:v=2:sig=AQHemytg36vYW-bZISZrBOR9NZ5RcnfK"; bscookie="v=1&20220225065334e2c41646-ffef-4358-8108-4102f1456b06AQECWF_H_IfxpOayfaZt98rtaFFxMJDe"'

The error I am Getting:

{
"error": "invalid_request",
"error_description": "Unable to retrieve access token: appid/redirect uri/code verifier does not match authorization code. Or authorization code expired. Or external member binding exists"
}

Can u help me to resolve this issue

Uncaught ReferenceError: exports is not defined

Describe the bug
I'm trying to run this package on my project which does use ViteJS as tooling, but I'm getting this issue on execution time:

Uncaught ReferenceError: exports is not defined
    js index.tsx:215
    __init chunk-BQAOEP2F.js:9
    <anonymous> reactjs-social-login:1
[index.tsx:215:20](http://localhost:3000/node_modules/reactjs-social-login/src/LoginSocialTwitter/index.tsx)
    js index.tsx:215
    __init chunk-BQAOEP2F.js:9
    <anonymous> reactjs-social-login:1
    InnerModuleEvaluation self-hosted:2388
    InnerModuleEvaluation self-hosted:2388
    InnerModuleEvaluation self-hosted:2388
    InnerModuleEvaluation self-hosted:2388
    InnerModuleEvaluation self-hosted:2388
    evaluation self-hosted:2349

Of course, it does not render anything on the screen, and it is the only package that is not working.

To Reproduce
Steps to reproduce the behavior:

1. Install the package on a ViteJS project.
2. Import components from the package on a component.
3. Try to run the project.
4. See the error on the browser's console.

Expected behavior
It should render the front end as we designed it.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOs Monterrey, 12.0.1 (21A559)
• Browser: Firefox Browser 97.0 (64-bit)
• Version: ^2.0.0

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Instagram login

While login with Instagram it's only giving tokes as a response. It's not giving any profile-related info including user id.
is there any method to get the user info?

Edit

What I found out is there is an access token exchange API which you will need to pass the current token to get access token
https://api.instagram.com/oauth/access_token

Unable to get the code for server

Describe the bug
I want to get the user code from my reactjs application. I will then pass the code to my server-side to get the auth-token along with refresh token. UUnfortunately, I am getting profile info and access token only. I could not get the code.

To Reproduce
Steps to reproduce the behavior:

<LoginSocialGoogle
            isOnlyGetCode={true}
            client_id={socialAuthProps.google.key}
            onLoginStart={onLoginStart}
            onResolve={({ provider, data }) => {
              setProvider(provider)
              setProfile(data)
            }}
            onReject={(err) => {
              console.log(err)
            }}
          >
            <GoogleLoginButton />
          </LoginSocialGoogle>```

**Expected behavior**
code in the response

**Desktop (please complete the following information):**
 - OS: Macintosh
 - Browser Chrome 
 - Version 106

Linkedin Popup Issue

When the LinkedIn popup opens up and the user logs in successfully, the redirect URL opens up in the same popup. How to force it to return back to the parent window?

Facebook - add email

Hello!

Could you please add the email to the Facebook Auth datas ?

Thank you!

scope in Instagram

whatever scope I added when I debugged the token it only has these 2 scops user_profile and user_media. need to under how I add other scopes.

Code:-
<LoginSocialInstagram
client_id=""
client_secret=""
redirect_uri={window.location.href}
onLoginStart={onLoginStart}
onLogoutSuccess={onLogoutSuccess}
onResolve={({data}: IResolveParams) => {
console.log('data', data)
}}
scope="user_profile user_media public_profile instagram_basic pages_show_list instagram_manage_insights instagram_manage_comments manage_pages ads_management business_management instagram_content_publish page_read_engagement"
onReject={(err: any) => {
console.log(err)
}}
>

id_token not returned in google login in latest version

• In older version(V 1.5.2) of reactjs-social-login, data attribute from IResolveParams was returning id_token which is needed for the authentication.
• In latest version, this field is not returned but access_token is returned.
• Looking into google docs, the id_token seems to be equivalent to credential field which is returned by google identity services
• looks like issue is related #64
• can we please have a look and check how we can return this credential

Thanks!

linkedin return CORS error

1 Access to fetch at 'https://cors.bridged.cc/https://www.linkedin.com/oauth/v2/accessToken' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Note: i also tried with https, but without success.
Thanks for helping guys

Request

Any plans to add Twitter and Pinterest?

Apple social login support

getting console log

Describe the bug
I getting console.log and I am not logging it and the data is client id

To Reproduce
It shows up automatically in console after setting up

Expected behavior
no console.log should show in development

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
I think the problem is in index.tsx file line number 210

Google component not works

When clicking on the google component it does not open the popup to enter the credentials. From what I can see, the problem is that it cannot find the google SDK. It also does not work in the Demo link of the library: https://react-social-login.netlify.app/