Getting Bookmarks to Work with Auth0 Login

I love using Auth0 to implement user authentication and authorization in my apps. It’s easy to implement and their docs are great. At my day job I was recently presented with an issue. Our users are bookmarking the login page in their browser, but eventually that bookmark no longer works.

The Scenario

When a user first goes to the application, if they aren’t authenticated, they are immediately redirected to an Auth0 login page to enter their credentials. To the unsuspecting user, the Auth0 login page is still part of the “app”, even though they have been redirected to another domain entirely. The user then bookmarks the Auth0 login page in their browser, again considering this page to part of the larger application.

At some point in the future, the user accesses the application again via their bookmarked link (really the Auth0 login page) and logs into Auth0 successfully. The problem is that the link the user bookmarked originally contains the state query parameter, which is being used by the application. Read more about the state Parameter. After a user logs in, but before Auth0 redirects the user back to the application as an authenticated user, Auth0, or really any OAuth server, uses the state parameter to do some information lookup and validation. After a period of time Auth0 deletes these state values from their caches and is no longer sure what to do with the information or the user session. The user is then presented with an OOPS error page from Auth0. This is expected behavior, nothing wrong with Auth0, just our configuration. The user assumes there is an issue with the application, their account, their internet, etc. The real issue is that the user successfully authenticated, but Auth0 had no where to send them, they lost the information required when the state value expired from their caches. This unfortunately then increases support requests for the application, questions to the engineering team, etc.

The Solution

Auth0 allows you to define a default login route for your application that will redirect the user back to your application, whether the authentication was successful or not. This capability is configured as part of the Auth0 Universal Login and is explained in the Default Login URL section of the docs.

To set this up is easy, in the Auth0 console, select your application, then under Settings > Application URIs enter your Application Login URI. This is the first place Auth0 will look if they are unable to use the state value from the original login request, i.e. the bookmarked link.

According to their docs, Auth0 will handle a login request with an expired state value in this order:

Auth0 will redirect to the default client URL if configured, or the tenant level URL if not. If no default login URL is set, Auth0 will render an error page.

The above solution will likely solve 95% of support requests received because of login attempts using an expired login URL. There may be other situations that are specific to your application, but I’ve found this change alone has greatly reduced customer frustration.