JS API login from Outlook add-in

Question

Context

I'm building an Office 365 add-in - to be run in Outlook, both desktop and web -, and I'm at the stage where I want to try logging the user in and getting an access token. However, I'm running into trouble getting the login to work.

The Troubles

I have registered the application in Entra, and I have an App ID for it. I filled out my WebApplicationInfo element in the manifest, and that's where the problems start.

Rejected sideloading

If I use the app URL Entra gives me, and get something like this

<WebApplicationInfo>
  <Id>foo</Id>
  <Resource>api://foo</Resource>
  <Scopes>
    <Scope>User.Read</Scope>
    <Scope>Mail.Read</Scope>
    <Scope>offline_access</Scope>
    <Scope>email</Scope>
    <Scope>profile</Scope>
    <Scope>openid</Scope>
  </Scopes>
</WebApplicationInfo>

Outlook will reject the sideload - but will not give any reasons why - and nothing will work (obviously). The Resource element looks strange, but according to Microsoft docs, this is by-design as this is how Entra enforces uniqueness in URLs.
In fact, I've gone through every iteration according to the table at https://learn.microsoft.com/en-us/entra/identity-platform/reference-app-manifest#identifieruris-attribute, and unless I have the authority set exactly to localhost:3000, Exchange will reject the sideload - not even a different port will be accepted.

If I comment this element, things are working, but - as expected - calling the auth APIs will give an error as the add-in is not signaling auth capability.

Client error

If I "fix" the app URL to look something like an actual URL, such as this one

<WebApplicationInfo>
  <Id>foo</Id>
  <Resource>api://localhost:3000/foo</Resource>
  <Scopes>
    <Scope>User.Read</Scope>
    <Scope>Mail.Read</Scope>
    <Scope>offline_access</Scope>
    <Scope>email</Scope>
    <Scope>profile</Scope>
    <Scope>openid</Scope>
  </Scopes>
</WebApplicationInfo>

Outlook will accept the manifest for sideloading and I am able to call the Javascript APIs to initiate login, but this will predictably fail, because it's pointing to a localhost origin. Furthermore, the Microsoft documentation for the element shows the example as

<WebApplicationInfo>
  <Id>12345678-abcd-1234-efab-123456789abc</Id>
  <Resource>api://contoso.com/12345678-abcd-1234-efab-123456789abc</Resource>
  <Scopes>
    <Scope>Files.Read.All</Scope>
    <Scope>offline_access</Scope>
    <Scope>openid</Scope>
    <Scope>profile</Scope>
  </Scopes>
</WebApplicationInfo>

where the host is also set to a non-random value, leading me to believe the Entra UI is giving me the wrong information.

The question

How do I get the login working from within an add-in? What do I need to specify in the WebApplicationInfo element in order to be able to use the JS APIs?