Auth0 not redirecting to the assigned URL (React)

Question

auth.js

import auth0 from 'auth0-js';

export default class Auth {
    constructor() {
        this.auth0 = new auth0.WebAuth({
            domain: '<properURL>',
            clientID: '<properID>',
            redirectUri: 'http://localhost:3000/',
            audience: '<blahblah>',
            responseType: 'token id_token',
            scope: 'openid'
        });
        this.login = this.login.bind(this);
        this.logout = this.logout.bind(this);
        this.handleAuthentication = this.handleAuthentication.bind(this);
        this.isAuthenticated = this.isAuthenticated.bind(this);
    }

    login() {
        // console.log(this.auth0);
        this.auth0.authorize();
    }
    handleAuthentication() {
        this.auth0.parseHash((err, authResult) => {
        if (authResult && authResult.accessToken && authResult.idToken) {
            this.setSession(authResult);
            // history.replace('/lobby');
        } else if (err) {
            // history.replace('/lobby');
            console.log(err);
        }
        });
    }

    setSession(authResult) {
        // Set the time that the access token will expire at
        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);
        // navigate to the home route
        // history.replace('/lobby');
    }

    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('/lobby');
    }

    isAuthenticated() {
        // Check whether the current time is past the 
        // access token's expiry time

        //return localStorage.length > 0;
        // console.log(localStorage)
        let expiresAt = JSON.parse(localStorage.getItem('expires_at'));
        return new Date().getTime() < expiresAt;
    }
}

Lobby.jsx

import React, { Component } from 'react';
import Auth from '../Auth/Auth.js';
import {
  HashRouter as Router,
  Route,
  Link
} from 'react-router-dom'

export default class Lobby extends Component {
    constructor(props) {
        super(props)
        this.auth = new Auth();
        this.state = {
            meep: 'whooosh'
        }
    }
    render() {
        return (
            <div>
                {!this.auth.isAuthenticated() ?
                <button onClick={this.auth.login}>Please Login to Play</button>
                :
                <Link to='/room'>
                <h1>Click here to join game</h1>
                </Link>
                }
            </div>
        );
    }
}

I've been following the Auth0 tutorial for working with React but I can't get it to actually work properly. When clicking on the login button, it goes through the whole authentication process, but fails to redirect to the redirectUri that I specify. It appends all the access token information into the URL and pretty much breaks the react-router. Nothing on the page loads. But, if I console.log the local storage, I see the proper authentication has been completed. If I delete the access token info from the url so it is just the server's home route, it detects that I'm authenticated and allows me to continue.

So it just isn't redirecting properly. Any idea why?

Answer 1

As written, you have the history.replace('...') lines commented out. If you're following the Auth0 tutorial then those history lines it what it relies on to do the various redirects when handling the authentication flow. Once you click the Login button, you're most likely being redirected out of your app, to auth0, and then back into your app.

However! Even with those history.replace lines I personally was having issues with their history setup and react router 4. What I ended up using was a plain old window.location = "/" to handle the redirects and it both worked properly, and re-rendered the components as needed.

If you're using react router 4, you may also need to make sure you have the callback route setup as well. For example:

<Router>
    <div>
        <Route exact path="/" component={Lobby}/>
        <Route
            path="/callback"
            render={(props) => {
                this.handleAuthentication(props);
                return <Callback {...props} auth={this.auth}/>
            }}
        />
    </div>
</Router>

where the handleAuthentication function is the wrapper function from the auth0 example:

handleAuthentication = (props, replace) => {
    if (/access_token|id_token|error/.test(props.location.hash)) {
        this.auth.handleAuthentication();
    }
};