Nate Kimball Nate Kimball - 2 months ago 32
React JSX Question

Handle incoming query params from firebase URL using react + react-router

I'm attempting to hook up email/pw auth with email verification using Firebase. I'm using React + Redux + React-Router. The account creation is going fine - the user account is created in the Firebase user database, but the issue I'm having is in trying to capture the "mode" and "oobCode" from the link that Firebase provides in its email verification (the URL format is .../verify?mode=foo&oobCode=bar). I have Firebase linking (for the moment) to localhost:3000/verify, so in my routes, I tried to add a route path like this:



<Router history={ browserHistory }>
<Route path="/" component={ MainApp }>
<IndexRoute component={ LandingPage } onEnter={ redirectIfLoggedIn } />
<Route path="verify/:mode/:oobCode" component={ LandingPage } onEnter={ redirectIfVerified } />
// other routes
</Route>
</Router>





However, when I click on the URL in the e-mail, I get an error page. Essentially, all I'm trying to do is intercept that incoming e-mail link, check if the mode & oobCode are correct using Firebase's applyActionCode, then either send the user to the main logged-in page or to an error page. Any idea what I'm missing here?

Answer

The url format you receive is .../verify?mode=foo&oobCode=bar.

Route should look like this -

...
  <Route path="verify" component={ LandingPage } onEnter={redirectIfVerified } />
...

mode and oobCode are query params. You can get these values in your component from the location object injected into the props.

this.props.location.query = {mode: "foo", oobCode: "bar"}
Comments