Guardian serviceUrl with Custom Domain

Hello,

We are using auth0-guardian.js to create a custom MFA page (using classic Universal Login), and in general all has been working well since we migrated to Universal Login about six months ago. However, some users are now receiving the following error when starting the MFA flow (in Chrome only):

Error: Request has been terminated
Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.
    at y.crossDomainError

Which I believe is related to the cross-domain nature of using the https://{tenant}.guardian.auth0.com URL, while on our custom domain.

I found this closed post in the forums in which the original poster helpfully updated the message to say they had success using a serviceUrl like https://{custom domain}/guardian. I have tried using this URL with internal accounts, and it seems to work well.

However, I cannot find support for this URL described anywhere in Auth0’s documentation, and without Auth0 officially stating that this URL is supported, I am nervous to release this to production. Could someone from Auth0 confirm whether using a custom domain Guardian URL like this is supported? It seems like it should be, as it would make cross-domain support much more reliable.

Thanks,
Walker

Hi, Walker!

Can you please let us know which version of the Guardian SDK you’re using? While there was an error that could pop up in certain circumstances when third-party cookies were disabled previously, an update last year resolved that particular issue. If below version 1.3.0, please try updating to the latest version.

If that does not resolve the issue, can you please also share which version of Chrome this is occurring on?

Hi, Kris – thanks for getting back to me so quickly!

We were using version 1.3.2 of the Guardian SDK but recently encountered a similar, but different, issue with Safari that was basically the same as this issue (“cannot connect to real time channel”). In looking at the repo on Github I noticed there was a version bump to 1.3.3 that included some default transport changes that was never published to NPM, so tried upgrading to that by manually pointing the SDK to github:auth0/auth0-guardian.js#81de93a0f8e760cb4cc8c018fc5c0fb3faa554c3, which seemed to fix the Safari issue. (separate point – could Auth0 publish the 1.3.3 release to NPM?)

Our client is experiencing the issue in Chrome 79.0.3945, and, since my original post, I have been able to confirm with the client that forcing the Guardian SDK to use https://{custom domain}/guardian as the serviceUrl does, in fact, resolve the issue. Our team has not been able to replicate the issue internally, so there seems to be a browser policy blocking the cross-domain request (the client is on an enterprise network).

It seems to me like using the custom domain (rather than an auth0.com domain) would be a much more reliable approach, and I would very much like to release this to production, but don’t really want to be using an undocumented/unconfirmed URL in production.

Thanks very much for your help!

Hi @Kris.B – just wanted to see if there was any update on this? The https://{custom domain}/guardian serviceUrl has been working well for our small group of users, but would much prefer an acknowledgement from Auth0 before rolling it out more broadly. Thanks!

This is happening because of the CORS (Cross Origin Resource Sharing) error. This error occurs when you try to access a domain/resource from another domain. You cannot issue requests through the XMLHttpRequest to other domains or subdomains. For example, if you are doing something like writing HTML and Javascript in a code editor on your personal computer, and testing the output in your browser, you might probably get error messages about Cross Origin Requests .

JSONP ( JSON with Padding ) is a method commonly used to bypass the cross-domain policies in web browsers.

If this is for local development and you are using Chrome , you need to run Chrome with a couple of arguments to relax security like this:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security

If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

Access-Control-Allow-Origin: http://localhost:9999

The other easy way out, would be to create a proxy on your local server, which gets the remote request and then just forwards it back to your javascript.