title: SSO on Microsoft Edge not working but does work on IE11, Chrome, Safari, Firefox - via Office.js add-in
body: <p>The following oAuth2 SSO code in my Office.js addin application works great in IE11, Chrome, Safari and Firefox, but doesn't work in Microsoft Edge.  I can see the bearer token is being returned to the pop-up dialog via the url:</p>
  
  <p><a href="https://localhost:3000/login?access_token=ya29.ImG6By-0ZWPQB4MsYxxxxxxxxxxxxxxxxxxxxxxxxxxxxE5XsM9v7SBi-OaUBBQucO05luKVP0pYoSrcYzbaUKAAX&amp;token_type=Bearer" rel="nofollow noreferrer">https://localhost:3000/login?access_token=ya29.ImG6By-0ZWPQB4MsYxxxxxxxxxxxxxxxxxxxxxxxxxxxxE5XsM9v7SBi-OaUBBQucO05luKVP0pYoSrcYzbaUKAAX&amp;token_type=Bearer</a></p>
  
  <p>I can also see that the asyncResult.status == succeeded, i.e.</p>
  
  <p>[object Object]: {status: "succeeded", value: Object}
  status: "succeeded"</p>
  
  <p>value: Object</p>
  
  <p>addEventHandler: function (){var d=OSF.DDA.SyncMethodCalls[OSF.DDA.SyncMethodNames.AddMessageHandler.id],c=d.verifyAndExtractCall(arguments,a,b),e=c[Microsoft.Office.WebExtension.Parameters.EventType],f=c[Microsoft.Office.WebExtension.Parameters.Handler];return b.addEventHandlerAndFireQueuedEvent(e,f)}
  arguments: null
  caller: null
  length: 0
  name: "value"</p>
  
  <p>prototype: Object</p>
  
  <p><strong>proto</strong>: function() { [native code] }</p>
  
  <p>close: function (){var c=OSF._OfficeAppFactory.getHostFacade()[OSF.DDA.DispIdHost.Methods.CloseDialog];c(arguments,g,b,a)}</p>
  
  <p>sendMessage: function (){var c=OSF._OfficeAppFactory.getHostFacade()[OSF.DDA.DispIdHost.Methods.SendMessage];return c(arguments,b,a)}</p>
  
  <p><strong>proto</strong>: Object</p>
  
  <p><strong>proto</strong>: Object</p>
  
  <p>However, the "console.log('hello');" doesn't get called when Microsoft Edge is running the sidebar/add-in.  </p>
  
  <p>The pop-up dialog is showing this in the F12 debug console:</p>
  
  <p>HTTP403: FORBIDDEN - The server understood the request, but is refusing to fulfill it.
  (XHR)POST - <a href="https://browser.pipe.aria.microsoft.com/Collector/3.0/?qsp=true&amp;content-type=application%2Fbond-compact-binary&amp;client-id=NO_AUTH&amp;sdk-version=AWT-Web-JS-1.1.1&amp;x-apikey=a387cfcf60114a43a7699f9fbb49289e-9bceb9fe-1c06-460f-96c5-6a0b247358bc-7238&amp;client-time-epoch-millis=1579626709267&amp;time-delta-to-apply-millis=961" rel="nofollow noreferrer">https://browser.pipe.aria.microsoft.com/Collector/3.0/?qsp=true&amp;content-type=application%2Fbond-compact-binary&amp;client-id=NO_AUTH&amp;sdk-version=AWT-Web-JS-1.1.1&amp;x-apikey=a387cfcf60114a43a7699f9fbb49289e-9bceb9fe-1c06-460f-96c5-6a0b247358bc-7238&amp;client-time-epoch-millis=1579626709267&amp;time-delta-to-apply-millis=961</a></p>
  
  <p>Any ideas?</p>
  
  <pre><code>export function loginUsingOAuth() {
      try {
          const sealUrl = getFromStorage('seal_url', STORAGE_TYPE.LOCAL_STORAGE);
          const redirectUrl = `${window.location.protocol}//${window.location.host}/login`;
  
          let displayInIframe = false;
          let promptBeforeOpen = false;
  
          if (typeof sealUrl !== 'undefined' &amp;&amp; sealUrl) {
              const oAuthUrl = `${sealUrl}/seal-ws/oauth2/login?redirect_uri=${redirectUrl}`;
  
              Office.context.ui.displayDialogAsync(
                  oAuthUrl,
                  {
                      height: 80,
                      width: 80,
                      displayInIframe,
                      promptBeforeOpen
                  },
                  asyncResult =&gt; {
                      console.log('asyncResult');
                      console.log(asyncResult);
                      addLog(LOG_TYPE.INFO, 'authentication.loginUsingOAuth', asyncResult);
                      if (asyncResult.status !== 'failed') {
                          const dialog = asyncResult.value;
  
                          dialog.addEventHandler(Office.EventType.DialogMessageReceived, args =&gt; {
                              console.log('hello');
  </code></pre>
  
  <p>Maybe this is actually a routing issue when executing in Edge? The "/login" callback is routed to the AuthCallback.js component:</p>
  
  <pre><code>
  const Routes = () =&gt; (
      &lt;BrowserRouter&gt;
          &lt;Switch&gt;
              &lt;Route exact path="/login" component={AuthCallback} /&gt;
              &lt;Route path="/" component={BaseLayout} /&gt;
          &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
  );
  </code></pre>
  
  <p>The constructor of the AuthCallback.js component calls messageParent after a short pause:</p>
  
  <pre><code>    constructor(props) {
          super(props);
          const paramsObj = queryString.parse(props.location.search);
          const paramsStr = JSON.stringify(paramsObj);
          setTimeout(() =&gt; {
              Office.context.ui.messageParent(paramsStr);
          }, 1200);
      }
  </code></pre>
  
  <p>I'm starting to wonder if Edge is messing with the redirect.  In the image below you can see that IE and Edge are returning different status codes for the same sign-on operation:</p>
  
  <p><a href="https://i.stack.imgur.com/j9Eao.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j9Eao.png" alt="enter image description here"></a></p>