0

I'm trying to get passport authentication with twitter to work. My setup is as follows: React(with redux) frontend (create-react-app), Node (with express) API. Both are running on localhost (different ports).
User goes to /login and clicks on a button that dispatches a login action:

export function login() {
    return dispatch => {
        return axios.get('/api/auth/twitter')
          .then(() => {})
    }
}

The route on the server: 

router.get('/twitter', passport.authenticate('twitter'));

And the route for the callback: 

router.get('/twitter/callback', passport.authenticate('twitter', {failureRedirect: '/login'}), loginSuccess);

loginSuccess does nothing at the moment.

This is the full error I get:
XMLHttpRequest cannot load https://api.twitter.com/oauth/authenticate?oauth_token=fGVctgAAAAAA1y22AAABXah3t3o. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access.

I'm proxying requests from the react frontend (localhost:3000) to localhost:8080.

If I go into the network tab of the chrome devtools and select the response from the twitter api it looks like this: enter image description here

If anyone knows how to get passport-twitter authentication to work with this kind of setup please let me know.

eRodY
  • 635
  • 1
  • 6
  • 10
  • See https://stackoverflow.com/questions/35879943/twitter-api-authorization-fails-cors-preflight-in-browser/35898961#35898961 and see the statement “the typical pattern is that requests to the Twitter API happen at the backend rather than directly, say, from within a browser-based app” at https://twittercommunity.com/t/will-twitter-api-support-cors-headers-soon/28276/3 I guess most everybody continues to deal with this either by writing custom handling into the server-side code for their web apps, or else by using some library that does it for whatever server-side runtime they’re using – sideshowbarker Aug 03 '17 at 14:49
  • No CORS middleware you install on your own server is going to change the fact that `https://api.twitter.com/oauth/authenticate` endpoint you’re making a request to doesn’t include the Access-Control-Allow-Origin response header in its responses – sideshowbarker Aug 03 '17 at 14:51

1 Answers1

1

Sad news, Twitter won't let you to call its API client-side, you need a server in order to do that :(

Take a look at this Quora answer.

Michele Riva
  • 552
  • 9
  • 24
  • But I'm calling the API on the server, am I not? The only thing the client is doing is making a request to `/api/auth/twitter` on my server. The rest should be handled there with passport. – eRodY Aug 03 '17 at 16:02