history.replace not working from 'history/createBrowserHistory' with Auth0

Question

I am trying to redirect a user using history.replace('/user') in my application, but when I do it does nothing. I am using Auth0 and following their guide: https://auth0.com/docs/quickstart/spa/react/01-login

When I redirect after login it shows /user in the url but nothing happens, I stack on the callback component. Even more than that if I hit logout which should redirect to the user component it does not work either. It just shows the /user in the browser and does not actually take them to the page.

import auth0 from 'auth0-js';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();

export default class Auth {
  constructor() {
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.handleAuth = this.handleAuth.bind(this);
    this.isAuth = this.isAuth.bind(this);
  }

  auth0 = new auth0.WebAuth({
    domain: 'taustin.auth0.com',
    clientID: 'IL1cmtElngJNYF3Ncjpt3pCRA5NFIDZw',
    redirectUri: 'http://localhost:3000/callback',
    audience: 'https://taustin.auth0.com/userinfo',
    responseType: 'token id_token',
    scope: 'openid'
  });

  handleAuth() {
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        this.setSession(authResult);
        // redirect user to home page
        history.replace('/user');
      } else if (err) {
        // redirect user to home page with error
        history.replace('/user');
      }
    });
  }

  setSession(authResult) {
    // Set how long the access token will last
    let expiresAt = JSON.stringify(
      authResult.expiresIn * 1000 + new Date().getTime()
    );
    localStorage.setItem('access_token', authResult.accessToken);
    localStorage.setItem('id_token', authResult.idToken);
    localStorage.setItem('expires_at', expiresAt);
    // redirect user to home page or desired page
    history.replace('/user');
  }

  logout() {
    // Clear Access Token and ID Token from local storage
    localStorage.removeItem('access_token');
    localStorage.removeItem('id_token');
    localStorage.removeItem('expires_at');
    // navigate to the home route
    history.replace('/user');
  }

  isAuth() {
    // Check whether the current time is past the
    // Access Token's expiry time
    // If not expires at exist should automatically return false
    let expiresAt = JSON.parse(localStorage.getItem('expires_at'));
    return new Date().getTime() < expiresAt;
  }

  login() {
    this.auth0.authorize();
  }
}

Answer 1

I think this should solve your problem.

import React, {Component} from 'react';
import { Router } from 'react-router';
import createHistory from 'history/createBrowserHistory';

const history = createHistory();   

class App extends Component {

   render(){
       return (
           <Router history={history}>   //pass in your custom history object
                // your routes come here
           <Router />
       )
   }
}