Having trouble to make twitter login example work locally

[lorcan-codes]

Hi I am running repo example locally. I have added export const PASS_CORS_KEY = 'someValue' to helper/constants.ts file and I have retrieved OAuth 2.0 Client ID from twitter developer dashboard and updated REACT_APP_TWITTER_V2_APP_KEY value in example/.env.development file. I've also updated app type to public. But I am getting You weren’t able to give access to the App. Go back and try logging in again. error. Any idea what might be happening? I've also tried with demo site's client id but no luck.

[cuongdevjs]

Please select the type of app as web app instead of native app.

[lorcan-codes]

Hi @cuongdevjs, thanks for the reply. I've changed it back to web but it did not help. I have also tried the client id of the https://react-social-login.netlify.app twitter (LUlmQk.......6MTpjaQ) but getting the same error. Is there some limitation in localhost or different domain maybe?

[cuongdevjs]

Make sure your configuration is correct. don't forget to add your local domain in app info section

[lorcan-codes]

@cuongdevjs Thanks so much. I've added localhost to the callbacks. And I had to comment const REDIRECT_URI = 'https://plenty-planets-beam-42-118-51-2.loca.lt/account/login' in example source code and use const REDIRECT_URI = 'http://localhost:3000/account/login'. And it is working as expected in example repo. But I am getting a CORS error in a project where I am importing LoginSocialTwitter component. How would I provide PASS_CORS_KEY in my own project?

[cuongdevjs]

yes, you can read how to get your own key here

[lorcan-codes]

@cuongdevjs How would I make it available to your library once I get my own key? That part is not clear to me. Thanks for your quick replies.

[cuongdevjs]

please read instructions here

[jellohouse]

I'm sorry @cuongdevjs but do we need to pay for this service which you propose as solution https://cors.sh/ !?

Why do you need to use the cors bridged service?

Can you not just directly call the twitter API like POST https://api.twitter.com/2/oauth2/token request instead of POST to https://cors.bridged.cc/https://api.twitter.com/2/oauth2/token

I see in the error arises from this part in the code:

[cuongdevjs]

no, we still need to use this service to call Twitter's API, the CORS error appears when we call without it. This is the restriction, I recommend you should to use the isOnlyGetToken prop, and call it on your server-side

[occultus73]

@cuongdevjs - I don't understand how the instructions you cite answer @lorcan-codes question. The PASS_CORS_KEY is hardcoded in the npm package in helper/constants:

export declare const PASS_CORS_KEY = "875c0462-6309-4ddf-9889-5227b1acc82c";

I can't see any functionality anywhere in this library that allows you to override it with your own API key. You'd have to modify this library yourself manually.

Also unfortunately isGetOnlyToken={true} will not bypass the CORS problem because it's still used for token authentication:

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

I also don't understand why CORS breaks specifically for Twitter, and not the other oauth2 providers.

[Mizan-Rifat]

After authorization on redirect i get unauthorized error from https://cors.bridged.cc/https://api.twitter.com/2/oauth2/token. What should i do?