cuongdevjs / reactjs-social-login

Group Hook ReactJS components for login social network
https://react-social-login.netlify.app
MIT License
172 stars 76 forks source link

Having trouble to make twitter login example work locally #158

Closed lorcan-codes closed 11 months ago

lorcan-codes commented 11 months ago

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.

Screen Shot 2023-12-02 at 23 50 13 Screen Shot 2023-12-02 at 23 50 54 Screen Shot 2023-12-02 at 23 53 39
cuongdevjs commented 11 months ago

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

lorcan-codes commented 11 months ago

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 commented 11 months ago
CleanShot 2023-12-04 at 08 30 39@2x

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

lorcan-codes commented 11 months ago

@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 commented 11 months ago

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

lorcan-codes commented 11 months ago

@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 commented 11 months ago

please read instructions here

jellohouse commented 8 months ago

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:

Screenshot 2024-02-12 at 5 19 03 PM

cuongdevjs commented 8 months ago

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 commented 8 months ago

@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 commented 5 months ago

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