Meteor's Accounts.onEmailVerificationLink with React and React Router

Question

I'm trying to get email verification to work with React/Meteor using Meteor's accounts-password package. I'm using React Router. I'm not sure where to put/how to call this:

Accounts.onEmailVerificationLink(function(token, done) {
 Accounts.verifyEmail(token);
});

I have a sign-up component and container, and I'm trying to get the verification email to link to the sign-in component/container and verify. I've done the following in a Meteor.(isServer) Meteor.startup block:

Accounts.urls.verifyEmail = function(){
 return Meteor.absoluteUrl("restaurantsignin");
};

My react router file looks like this:

Meteor.startup(() => {
  render(
    <Router history={browserHistory}>
      <Route path="/" component={App}>
        <IndexRoute component={Home} />
        <Route path="/about" component={About} />
        <Route path="/restaurantsignin" component={RestaurantSignInContainer} />
        <Route path="/restaurantsignup" component={RestaurantSignUpContainer} />
        <Route path="/customersignup" component={CustomerSignUpContainer} />
        <Route path="/restaurantresetemail" component={RestaurantResetEmailContainer} />
        <Route path="/restaurantresetpassword" component={RestaurantResetPasswordContainer} />

        <Route path="/restaurant/:restaurantName" component={MenuPage} />
      </Route>
    </Router>, document.getElementById('app')
  );

});

My react component file looks like this:

import React from 'react';
import Radium from 'radium';
import ReactDOM from 'react-dom';
import { Alert, Button } from 'react-bootstrap';

export default class RestaurantSignIn extends React.Component {

  handleAlertVerifiedDismiss() {
    document.getElementById('alert_verified_box').style.display = 'none';
  }

  render() {
    var styles = {
.
.
.
  return (
    <div style={styles.signInContainer}>
. 
.
.
and so on

The email verification link is being sent successfully and is redirecting to the /restaurantsignin link correctly. I'm just not sure how to properly verify the user once they reach the sign in page -- I'd like to have them verified before they sign in (as soon as they click the link)-- the meteor docs say to use the above Accounts code snippet but beyond that, I haven't found anything online. Thanks so much for the help!

Answer 1

Accounts.urls.verifyEmail function takes in a token parameter, so you can do the following:

Accounts.urls.verifyEmail = function(token) {
  return Meteor.absoluteUrl("restaurantsignin?token="+token)
}

Then the user clicks on the link in the email the token is already in the query param which you can extract with this.props.location.query.token. So in your RestaurantSignIn component's componentWillMount you can call:

Accounts.verifyEmail(this.props.location.query.token, function(error) {...})

If there are no errors you can navigate directly to an authenticated route with this.props.history.replace('/dashboard') because Accounts.verifEmail() automatically logs the user in.