cuongdevjs
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>
My blind guess is the token used in
x-cors-grida-api-keyis expired.
Oh. I don't think so. you can try it at https://react-social-login.netlify.app. It still works normally.
Btw, one solution for you is passing the props isOnlyGetCode to the component and sending the code response to the server side, and then getting access_token from it.
But I want full profile from twitter. I tried on production by using the same code but it takes forever to redirect back to website after I authorize it from twitter. Any workaround for that or any idea what's happening?
Oh. I don't think so. you can try it at https://react-social-login.netlify.app. It still works normally.
Yes it is but that's using isOnlyGetCode option, what to do in case of full profile, I can see you have written a getProfile for it in library, and Its giving 401 locally and on prod I explained what's happening.
could you give me your link website? and make sure redirect_uri should be window.location.href
https://www.taltol.com/login Website
https://github.com/The-GigaDevs/Taltol/blob/faisal_integrations/components/auth/SocialLogins.jsx The component
Also in the API initiator tab in the network tab, it shows your library that is initiating.
Seem it still works normally
After researching, I think you need to make a little bit of change to your twitter app config. Please follow this: https://stackoverflow.com/a/72534686 Let me know if it still doesn't work.
It works now. Adding screenshot for future references. Thanks @cuongdevjs.
Also I want to ask something regarding Linkedin too, how do I get email of Linkedin user & image? It provide weird data like you can see in your own screenshot above
I am never try but you can try passing props scope = r_basicprofile r_emailaddress
Hi, I have the same configuration but do not get any data from Twitter
<LoginSocialTwitter
client_id={process.env.TWITTER_CLIENT_ID}
redirect_uri={REDIRECT_URI}
onResolve={({ provider, data }: IResolveParams) => {
console.log(provider, data, "Twitter Data");
}}
onReject={(err: any) => {
console.log(err);
}}
>
<TwitterLoginButton />
</LoginSocialTwitter>
