Twitter API v2 / OAuth 2.0 Support

[OskarEichler]

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

[cuongdevjs]

ok. that's great. I will research and implement it soon.

[OskarEichler]

Awesome thank you!

[OskarEichler]

@cuongdevjs It looks to me like Twitter might be blocking the tracking of window.open via its CORS policy?

[cuongdevjs]

I've tried on https://react-social-login.netlify.app/ and it still works.

[OskarEichler]

@cuongdevjs I meant for the v2 API flow with OAuth 2.0

[cuongdevjs]

no, it still works, I am trying to change it to v2 and I think it is possible.

[OskarEichler]

Okay awesome! I was trying to implement it and am having issues with the detecting the end of the auth flow when Twitter redirects and has the code in the URL. If you can get that callback to work would be awesome! 🙌🏼

[cuongdevjs]

Hi. Everything is ready to use. Please upgrade to the newest version (v2.5.2)
Thank you.

[OskarEichler]

Awesome, thank you @cuongdevjs

I see it is definitely working on your demo site - however, for me it doesn't redirect from the callback (see screenshot below):

Code is pretty simple:

import React, { useCallback, useEffect, useState } from 'react'
import { ICON_NAMES } from '../../../utils/Constants';
import * as globalStyles from '../../../utils/GlobalStyles';
import ButtonView from '../../atoms/ButtonView';
import { LoginSocialTwitter } from 'reactjs-social-login';

const REDIRECT_URI = 'http://localhost:8000/callback'

export default function TwitterLoginButtonView(props) {
  const { 
    sourceObjectType,
    sourceObjectId,
    authGoogle,
    source,
    isBackstageAuthorized,
    buttonText="connect"
  } = props;

  const scope = 'tweet.read%20users.read%20offline.access';
  const state = 'twitter'

  const [provider, setProvider] = useState('');
  const [profile, setProfile] = useState('');

  return (
    <LoginSocialTwitter
      client_id={'SE10ME5MTTM4a3FwSURBdWVfTDU6MTpjaQ'}
      client_secret={''}
      redirect_uri={"http://localhost:8000/callback"}
      onResolve={({ provider, data }) => {
        console.log(provider, data)
      }}
      onReject={(err) => {
        console.log(err)
      }}
    >
      <ButtonView
        text={buttonText}
        customButtonBackgroundColor={source.buttonColor || source.iconColor}
        disabled={!!isBackstageAuthorized}
        rightIcon={!!isBackstageAuthorized ? { name: ICON_NAMES.CHECKMARK, color: globalStyles.colors.text3, size: 12, style: { paddingLeft: 6 } } : undefined}
      />
    </LoginSocialTwitter>
  );
}

Also it would be great if we can pass in state and scope so that we can customize them.

[cuongdevjs]

please make sure:

• redirect_uri must be the same as the URL where the Twitter Login component is located (example: you put TwitterLogin on URL localhost:3000/login, so redirect_uri must be localhost:3000/login too)
• the component TwitterLogin must exist (on DOM) when redirect_uri is returned (you shouldn't destroy or unmount the TwitterLogin component before login successfully)

[cuongdevjs]

Also it would be great if we can pass in state and scope so that we can customize them.

Please upgrade to version 2.5.4, both props are available to use.