actions.js

import request from 'superagent';

export const VALIDATING_TOKEN = 'VALIDATING_TOKEN';
function requestTokenValidation() {
  return { type: VALIDATING_TOKEN };
}

export const TOKEN_VALIDATION_RECEIVED = 'TOKEN_VALIDATION_RECEIVED';
function receiveTokenValidation(response) {
  return { type: TOKEN_VALIDATION_RECEIVED, response };
}

export function validateToken(uid, token) {
  return (dispatch) => {
    dispatch(requestTokenValidation(uid, token));

    return Promise.resolve(
      request.post('/api/auth/validate_token')
        .send({ uid, token })
        .set('Accept', 'application/json')
    )
    .then(response => {
      return dispatch(receiveTokenValidation(response));
    });
  };
}

entry.js

import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import { browserHistory, Router } from 'react-router';
import thunkMiddleware from 'redux-thunk';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { syncHistoryWithStore, routerReducer } from 'react-router-redux';
import { makeRoutes } from './routes';
import rootReducer from './reducers';
import './style.css';

const store = createStore(
  combineReducers({
    rootReducer,
    routing: routerReducer,
  }),
  applyMiddleware(thunkMiddleware)
);

const history = syncHistoryWithStore(browserHistory, store);

const routes = makeRoutes();

render((
  <Provider store={store}>
    <Router history={history}>
      {routes}
    </Router>
  </Provider>
), document.getElementById('root'));

index.js

\\ ./reducers/index.js

import { combineReducers } from 'redux';
import { VALIDATING_TOKEN, TOKEN_VALIDATION_RECEIVED } from '../actions';

function tokenValidation(state = {
  isValidToken: false, isValidatingToken: true,
}, action) {
  switch (action.type) {
    case VALIDATING_TOKEN:
      return Object.assign({}, state, {
        isValidatingToken: true,
      });
    case TOKEN_VALIDATION_RECEIVED:
      return Object.assign({}, state, {
        isValidatingToken: false,
        isValidToken: action.response.statusCode === 200,
      });
    default:
      return state;
  }
}

const rootReducer = combineReducers({ tokenValidation });

export default rootReducer;

token.js

import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import { validateToken } from '../actions';
import { connect } from 'react-redux';

class TokenContainer extends Component {
  static propTypes = {
    isValidToken: PropTypes.bool,
    isValidatingToken: PropTypes.bool,
    params: PropTypes.object,
    dispatch: PropTypes.func,
  };

  constructor(props) {
    super(props);
    this.state = {
      isValidatingToken: true,
    };
  }

  componentDidMount() {
    const { uid, token } = this.props.params;
    this.props.dispatch(validateToken(uid, token));
  }

  tokenValidationResponse() {
    if (this.props.isValidToken) { // eslint-disable-line
      return (
        this.renderValidToken()
      );
    }
    return (
      this.renderInvalidToken()
    );
  }

  renderValidating() {
    return (
      <div id="token-wrapper">
        Checking token...
      </div>
    );
  }

  renderValidToken() {
    return (
      <div>
        <h1>Success!</h1>
        <p>You're ready to go.</p>
        <form method="post">
          <input type="hidden" />
          <input type="submit" value="Log In" />
        </form>
      </div>
    );
  }

  renderInvalidToken() {
    return (
      <div>
        <h1>Link Expired</h1>
        <p>
          Oh, no... it looks like this link has already been used or has expired.
           Please login again.
        </p>
        <Link to="/signin">Sign in</Link>
      </div>
    );
  }

  render() {
    return (
      <div id="token-wrapper">
        {
          this.props.isValidatingToken ? // eslint-disable-line
            this.renderValidating() :
            this.props.isValidToken ?
              this.renderValidToken() :
              this.renderInvalidToken()
        }
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  isValidatingToken: state.isValidatingToken,
  isValidToken: state.isValidToken,
});

export default connect(mapStateToProps)(TokenContainer);