React with backend passport-twitter CORS issue

1

Hi,
re: pinterest clone backend project
I am receiving a CORS issue when trying to use passport-twitter with a react front end talking to a backend api. I found the example which worked fine, so planned to add react on the front end and then add the rest of my code.

My current server code is here

I have read a number of blog articles and SO threads but still get the CORS error so figure I’m missing something fundamental. The commenting in my server.js code gives an idea of my journey, but basically I have tried the folowing :

  1. node.js cors package
  2. hard coding the cors headers
  3. run a production version on heroku (circumventing the different port issue)

None of the above worked and whilst I expect the answer will be embarassing, I’m really stuck so any help appreciated,
thanx for your time,
nik

edit: seems I’ve been barking up the wrong tree from the outset, quote:

“There is also the passport-twitter library that contains a strategy for Twitter authentication, but this library is not suitable for RESTful API. It is better suited for Express.js applications which are used with some server rendering library.”

2

You are not supposed to make ajax request to passport authentication endpoint. You should make a full page redirect to it.
Your code should be something like
<a href='login/twitter'>Log In with Twitter</a>

3

CORS has always been a pain for me! I have found it to be complicated game of header ping-pong at the hardest times and the best is when that CORS NPM package just works. :slight_smile:
Do you receive the CORS error when you are trying to get a response from Twitter?

4

thanx for your response. I’m not sure how this fits in with client side routing with react. The anchor tag is how the original source works, but that doesn’t use react. When I try the anchor tag I navigate to /login/twitter and stay there. I don’t see the console message in my twitter return in server.js

5

Hi and thanx for your response. The error I’m getting is :

Fetch API cannot load https://api.twitter.com/oauth/authenticate?oauth_token=scen6gAAAAAA2jpAAAABXxrvvBY. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
proxyConsole.js:54 twitter login failed: TypeError: Failed to fetch

At the server end I get no error message or the console message in my server.js. I’m really not sure what to try next.

6

I used hash based routing to solve this problem I think.

7

wow tysm for your prompt responses! Hash routing sounds like angular, but it’s a long time since I used angular. Does hash routing pertain to react? I’m using the react-router-dom package and don’t recall using hash routes. Think I’m going to have to trawl for “react backend passport-twitter” though I think I only found one article when I started which wasn’t appropriate for some reason … wish me luck :wink:

8

Here is my setup for router. As you can see I use hashHistory instead of locationHistory to make it work. Here is the whole project code: https://bitbucket.org/brainiac26/pinterest-clone

import React from 'react';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import { Provider } from 'react-redux';
import { syncHistoryWithStore } from 'react-router-redux';
import { connectedRouterRedirect } from 'redux-auth-wrapper/history3/redirect'
import store from './store';
import App from './containers/AppContainer';
import HomeContainer from './containers/HomeContainer';
import AddContainer from './containers/AddContainer';
import AuthorsBoardContainer from './containers/AuthorsBoardContainer';
import UsersBoardContainer from './containers/UsersBoardContainer';

const history = syncHistoryWithStore(hashHistory, store);

const userIsAuthenticated = connectedRouterRedirect({
    redirectPath: '/',
    authenticatedSelector: state => state.auth !== null,
    wrapperDisplayName: 'UserIsAuthenticated'
});

const routes = (
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={App}>
                <IndexRoute component={HomeContainer}/>
                <Route path="/add" component={userIsAuthenticated(AddContainer)}/>
                <Route path="/author/:username" component={AuthorsBoardContainer}/>
                <Route path="/personal" component={userIsAuthenticated(UsersBoardContainer)}/>
            </Route>
        </Router>
    </Provider>
);

export default routes;
9

I see you’re using react-router, which I believe is the previous version to react-router-dom and I don’t think they work quite the same, but I will certainly have a look through your code. thanx again.

edit: is your bitbucket repo private? I get access denied on the link.

10

Made it public. React-router, react-router-dom and react-router-redux are different packages. But yes, I use previous version of react router if that’s what you mean.

11

thanx again for the prompt response. I just edited my OP as it seems I’ve been trying to use an incompatible library, passport-twitter, what a nuub! I’m going to follow through the tutorial I linked and keep my fingers crossed. Thanx again for all your input.

12

How is it incompatible? It works just fine if you use it the right way.

1 Like
13

@prohorova sorry dude missed this in the reply frenzy. I’m new to this so can’t really answer why. The link to the tutorial I’m currently following says it is “not suitable for RESTful API”, see my OP edit. Perhaps “incompatible” was too strong a word.

14

thanx for the link to your project, it’s the best example I’ve found.

However :slight_smile: as I said, I’m using react-router-dom, specifically BrowerRouter. My anchor tag href link reloads my client index page, which I guess is the correct functionality.

Is it possible to make the href link nav to backend /auth/login route? I wonder if I’m barking up the wrong tree and should just use hashrouter.

thanx again for your time

EDIT: oops sorry dude, found the answer shortly after posting.

15

The only solution I found is to use hash routing

1 Like
16

ohh can u please teach me html deeply ??

17

thanx for the feedback. I found the answer in the github repo issues … just have to use a full url:
e.g. http://localhost:3000/login
anyhoo thanx for your time and the (most excellent) example.

1 Like
18

hello sir ?
can you help me

19

Oh cool so there is an easier way to do it. Will keep it in mind

20

@anujsinghchauhan I’ll try dude. how can I help?