LoginWithPopup doesn't work in Microsoft Word add-in on Mac

[Svn-Sp]

Checklist

• The issue can be reproduced in the auth0-spa-js sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the documentation and API documentation, and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

We are developing a Microsoft Word add-in and would like to use auth0 to authenticate our users.

Our steps so far:

1. First we tried to use LoginWithRedirect. However, since the add-in is running in an Iframe inside of MS Word it doesn't work and we cannot switch to the classical authentication experience (where we could theoretically enable displaying the dialog in an iframe) since we need to support enterprise connections.
2. After that we tried to use LoginWithPopup. This works fine for MS Word in Web on Linux and Windows and for MS Word Desktop on Windows. It doesn't open a popup for MS Word Desktop on Mac though. It's a known issue that window.open() will behave unreliably for MS Word add-ins and the proposed solution for it is to use the Office Dialog Api. (But this is not supported by the auth0 package)

How can we still integrate Auth0 in our product?

tl;dr
We have an app running in an iframe and need to support enterprise connections. Due to restrictions of the environment the app runs in, the default LoginWithPopup will fail because we can't rely on the window.open() method

Reproduction

1. Create Javascript app for Microsoft Office add-in
2. Add button calling auth0 LoginWithPopup Method
3. Run app on Microsoft Word Desktop on Mac
   -> The popup won't open

Additional context

Old sample project
There is this sample project from 2019 but it uses the less-secure method of retrieving the access token directly and it supports only third party providers.

Other, unanswered post about the same issue
https://community.auth0.com/t/how-to-intregrate-auth0-in-office-add-in-with-react/102392

auth0-spa-js version

2.1.3

Which framework are you using (React, Angular, Vue...)?

React (but should be irrelevant)

Framework version

18.3.1 (but should be irrelevant)

Which browsers have you tested in?

The issue occurs when running on MS Word Desktop on Mac, which uses Safari Webkit. For Firefox on Linux and Edge on Windows it works.

[frederikprijck]

This SDK is build for Single Page Applications. We have no explicit support for Office Addins, so it may or may not work.

That said, we can try and see if we can make it work, but there's no guarentee.

• loginWithPopup: this doesnt work for u because window.open.
• loginWithRedirect: this doesnt work for u because of iframes.

However, loginWithRedirect takes an openUrl option that ensures our SDK does not open a browser, but allows you to do whatever u like. We also use it to integrate our SDK on platforms such as ionic.

loginWithRedirect({
  openUrl(url) {
    // here u can use the url abnd open whichever u want, including office's dialog api.
  }
})

This should allow you to integrate with the Dialog API from Office and take it from there. But you still need to ensure you call our SDK's handleRedirectCallback to ensure it finishes the transaction.

So what I think you want to try:

• Use loginWithRedirect with openUrl
• Inside the openUrl, open the Office Dialog API
• Once authenticated, Auth0 will redirect back to a redirect uri and include a code + state
• Take that URL, and pass it to our SDK's handleRedirectCallback

I am not familiar with Office Addins or the Office Dialog API, so it may or may not work. Buit this should give you a direction to look into.

[frederikprijck]

Closing, feel free to let us know if we can help further.

[lbakshi]

Hey @Svn-Sp , have you had any success with this? Also trying to explore auth0 and a Microsoft word plugin and running into the same issues of close to no clear documentation on the matter.