Handling login in embedded web app (iframe) in Teams app on Mac

Question

We have a web app (single page application) that uses msal-react for authentication. We recently introduced it as a Teams app, which has been working seamlessly for Windows users with silent login.

const { login, error } = useMsalAuthentication(
  InteractionType.Silent,
  loginRequest
)

However, a problem arises when Mac users open the app in the Teams client (no problems accessing the Teams app in the browser) - silent login fails with the following error:

AADSTS50058: A silent sign-in request was sent, but no user is signed in. The cookies used to represent the user's session were not sent in the request to Azure AD (Azure Active Directory). This can happen if the user is using Internet Explorer or Edge, and the web app sending the silent sign-in request is in a different Internet Explorer security zone than the Azure AD endpoint (login.microsoftonline.com).

Why isn't the user signed in during the silent login when accessing through the Teams client on Mac? Is it possible to achieve this?

I'd really like to solve the issue here, as it would make it unnecessary to dive any deeper. But, if it isn't possible, then read further.

If silent login fails, we retry with a redirect login by default.

login(InteractionType.Redirect, loginRequest)

This fails with the following error:

BrowserAuthError: redirect_in_iframe: Redirects are not supported for iframed or brokered applications. Please ensure you are using MSAL.js in a top frame of the window if using the redirect APIs, or use the popup APIs.

Following the advice of error, we tried switching to popup login:

login(InteractionType.Popup, loginRequest)

But this also fails:

BrowserAuthError: popup_window_error: Error opening popup window. This can happen if you are using IE or if popups are blocked in the browser.

So now I'm quite confused, I can't do any interactive login with MSAL. So then I tried using the Teams JS SDK to get an auth token (although I wouldn't know how to authenticate the user with that token), but that seemed to just fail silently without logging anything:

authentication
  .getAuthToken()
  .then(() => {
    console.log('Get auth token successful')
  })
  .catch(error => {
    console.error('Get auth token failed:', error)
  })

I also tried using authentication.authenticate(), but quickly realized you can't pass it the login.onmicrosoft URL.