Auth0 Lock Component not showing in React with container option

Question

(Using React) I have a /login route and a /signup route to display Login and SignUp components. In my Login component I'm using Auth0's Lock component to display a login form and I'm also using the container configuration option for the form to be displayed in my own div rather than as the default modal.

When my Login component loads for the first time (or after a refresh of the /login route) the Auth0 Lock component loads correctly. My problem is when I navigate from the /login route to the /signup route and then back to the /login route and the Auth0 Lock component does not load at all. When inspecting the page I can see that my container div is empty.

I've found this issue on Auth0's github of others running into the same problem using Angular, but their solution is to set auth.config.auth0lib.$container to null which doesn't seem to be a good solution.

Answer 1

After looking through the auth0 Lock source I found the hide method which has solved my problem:

hide() {
  closeLock(this.id, true);
}

In my Login component I override the componentWillUnmount method, get a reference to the Auth0Lock, and call hide():

componentWillUnmount() {
  this.lock.hide();
}

Now when I navigate away from my Login component at /login to another route and then back to /login the Auth0 Lock component reloads and displays correctly.