(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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With