Protractor syncing to an Angular page after redirection to Auth0 non-Angular page

Question

I have an Angular web app that uses Protractor for e2e tests. I recently added OAuth0 authentication. I disable Angular synchronisation before redirection to the non-Angul

Answer 1

My answer as fyi for all:

It appears that when the createAuth0Client method of the auth0-spa-js SDK (which is used to implement Auth0 authentication on an Angular SPA app) is called following redirect from the Auth0 site (after successful authentication) that hasPendingMacroTasks is set to true and is never reset. That prevents Protractor syncing as explained above.

I refactored my implementation of the auth0-spa-js to match the latest guide on the Auth0 website (using Observables as opposed to async-await) and the exact same problem exists.

I looked into what createAuth0Client is doing: It has gotten a JWT (token) from the Auth0 server before it redirects to the app and when it is called it caches that token and sets a timer to delete that cache entry. The setTimeout call in createAuth0Client is wrapped by Angular Zone and that holds hasPendingMacroTasks true which prevents Protractor from getting notification that Angular has completed loading. The timer is set to the lifetime of the token which is a setting one sets in the Auth0 server so I tested this by setting the token timeout to 3s and hasPendingMacroTasks was reset to false and Protractor successfully sync'd after I waited 5s in my e2e tests. However Protractor would have to log in on the Auth0 server again once the timer expires before it can make API calls so shortening the timer is not a feasible workaround.

I looked into running createAuth0Client outside the Angular NgZone but that proved extremely difficult if not impossible:

1. You need access to the created Auth0 client instance and once you make it available in NgZone you see the hasPendingMacroTasks set to true again.
2. You can't just make the SDK methods (eg login, logout) available back in NgZone as they need the client instance context to run ( I don't think you can hold state (the Auth0 client instance) outside the Angular zone and access it when you need it).
3. You can't create a client instance and run an SDK function outside the Angular zone every time you need to run an SDK function as if you create more than one client instance you can get errors.