Support for the new react-router 4

[shai32]

the react-router has a lot of breaking changes.

[jocmp]

react-router is the breaking change. This library should work fine with v3.

[oprearocks]

I think I found a solution for this issue, that doesn't involve modifying the library. I have to test it thoroughly and make sure that it works in all scenarios so I don't get people hyped for no reason. I will post an update in the following week.

[ammoto]

@oprearocks any update on the solution?

[oprearocks]

Oh. Totally forgot about this. My schedule has been hectic since then. Let me try to describe it in plain text, here.

The problem

The problem with React Router is that it doesn't care about your query string anymore. This is why when you redirect to http://localhost:3000?token=token_string&uid=uid_string it all seems to go away. For me, this was an intermittent issue. Sometimes login worked, sometimes it did not. My guess is that every time it worked, React Router took more time to load, thus, the code monitoring the url change in the popup could kick in and parse the data from the query string.

My solution

1. When I redirect the popup URL, from my backend authentication service, I redirect to a url like this: http://localhost:3000/oauth/:token/:uid .
2. I have added a route, in React Router as follows: <Route path="/oauth/:token/:uid" render={ RedirectRoute } />

Here's the RedirectRoute.js component:

import React from 'react';
import { Redirect } from 'react-router-dom';

const RedirectRoute = ({ history, match }) => (
  <Redirect to={{
    pathname: '/',
    search: `?token=${match.params.token}&uid=${match.params.uid}`
  }}/>
);

export default RedirectRoute;

As you can see, I'm using React Router's Redirect component, passing pathname and search. This is the way to make React Router care about your query string. I'm sure this can be optimized further, and maybe the Redirect component would not be necessary. Feel free to do this, if you please.

Let me know if this makes sense to you.