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 debugger
s 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));
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.