How to login to twitter and store the response on the same page in React

225 Views Asked by At

I am trying to allow user to login to my website using twitter as well
Please note that I'm using reactjs for the frontend

  1. I have created my account on developer.twitter.com and generated the oAuth2.0 client id and client secret
  2. I am using library called reactjs-social-login to handle all the work of authentication
  3. Here is the code which is working fine , it opens up a new twitter authentication tab and logs me in with twitter and then redirects to my domain as following
  4. mydomain.com/?state=state&code=NzhRYnQ2ctokengeneratedfromtwitterinurlparamYtSzU5aGFtX3JZOjE2OTA5Nzk4MTQ3MTk6MToxOmFjOjE here I have modified the url param a bit by adding custom string.
  5. Now the issue is the new tab which was opened for authentication it keeps open and there only I get redirected to my site as well as I neither see any logs in the new tabs console nor in my existing tabs console.
  6. What I want to achieve : I should be able to store the users details like email, username and basic public details also the new opened tab should be closed once the authentication is successful
        <LoginSocialTwitter
            client_secret={process.env.REACT_APP_TWITTER_V2_APP_SECRET || ''}
            redirect_uri={mydomain_url}
            onLoginStart={onLoginStart}
            onLogoutSuccess={onLogoutSuccess}
            onResolve={({ provider, data }) => {
                console.log('provider is ', provider);
                console.log('data is ', data);
            }}
            onReject={(err) => {
                console.log(err);
            }}
            >
                Login
        </LoginSocialTwitter>
0

There are 0 best solutions below