Auth0: iOS/Safari and fixing blank page during auth

September 20, 2018

Diagnosing

I discovered that there is an issue with Safari that causes you to hit a "blank page" during SMS authentication via Auth0.

In particular, these platforms/devices were affected:

• Mac OS X + Safari
• iOS + Safari
• iOS + Chrome (webkit being the common factor on iOS?)

Facebook/Google authentication seemed fine, it was just SMS that would fail. This issue was most reproducible by clearing the browser cookies, and authenticating – you'd seem to hit the blank page every time. On second auth attempt, it would usually succeed!

We were using auth0.com as our authentication domains (i.e. NOT using a custom auth domain), and were not using the "universal login page" feature – we used a custom login page we had written.

We debugged a bit, and discovered this blank page is hosting an iframe that is trying to communicate with our site via the postMessage API.

After much research, we discovered that this is a documented Auth0 problem;

• Auth0's Cross-Origin Authentication page specifically states "When third party cookies are not available, auth0.js will render an iframe…"
• Digging further, you can find a very relevant github issue

The fix: Custom Domains

To get around the issue, you can switch to a Custom Domain. Doing this broadly involves:

• Setting up a new subdomain, e.g. auth.mysite.tld, to handle authentication
• Reconfiguring your Auth0 client (e.g. auth0.js) to recognize the new domain
• Reconfiguring any third party auth methods (Facebook, Google Accounts, etc.) to recognize this new auth.mysite.tld as a valid OAuth redirect URI

Doing this, it was possible to login via SMS on iOS devices again!

---