reactjsoutlook-addinoutlook-web-addins

Outlook React Add-in white screen after Microsoft Login (Dialog does not close)


We developed an Outlook Add-in for Sharepoint access for the user. To access SharePoint the customer needs to login with his Microsoft account.

On IOs, the desktop application and outlook on the web everything works fine after the user logged in he gets redirected to the homescreen of the Add-in.

On Android it seems like the opened dialog doesn't close itself and doesn't redirect after loggin in. There are no errors or information given. Only a blank white screen. As soon the user closes down the Add-in and reopens it, everything works like expected because he is allready logged in.

Did anyone face similar issues and got a fix?

Heres the snippet of the function which should close down the dialog (which works on any device and os except for android)

const onLoginMessage = async ({message}: { message: string, origin: string }) => {
    const {
      status,
      response,
      newLocalStorage
    }: LoginResponse = JSON.parse(message);
    loginDialog.close();

    if (status === 'success') {
      // We now have a valid access token.
      setMsalInformationToLocalStorage(newLocalStorage);
      msalPublicClientApplication.setActiveAccount(response.account);

      location.reload();
    }

    loginComplete(status);
  }
};

I found someone who has the same problem and on his side enabling https solved the problem. But this didn't help on our side.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
           xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0" xsi:type="MailApp">
    <Id>{{ADDIN_ID}}</Id>
    <Version>1.6.0</Version>
    <ProviderName>Test</ProviderName>
    <DefaultLocale>de-DE</DefaultLocale>
    <DisplayName DefaultValue="LOCAL-Outlook-2-SharePoint"/>
    <Description DefaultValue="Ausgewählte"/>
    <IconUrl DefaultValue="https://{{ADDIN_URL}}/assets/icon-64.png"/>
    <HighResolutionIconUrl DefaultValue="https://{{ADDIN_URL}}/assets/icon-128.png"/>
    <SupportUrl DefaultValue=""/>
    <AppDomains>
        <AppDomain>https://{{ADDIN_URL}}</AppDomain>
        <AppDomain>{{API_URL}}</AppDomain>
    </AppDomains>
    <Hosts>
        <Host Name="Mailbox"/>
    </Hosts>
    <Requirements>
        <Sets>
            <Set Name="Mailbox" MinVersion="1.3"/>
        </Sets>
    </Requirements>
    <FormSettings>
        <Form xsi:type="ItemRead">
            <DesktopSettings>
                <SourceLocation DefaultValue="https://{{ADDIN_URL}}/taskpane.html"/>
                <RequestedHeight>250</RequestedHeight>
            </DesktopSettings>
        </Form>
    </FormSettings>
    <Permissions>ReadWriteMailbox</Permissions>
    <Rule xsi:type="RuleCollection" Mode="Or">
        <Rule xsi:type="ItemIs" ItemType="Message" FormType="Read"/>
    </Rule>
    <DisableEntityHighlighting>false</DisableEntityHighlighting>
    <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">

        <Requirements>
            <bt:Sets DefaultMinVersion="1.3">
                <bt:Set Name="Mailbox" />
            </bt:Sets>
        </Requirements>
        <Hosts>
            <Host xsi:type="MailHost">

                <DesktopFormFactor>
                    <!-- Message compose form -->
                    <ExtensionPoint xsi:type="MessageComposeCommandSurface">
                        <OfficeTab id="TabDefault">
                            <Group id="msgComposeDemoGroup">
                                <Label resid="GroupLabel" />
                                <Control xsi:type="Button" id="msgComposeFunctionButton">
                                    <Label resid="TaskpaneButton.Label" />
                                    <Supertip>
                                        <Title resid="TaskpaneButton.Title" />
                                        <Description resid="TaskpaneButton.Tooltip"/>
                                    </Supertip>
                                    <Icon>
                                        <bt:Image size="16" resid="Icon.16x16" />
                                        <bt:Image size="32" resid="Icon.32x32" />
                                        <bt:Image size="80" resid="Icon.80x80" />
                                    </Icon>
                                    <Action xsi:type="ShowTaskpane">
                                        <SourceLocation resid="TaskpaneRead.Url" />
                                    </Action>
                                </Control>
                            </Group>
                        </OfficeTab>
                    </ExtensionPoint>

                    <!-- Message read form -->
                    <ExtensionPoint xsi:type="MessageReadCommandSurface">
                        <OfficeTab id="TabDefault">
                            <Group id="msgReadDemoGroup">
                                <Label resid="GroupLabel" />
                                <Control xsi:type="Button" id="msgReadFunctionButton">
                                    <Label resid="TaskpaneButtonRead.Label" />
                                    <Supertip>
                                        <Title resid="TaskpaneButtonRead.Label" />
                                        <Description resid="TaskpaneButtonRead.Label" />
                                    </Supertip>
                                    <Icon>
                                        <bt:Image size="16" resid="Icon.16x16" />
                                        <bt:Image size="32" resid="Icon.32x32" />
                                        <bt:Image size="80" resid="Icon.80x80" />
                                    </Icon>
                                    <Action xsi:type="ShowTaskpane">
                                        <SourceLocation resid="TaskpaneRead.Url" />
                                    </Action>
                                </Control>
                                <Control xsi:type="Menu" id="msgReadMenuButton">
                                    <Label resid="TaskpaneButtonRead.Label" />
                                    <Supertip>
                                        <Title resid="TaskpaneButtonRead.Label" />
                                        <Description resid="TaskpaneButtonRead.Label" />
                                    </Supertip>
                                    <Icon>
                                        <bt:Image size="16" resid="Icon.16x16" />
                                        <bt:Image size="32" resid="Icon.32x32" />
                                        <bt:Image size="80" resid="Icon.80x80" />
                                    </Icon>
                                    <Items>
                                        <Item id="msgReadMenuItem1">
                                            <Label resid="TaskpaneButtonRead.Label" />
                                            <Supertip>
                                                <Title resid="TaskpaneButtonRead.Label" />
                                                <Description resid="TaskpaneButtonRead.Tooltip" />
                                            </Supertip>
                                            <Icon>
                                                <bt:Image size="16" resid="Icon.16x16" />
                                                <bt:Image size="32" resid="Icon.32x32" />
                                                <bt:Image size="80" resid="Icon.80x80" />
                                            </Icon>
                                            <Action xsi:type="ShowTaskpane">
                                                <SourceLocation resid="TaskpaneRead.Url" />
                                            </Action>
                                        </Item>
                                        <Item id="msgReadMenuItem2">
                                            <Label resid="TaskpaneButtonRead.Label" />
                                            <Supertip>
                                                <Title resid="TaskpaneButtonRead.Label" />
                                                <Description resid="TaskpaneButtonRead.Tooltip" />
                                            </Supertip>
                                            <Icon>
                                                <bt:Image size="16" resid="Icon.16x16" />
                                                <bt:Image size="32" resid="Icon.32x32" />
                                                <bt:Image size="80" resid="Icon.80x80" />
                                            </Icon>
                                            <Action xsi:type="ShowTaskpane">
                                                <SourceLocation resid="TaskpaneRead.Url" />
                                            </Action>
                                        </Item>
                                        <Item id="msgReadMenuItem3">
                                            <Label resid="TaskpaneButtonRead.Label" />
                                            <Supertip>
                                                <Title resid="TaskpaneButtonRead.Label" />
                                                <Description resid="TaskpaneButtonRead.Tooltip" />
                                            </Supertip>
                                            <Icon>
                                                <bt:Image size="16" resid="Icon.16x16" />
                                                <bt:Image size="32" resid="Icon.32x32" />
                                                <bt:Image size="80" resid="Icon.80x80" />
                                            </Icon>
                                            <Action xsi:type="ShowTaskpane">
                                                <SourceLocation resid="TaskpaneRead.Url" />
                                            </Action>
                                        </Item>
                                    </Items>
                                </Control>
                                <!-- Task pane button -->
                                <Control xsi:type="Button" id="msgReadOpenPaneButton">
                                    <Label resid="TaskpaneButtonRead.Label" />
                                    <Supertip>
                                        <Title resid="TaskpaneButtonRead.Label" />
                                        <Description resid="TaskpaneButtonRead.Tooltip" />
                                    </Supertip>
                                    <Icon>
                                        <bt:Image size="16" resid="Icon.16x16" />
                                        <bt:Image size="32" resid="Icon.32x32" />
                                        <bt:Image size="80" resid="Icon.80x80" />
                                    </Icon>
                                    <Action xsi:type="ShowTaskpane">
                                        <SourceLocation resid="TaskpaneRead.Url" />
                                    </Action>
                                </Control>
                            </Group>
                        </OfficeTab>
                    </ExtensionPoint>

                </DesktopFormFactor>
            </Host>
        </Hosts>

        <Resources>
            <bt:Images>
                <bt:Image id="Icon.16x16" DefaultValue="https://{{ADDIN_URL}}/assets/icon-16.png"/>
                <bt:Image id="Icon.32x32" DefaultValue="https://{{ADDIN_URL}}/assets/icon-32.png"/>
                <bt:Image id="Icon.80x80" DefaultValue="https://{{ADDIN_URL}}/assets/icon-80.png"/>
            </bt:Images>
            <bt:Urls>
                <bt:Url id="TaskpaneRead.Url" DefaultValue="https://{{ADDIN_URL}}/taskpane.html"/>
                <bt:Url id="Taskpane.Url" DefaultValue="https://{{ADDIN_URL}}/taskpane-write.html"/>
            </bt:Urls>
            <bt:ShortStrings>
                <bt:String id="GroupLabel" DefaultValue="LOCAL-Outlook-2-SharePoint"/>
                <bt:String id="TaskpaneButton.Label" DefaultValue="An E-Mail anhängen"/>
                <bt:String id="TaskpaneButton.Title" DefaultValue="An E-Mail anhängen"/>
                <bt:String id="GroupLabelRead" DefaultValue="LOCAL-Outlook-2-SharePoint"/>
                <bt:String id="TaskpaneButtonRead.Label" DefaultValue="E-Mail speichern"/>
            </bt:ShortStrings>
            <bt:LongStrings>
                <bt:String id="TaskpaneButton.Label" DefaultValue="An E-Mail anhängen"/>
                <bt:String id="TaskpaneButtonRead.Label" DefaultValue="An E-Mail anhängen"/>

                <bt:String id="TaskpaneButton.Tooltip"
                           DefaultValue="Öffnet ein Fenster."/>
                <bt:String id="TaskpaneButtonRead.Tooltip"
                           DefaultValue="Öffnet ein Fenster."/>
            </bt:LongStrings>
        </Resources>

        <!-- VersionOverrides for the v1.1 schema -->
        <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1" xsi:type="VersionOverridesV1_1">

            <Requirements>
                <bt:Sets DefaultMinVersion="1.3">
                    <bt:Set Name="Mailbox" />
                </bt:Sets>
            </Requirements>
            <Hosts>
                <Host xsi:type="MailHost">

                    <DesktopFormFactor>
                        <ExtensionPoint xsi:type="MessageReadCommandSurface">
                            <OfficeTab id="TabDefault">
                                <Group id="msgReadGroup">
                                    <Label resid="GroupLabelRead"/>
                                    <Control xsi:type="Button" id="msgReadOpenPaneButton">
                                        <Label resid="TaskpaneButtonRead.Label"/>
                                        <Supertip>
                                            <Title resid="TaskpaneButtonRead.Label"/>
                                            <Description resid="TaskpaneButtonRead.Tooltip"/>
                                        </Supertip>
                                        <Icon>
                                            <bt:Image size="16" resid="Icon.16x16"/>
                                            <bt:Image size="32" resid="Icon.32x32"/>
                                            <bt:Image size="80" resid="Icon.80x80"/>
                                        </Icon>
                                        <Action xsi:type="ShowTaskpane">
                                            <SourceLocation resid="TaskpaneRead.Url"/>
                                        </Action>
                                    </Control>
                                </Group>
                            </OfficeTab>
                        </ExtensionPoint>
                        <!-- Message Compose -->
                        <ExtensionPoint xsi:type="MessageComposeCommandSurface">
                            <OfficeTab id="TabDefault">
                                <Group id="msgComposeCmdGroup">
                                    <Label resid="GroupLabel"/>
                                    <Control xsi:type="Button" id="msgComposeInsertGist">
                                        <Label resid="TaskpaneButton.Label"/>
                                        <Supertip>
                                            <Title resid="TaskpaneButton.Title"/>
                                            <Description resid="TaskpaneButton.Tooltip"/>
                                        </Supertip>
                                        <Icon>
                                            <bt:Image size="16" resid="Icon.16x16"/>
                                            <bt:Image size="32" resid="Icon.32x32"/>
                                            <bt:Image size="80" resid="Icon.80x80"/>
                                        </Icon>
                                        <Action xsi:type="ShowTaskpane">
                                            <SourceLocation resid="Taskpane.Url"/>
                                        </Action>
                                    </Control>
                                </Group>
                            </OfficeTab>
                        </ExtensionPoint>

                    </DesktopFormFactor>

                    <MobileFormFactor>
                        <ExtensionPoint xsi:type="MobileMessageReadCommandSurface">
                            <Group id="mobileMsgRead">
                                <Label resid="GroupLabel" />
                                <Control xsi:type="MobileButton" id="mblTaskPane">
                                    <Label resid="TaskpaneButtonRead.Label" />
                                    <Icon xsi:type="bt:MobileIconList">
                                        <bt:Image size="25" scale="1" resid="Icon.32x32" />
                                        <bt:Image size="25" scale="2" resid="Icon.32x32" />
                                        <bt:Image size="25" scale="3" resid="Icon.32x32" />

                                        <bt:Image size="32" scale="1" resid="Icon.32x32" />
                                        <bt:Image size="32" scale="2" resid="Icon.32x32" />
                                        <bt:Image size="32" scale="3" resid="Icon.32x32" />

                                        <bt:Image size="48" scale="1" resid="Icon.32x32" />
                                        <bt:Image size="48" scale="2" resid="Icon.32x32" />
                                        <bt:Image size="48" scale="3" resid="Icon.32x32" />
                                    </Icon>
                                    <Action xsi:type="ShowTaskpane">
                                        <SourceLocation resid="TaskpaneReadUrl" />
                                    </Action>
                                </Control>
                            </Group>
                        </ExtensionPoint>
                    </MobileFormFactor>
                </Host>
            </Hosts>

            <Resources>
                <bt:Images>
                    <bt:Image id="Icon.16x16" DefaultValue="https://{{ADDIN_URL}}/assets/icon-16.png"/>
                    <bt:Image id="Icon.32x32" DefaultValue="https://{{ADDIN_URL}}/assets/icon-32.png"/>
                    <bt:Image id="Icon.80x80" DefaultValue="https://{{ADDIN_URL}}/assets/icon-80.png"/>
                </bt:Images>
                <bt:Urls>
                    <bt:Url id="TaskpaneRead.Url" DefaultValue="https://{{ADDIN_URL}}/taskpane.html"/>
                    <bt:Url id="TaskpaneReadUrl" DefaultValue="https://{{ADDIN_URL}}/taskpane.html"/>
                    <bt:Url id="Taskpane.Url" DefaultValue="https://{{ADDIN_URL}}/taskpane-write.html"/>
                </bt:Urls>
                <bt:ShortStrings>
                    <bt:String id="GroupLabel" DefaultValue="LOCAL-Outlook-2-SharePoint"/>
                    <bt:String id="TaskpaneButton.Label" DefaultValue="An E-Mail anhängen"/>
                    <bt:String id="TaskpaneButton.Title" DefaultValue="An E-Mail anhängen"/>
                    <bt:String id="GroupLabelRead" DefaultValue="LOCAL"/>
                    <bt:String id="TaskpaneButtonRead.Label" DefaultValue="E-Mail speichern"/>
                </bt:ShortStrings>
                <bt:LongStrings>
                    <bt:String id="TaskpaneButton.Label" DefaultValue="An E-Mail anhängen"/>
                    <bt:String id="TaskpaneButtonRead.Label" DefaultValue="An E-Mail anhängen"/>

                    <bt:String id="TaskpaneButton.Tooltip"
                               DefaultValue="Öffnet ein Fenster."/>
                    <bt:String id="TaskpaneButtonRead.Tooltip"
                               DefaultValue="Öffnet ein Fenster."/>
                </bt:LongStrings>
            </Resources>
            <WebApplicationInfo>
                <Id>{{APP_REGISTRATION_ID}}</Id>
                <Resource>api://{{ADDIN_URL}}/{{APP_REGISTRATION_ID}}</Resource>
                <Scopes>
                    <Scope>Files.ReadWrite</Scope>
                    <Scope>Mail.Read</Scope>
                    <Scope>Mail.Read.Shared</Scope>
                    <Scope>offline_access</Scope>
                    <Scope>openid</Scope>
                    <Scope>profile</Scope>
                    <Scope>Sites.ReadWrite.All</Scope>
                    <Scope>User.Read</Scope>
                </Scopes>
            </WebApplicationInfo>
        </VersionOverrides>
    </VersionOverrides>
</OfficeApp>

Solution

  • I have a possible solution which worked on our side. I will refer to the Office Examples to clearify what the actual problem is.

    https://github.com/OfficeDev/Office-Add-in-samples/blob/main/Samples/auth/Office-Add-in-Microsoft-Graph-React/utilities/office-apis-helpers.ts

    Following this GitHub which contains the Outlook-Addin examples is where we found the example we used for the authentication for the user. In this file Lines 87-99 resulted in a problem because the Office.context.ui.displayDialogAsync wasn't executed properly.

    I moved the corresponding binding under the processLogoutDialogEvent function which is mentioned as a callback within the displayDialogAsync and this resulted in fixing the problem. We don't know why this is only a problem for Android not for IO's neither Outlook on the web and the on premise variant of outlook.