Hello,

We are using the lib to authentificate a user on our application. We gave to twitter API multiple callback urls whitelisted. But when we specified the callback url to use (for example the second one), after the user identify himself in the twitter popin, the popin redirect the user to the first callback url. We didn't identify where It comes from.

Can you tell us If the lib can be involved in this issue ?

Hey - appreciate the work, saved me a lot of fiddling, just one request :-)

As per here:
https://developer.twitter.com/en/docs/basics/authentication/api-reference/authenticate
we would like pass a screen_name param to the popup URL to prefill the screen_name input.

I think, its just a matter of adding it to TwitterLogin.propTypes and appending it to the popup url like so

popup.location = https://api.twitter.com/oauth/authenticate?oauth_token=${data.oauth_token}&force_login=${this.props.forceLogin}&screen_name=${this.props.screenName||""}`;`

if the property is not supplied the || or just passes the empty string, with no visible effect.

I'm going to clone it and give it a try (any reason I shouldn't ?) - if it works as expected do you want a pull request?

Can you tell me how handle with this error ? I get 405 method not allowed.

react-twitter-auth-component.js:359 POST http://divelog.com.s3-website-us-east-1.amazonaws.com/callback 405 (Method Not Allowed) LogIn.js:65 SyntaxError: Unexpected token < in JSON at position 0

@PostMapping("/signin/twitter") public String loginWithTwitter(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ........ } @PostMapping("/callback") public void loginWithTwitterCallback(HttpServletRequest request, HttpServletResponse response) ...... Cookie cookie = new Cookie("twitterJwtToken", jwtToken); cookie.setSecure(false); cookie.setMaxAge(60 * 60 * 24); cookie.setPath("/"); response.addCookie(cookie); }

I also tried change type of request to GET and later POST but error is the same and can you tell me how can I use this component on localhost ? I try do it, but I get cors error at client side. I use React JS. I have added cors at server side in Spring Boot.

Hello, I think the library is great for managing twitter login, but I have a problem, when I want to use the component to make the login, I get the following error Error: Blocked a frame with origin" http: // localhost: 3000 " from accessing to cross-origin frame. In my specific case I am using my localhost` to be able to use proof of concept, and I enabled the cors, but I can not make it work. Is there any indication on this? or I'm doing something wrong when using the library

I got this problem trying to implement Twitter login button in reactjs.
After clicking on the login button and logging in successfully the popup window was not closed. I took a close look at react-twitter-auth-component.js and found out popup.location was blank (line 413). Is it just me or anyone else has encountered the same error?

Hi, I am using this npm package to configure Twitter login with Rails api as backend.
Right now I am successfully getting

oauth_token=aZ_IrAAAAAAA1y-RAAABX2KHo6Y&oauth_verifier=Tnd8uWHPZ5jRu5TtORLAK4qKHuEtLjDl

with requestTokenUrl but after this, request is redirecting to callback URL specified in register twitter application and I am returning json response from there and that new window is showing json response on screen which is obvious because I am returning json response in that action but it is getting stuck there.
what needs to be done in callback URL action so request can process to loginUrl?

Help appreciated. Thanks!

Steps to reporduce:

• create twitter app with callback url: http://localhost:4000/api/v1/auth/twitter/reverse
• run example backend and frontend
• click login with twitter button
  Error message appears in pop up window "Cannot GET /api/v1/auth/twitter/reverse"

Add GET to route /api/v1/auth/twitter/reverse (in addition to POST) and popup loads data after login

{
  "oauth_token": "xxxxxxxxxxxxxxxxx",
  "oauth_token_secret": "xxxxxxxxxxxxxxxxxx",
  "oauth_callback_confirmed": "true"
}

However popup does not close and onSuccess callback is not called.

Hello Ivanvs,

I wondering that could we have ability to send some data alongwith requestTokenUrl and loginUrl, In my case i am utilising an API on server side, which checks for some keys which should be posted with the url. If those keys is not present My api is not allowing it to access the method.

Firstly I want to thank you for the components this solution has, it is a great thing.

When a user is opening the webpage, I currently working on, inside the Facebook or Instagram in-app browser, the pop up for authorization is being blocked by Instagram somehow (there is not clues to be even loading at all), and in Facebook browser looks like the pop up is being loading infinitely (It got stuck).

Any suggestion of what the problem could be?
Thank you in advance

Would love to see peerDep warning go away!

Hi i am get this issue after completing my front end and backen .But on frontend inside success urt i am getting this in response
Response {type: 'cors', url: 'http://localhost:6001/influencer/twitterouth/signu…Y8ay2N6hC&oauth_token=YVhmsQAAAAABf3CzAAABgsKbzxY', redirected: false, status: 200, ok: true, …}
body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "http://localhost:6001/influencer/twitterouth/signup?oauth_verifier=M5pPTTOzUMct8AuT3lEQqPvY8ay2N6hC&oauth_token=YVhmsQAAAAABf3CzAAABgsKbzxY"
[[Prototype]]: Response

See thsi response i am not getting the user information in response from this api

url: "http://localhost:6001/influencer/twitterouth/signup?oauth_verifier=M5pPTTOzUMct8AuT3lEQqPvY8ay2N6hC&oauth_token=YVhmsQAAAAABf3CzAAABgsKbzxY"

/node_modules/react-twitter-auth/src/index.js
Module parse failed: /Users//Documents/dev/syptime/syptime/react-twitter-auth/example/twitter-example/node_modules/react-twitter-auth/src/index.js Unexpected token (142:6)
You may need an appropriate loader to handle this file type.
| getDefaultButtonContent() {
| const defaultIcon = this.props.showIcon ? (
|
| ) : null;

How can I integrate this component with laravel socialite package as server? Thanks

Hello, I'm not getting email_address from twitter and those steps in Permission for email access are done. So how can we get using this module?

Hi and thanks for this great component! is there a way to make twitter auth work like on https://tweetdeck.twitter.com/ which means user is redirected on an auth page? because a regular popup gets blocked all the time by a browser

I'm using basically the boilerplate from the README and getting a syntax error

<TwitterLogin
    loginUrl="http://localhost:8080/accounts/twitter/login/"
    onFailure={this.onFailed}
    onSuccess={this.onSuccess}
    requestTokenUrl="http://localhost:8080/accounts/twitter/login/callback/"
/>

Here's the stack from Chrome's Dev Tools Network:

Looks like it may be an issue where the header is set to html rather than Content-Type:application/json. Any clue on where the issue lies/how to fix this?

I've been using this component and following the medium article https://medium.com/@robince885/how-to-do-twitter-authentication-with-react-and-restful-api-e525f30c62bb to get it all to work.
It has been almost working for a day, and I was stuck where the pop-up window to Authorize the app would not go away and would instead reload the sign in page within the popup window.
I already had the Facebook and Google sign-ins working following similar instructions, and I was working from localhost:3000 as are the examples on Medium. However, Twitter does not allow you to set a callback url that has localhost in it, so I tried 127.0.0.1:3000.
This had merely resulted in the the above behavior of the sign-in screen being loaded into the pop up window. I was unaware, for quite some time trying to debug and research the problem, that I had to start the whole process from 127.0.0.1:3000, and not localhost:3000. After doing this, the sign-in worked!
It wasn't so obvious to me and since the other social media buttons were working from the localhost address, I assumed that the 127.0.0.1 callback would just be interpreted the same as localhost. Is there a way that can be implemented to prevent future confusion for others?

Hello Ivan,

ISSUE: The code does not seem to hit "http://localhost:4000/api/v1/auth/twitter". The popup seems to return to the callbackurl defined in the Application Settings on the developer dashboard.

EXPECTED BEHAVIOUR: I expected the popup to close and return to http://localhost:4000/api/v1/auth/twitter where the code would be verified and then saved to the user model.

I am new to Twitter API and oAuth.

I have implemented your code and the Twitter window appears.

When i authorize my application, it will then redirect to the callbackurl defined in the Application Settings.

This does not return to my current app with the token information that was requested.

This endpoint does not exist in the application.

oauth_callback: "http%3A%2F%2Flocalhost%3A3000%2Ftwitter-callback",

Should the callback be router.route('/auth/twitter')?
Should this be defined in the Application settings?

Custom Twitter Login content

As mentioned, it would be really great if there is an example showing how to use this with ASP.Net Core 2.0 as server instead of Node.JS....

Working on an app that requires a custom twitter button as icon (but no text) and would love to leverage this code!

Is there any way to pass in a custom SVG without altering the module itself? I see you pass props for: tag, text content, dimensions, style/className (for component but not icon), and whether or not to show the SVG icon.

But how might one pass in their own SVG path with a custom size? For example, I'm trying to use a variation on the twitter logo featured here then alter the dimensions, fill, etc.

It would be great if it were possible to pass in some svg options with a specified {path:"", width, height} and/or perhaps add a unique className for css fills, transforms, etc.

hello @ivanvs
After the redirection the popup is generated and showing the error like this...
Error: OAuth redirect has occurred but no query or hash parameters were found. They were either not set during the redirect, or were removed—typically by a routing library—before Twitter react component could read it.

Though it is running perfectly in local but after hosting this error is occured

here is my package.json

"dependencies": {
    "@material-ui/core": "^4.1.3",
    "@material-ui/icons": "^4.2.1",
    "auth0-js": "^9.10.2",
    "axios": "^0.18.0",
    "history": "^4.9.0",
    "jquery": "^3.4.1",
    "material-ui": "^1.0.0-beta.47",
    "material-ui-icons": "^1.0.0-beta.36",
    "react": "^16.8.6",
    "react-burger-menu": "^2.6.10",
    "react-dom": "^16.8.6",
    "react-router": "^5.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "^0.9.5",
    "react-slick": "^0.24.0",
    "react-social-login": "^3.4.4",
    "react-styleguidist": "^9.0.9",
    "react-twitter-auth": "0.0.13",
    "redux": "^4.0.1",
    "slick-carousel": "^1.8.1",
    "sweetalert2": "^8.13.0",
    "video-react": "^0.13.7",
    "vue-axios": "^2.1.4"
  },

please help man...

Hi,

The component is great, and is about 99% perfect for our use case; thanks for writing it! We'd like to be able to send the verifier and token to our loginUrl endpoint in the request body — rather than in the query string — like so:

{"oauth_verifier" "xxxxxxx", "oauth_token": "xxxxxxx"}

We've forked it to do so, but obviously we'd rather contribute upstream than maintain our own fork. :-) Would you be willing to consider a fleshed-out pull request with the request style (query vs. body) as an optional prop?

Hi there, thanks for the cool library!

I'm experiencing an issue whereby the callback url opens up in the popup rather than the parent, can't see anything in the docs related to this issue, any advice on how to redirect the parent to the cb url?

Unable to get popup.location.search , due to which oauth_verifier and oauth_token is not available and getting this error on the screen , "OAuth redirect has occurred but no query or hash parameters were found.They were either not set during the redirect, or were removed—typically by a routing library—before Twitter react component could read it."

I'm trying to follow this tutorial. I'm 90% of the way there, but having trouble with the callback URL. Can I inquire as to what settings are used in this example app for the callback field? In the screenshot it's blank. Also, Twitter callback is a GET and I don't see any GET routes in this app that you'd be using for this?

For reference, I'm running the front and back ends of this app on two separate ports, and I see some other users are having issues with that. Unsure if related, but I'm also not able to trigger onSuccess in my front end.

Hi GenFirst,

We are using your TwitterLogin component and it's working great!

So first of all, thank you for writing it, and also the incredibly useful Twitter flow for SPA documentation!

We are going to host our API on a different domain to the SPA. The component's http calls are configured to be credentials: same-origin, but we'd need ours to use credentials: include.

Would it be possible to make that an option?

Thanks again,

Henry

Quite an edge case with using Firefox on iOS which leads to opening blank tab and not loading popup.location URL caused by async action in index.js:36

Related Firefox issue: Could not access window created using window.open('about:blank' .... code

Tested on: iPhone 6, iPad, FF 10.6 (8836).

Possible solution to open window with desired URL, unfortunately not possible within current use-case of opening popup first, and fetching token later in index.js.

Everything works perfectly on other devices/browsers, thanks @ivanvs.

Button by default should look like Twitter sign up button