Auth0 Lock v11 in React app not catching ‘authenticated’ event

Question

I’m trying to implement Lock v11 in a React app and after user logs in, even though I hit the event listener and the event type is authenticated, the callback function is not getting called to process the tokens.

Here's my App.jsx where I'm both initializing Auth0 Lock and waiting for the authenticated event. Any idea why my listener is not working? To clarify it further, I put debuggers in the code. After a successful user login, I do hit the first debugger but not the second one.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
import Auth0Lock from 'auth0-lock';

// Actions
import * as appActions from '../actions/app-actions';

// Components
import Home from './home/Home';
import Public from './public/Public';

class App extends Component {

    lock = new Auth0Lock('my_auth0_client_id', 'my_domain.auth0.com', {
        auth: {
            audience: 'https://my_backend_api_url/',
            redirectUrl: 'http://localhost:3000',
            responseType: 'token id_token',
            sso: false
        }
      });

    constructor(props) {

        super(props);
        this.onAuthenticated = this.onAuthenticated.bind(this);
        this.isAuthenticated = this.isAuthenticated.bind(this);

        this.onAuthenticated();
    }

    onAuthenticated() {
        debugger; // After successful login, I hit this debugger
        this.lock.on('authenticated', (authResult) => {
            debugger; // But I never hit this debugger
            let expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
            sessionStorage.setItem('access_token', authResult.accessToken);
            sessionStorage.setItem('id_token', authResult.idToken);
            sessionStorage.setItem('expires_at', expiresAt);

          });
    }

    isAuthenticated() {

        if(!sessionStorage.getItem("access_token") || !sessionStorage.getItem("id_token") || !sessionStorage.getItem("expires_at"))
            return false;

        const expiresAt = JSON.parse(localStorage.getItem('expires_at'));
        return new Date().getTime() < expiresAt;
    }

    render() {

        const isAuthenticated = this.isAuthenticated();

        return (
            <div>
                <Switch>
                    <Route exact path="/" render={props => isAuthenticated ? <Home {...props} /> : <Redirect to="/public" />} />
                    <Route path="/public">
                        <Public lock={this.lock} />
                    </Route>
                </Switch>
            </div>
        );
    }
}

function mapStateToProps(state) {

    return {
        isAuthenticated: state.app.isAuthenticated
    };
}

function mapDispatchToProps(dispatch) {

    return {

        actions: bindActionCreators(appActions, dispatch)
    };
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

Answer 1

Pull this.lock.on('authenticated'... up to index.js and make lock = new Auth0Lock... also global in index.js.

Or use the auth0 react sdk guide: https://auth0.com/docs/quickstart/spa/react/01-login

Hope that helps.