Auth0 Home Blog Docs

Auth0 Lock mismatch callback on React with dynamic Routes

I am using Auth0 Lock v11 on my React Application with many dynamic routes. The way I am currently handling the lock is when someone clicks on ‘Sign In’, I will redirect the user to an allowed callback url ( currently set to ‘/’) and show the lock.

Scenario:
User is on ‘/blog/:id’
User clicks on Sign In
App redirects to ‘/’
App shows the lock
App Signs In

But what I find happening sometimes is:

User is on ‘/blog/:id’
User clicks on Sign In
App redirects to ‘/’
App shows the lock
App Click Login
Redirected to Auth0 error page saying callback url ‘/blog/:id’ is not allowed

Sometimes the lock will login from ‘/’ which is correct but sometimes the lock will login from the dynamic route which then throws the callback error. I cannot add every dynamic blog route to the callback url so what is the best way to handle this error?

Thanks!

I may be missing something, but if I recall correctly Lock uses the current URL as the callback/redirect URL by default so showing Lock in different paths will lead to different callback URL’s being used.

However, Lock supports an option where you can specifically state the callback URL to be used (https://auth0.com/docs/libraries/lock/v11/configuration#redirecturl-string-) and as such not be dependent on the current URL being viewed.