Angular2 SSO using webauth.renewAuth for silent callback

Help
, , , ,
1

Hi,

I am trying to integrate auth0 into my Angular 2 application. Currently the Auth0 authentication servers are being hosted on my customer’s auth0 domain. I can successfully POST a user’s email address, plus callback URL (which is my angular 2 application), to generate a password less magic link. This is emailed, and when used, takes me to my application, with the URL token, which includes the ‘access_token’ to authenticate the user against my customers authentication server.

A new WebAuth object is generated, using the customers server domain, and the clientID (userID).

At the point everything is as expected, but I want the user to stay logged in, even over a long period of time, therefore I am using the webauth.renewAuth function, to silently keep authenticating the user behind the scene.

At this point, I pass in the expected properties to the function, the audience, scope, a redirectUri, and usePostMessage. The redirectUri is a URL to a simple HTML page with the following inside

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.auth0.com/js/auth0/8.4.0/auth0.min.js"></script>
    <script type="text/javascript">
      const webAuth = new auth0.WebAuth({
        domain: 'customers_server_address',
        clientID: 'clientID'
      });
      const result = webAuth.parseHash(window.location.hash, function(err, data) {
        parent.postMessage(err || data, window.location.origin);
      });
    </script>
  </head>
  <body></body>
</html>

so the renewAuth looks like this:

this.webauth.renewAuth({
        audience: AUDIENCE,
        scope: 'openid profile email',
        redirectUri: `${window.location.origin}/iframe`,
        usePostMessage: true
      }, function (err, authResult) {

At this point I found that angular would not run the callback at all, and kept cancelling the request to the iframe (my assumption is the security policy is stopping it). I found by wrapping the entire function in:

this._ngZone.runOutsideAngular(() => {

The code was able to run and execute without being stopped by angular. Unfortunately at the point the iframe the function is generating gets added into the DOM, and therefore (I assume) is picked up by angular’s zone.js security policy. When using a debugger on the return of the function, I can see the newly added iframe, with its src set to the customers authentication server, but all inner content stripped out. The call to authorise the user then fails.

Is there anyway you know of to run the webauth calls in angular 2, without them being cancelled? I have looked into the DomSanitizer class, but as all the methods on this are to sanatise a value, url etc to be consumed by another angular component, this is of no use, as the auth0 calls are being run outside of angular’s control.

thanks