eirikb/app.js

## app.js
import "core-js/stable";
import "regenerator-runtime/runtime";
import 'whatwg-fetch';
import { UserAgentApplication } from 'msal';

const clientId = '<PUT YOUR CLIENT ID HERE>';
const scopes = ['User.Read'];
const msal = new UserAgentApplication({ auth: { clientId } });

const p = document.querySelector('p');

function log(text) {
  p.innerText = JSON.stringify(text);
}

async function callApi() {
  log('Call API');
  try {
    const { accessToken } = await msal.acquireTokenSilent({ scopes });
    log(accessToken);
    const me = await fetch('https://graph.microsoft.com/v1.0/me', {
      headers: {
        authorization: `Bearer ${accessToken}`
      }
    }).then(res => res.json());
    log(me);
  } catch (e) {
    log(e);
    throw e;
  }
}
msal.handleRedirectCallback(res => {
  if (res instanceof Error) {
    log(res);
  } else {
    callApi();
  }
});

Office.onReady(() => {
  log('ready');
  if (msal.getAccount()) {
    callApi();
  } else if (msal.getLoginInProgress()) {
    log('Logging in...');
  } else {
    msal.loginRedirect({ scopes });
  }
});

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
</head>

<body>
<p></p>
<script src="./app.js"></script>
</body>
</html>

## manifest.xml
<?xml version="1.0" encoding="UTF-8"?>
<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>40365d02-7156-421b-972a-3bd0a03d6d0c</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>Demo</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="Demo"/>
  <Description DefaultValue="Demo"/>
  <SupportUrl DefaultValue="https://someuser.ngrok.io"/>
  <AppDomains>
    <AppDomain>https://someuser.ngrok.io</AppDomain>
  </AppDomains>
  <Hosts>
    <Host Name="Mailbox"/>
  </Hosts>
  <Requirements>
    <Sets>
      <Set Name="Mailbox" MinVersion="1.1"/>
    </Sets>
  </Requirements>
  <FormSettings>
    <Form xsi:type="ItemRead">
      <DesktopSettings>
        <SourceLocation DefaultValue="https://someuser.ngrok.io/index.html"/>
        <RequestedHeight>250</RequestedHeight>
      </DesktopSettings>
    </Form>
  </FormSettings>

  <Permissions>ReadWriteItem</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">
    <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="label"/>
                  <Control xsi:type="Button" id="msgReadOpenPaneButton">
                    <Label resid="label"/>
                    <Supertip>
                      <Title resid="label"/>
                      <Description resid="label"/>
                    </Supertip>
                    <Icon>
                      <bt:Image size="16" resid="icon404"/>
                      <bt:Image size="32" resid="icon404"/>
                      <bt:Image size="80" resid="icon404"/>
                    </Icon>
                    <Action xsi:type="ShowTaskpane">
                      <SourceLocation resid="url"/>
                      <SupportsPinning>true</SupportsPinning>
                    </Action>
                  </Control>
                </Group>
              </OfficeTab>
            </ExtensionPoint>
          </DesktopFormFactor>
        </Host>
      </Hosts>

      <Resources>
        <bt:Images>
          <bt:Image id="icon404" DefaultValue="https://someuser.ngrok.io/icon404.png"/>
        </bt:Images>
        <bt:Urls>
          <bt:Url id="url" DefaultValue="https://someuser.ngrok.io/index.html"/>
        </bt:Urls>
        <bt:ShortStrings>
          <bt:String id="label" DefaultValue="Demo"/>
        </bt:ShortStrings>
        <bt:LongStrings>
          <bt:String id="label" DefaultValue="Demo"/>
        </bt:LongStrings>
      </Resources>
    </VersionOverrides>
  </VersionOverrides>
</OfficeApp>

## package.json
{
  "scripts": {
    "start": "parcel index.html"
  },
  "dependencies": {
    "core-js": "^3.4.1",
    "msal": "^1.2.0-beta.3",
    "whatwg-fetch": "^3.0.0"
  },
  "devDependencies": {
    "parcel": "^1.12.4"
  },
  "browserslist": [
    "ie >= 11"
  ]
}
	import "core-js/stable";
	import "regenerator-runtime/runtime";
	import 'whatwg-fetch';
	import { UserAgentApplication } from 'msal';

	const clientId = '<PUT YOUR CLIENT ID HERE>';
	const scopes = ['User.Read'];
	const msal = new UserAgentApplication({ auth: { clientId } });

	const p = document.querySelector('p');

	function log(text) {
	p.innerText = JSON.stringify(text);
	}

	async function callApi() {
	log('Call API');
	try {
	const { accessToken } = await msal.acquireTokenSilent({ scopes });
	log(accessToken);
	const me = await fetch('https://graph.microsoft.com/v1.0/me', {
	headers: {
	authorization: `Bearer ${accessToken}`
	}
	}).then(res => res.json());
	log(me);
	} catch (e) {
	log(e);
	throw e;
	}
	}
	msal.handleRedirectCallback(res => {
	if (res instanceof Error) {
	log(res);
	} else {
	callApi();
	}
	});

	Office.onReady(() => {
	log('ready');
	if (msal.getAccount()) {
	callApi();
	} else if (msal.getLoginInProgress()) {
	log('Logging in...');
	} else {
	msal.loginRedirect({ scopes });
	}
	});
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Demo</title>
	<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
	</head>

	<body>
	<p></p>
	<script src="./app.js"></script>
	</body>
	</html>
	<?xml version="1.0" encoding="UTF-8"?>
	<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>40365d02-7156-421b-972a-3bd0a03d6d0c</Id>
	<Version>1.0.0.0</Version>
	<ProviderName>Demo</ProviderName>
	<DefaultLocale>en-US</DefaultLocale>
	<DisplayName DefaultValue="Demo"/>
	<Description DefaultValue="Demo"/>
	<SupportUrl DefaultValue="https://someuser.ngrok.io"/>
	<AppDomains>
	<AppDomain>https://someuser.ngrok.io</AppDomain>
	</AppDomains>
	<Hosts>
	<Host Name="Mailbox"/>
	</Hosts>
	<Requirements>
	<Sets>
	<Set Name="Mailbox" MinVersion="1.1"/>
	</Sets>
	</Requirements>
	<FormSettings>
	<Form xsi:type="ItemRead">
	<DesktopSettings>
	<SourceLocation DefaultValue="https://someuser.ngrok.io/index.html"/>
	<RequestedHeight>250</RequestedHeight>
	</DesktopSettings>
	</Form>
	</FormSettings>

	<Permissions>ReadWriteItem</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">
	<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="label"/>
	<Control xsi:type="Button" id="msgReadOpenPaneButton">
	<Label resid="label"/>
	<Supertip>
	<Title resid="label"/>
	<Description resid="label"/>
	</Supertip>
	<Icon>
	<bt:Image size="16" resid="icon404"/>
	<bt:Image size="32" resid="icon404"/>
	<bt:Image size="80" resid="icon404"/>
	</Icon>
	<Action xsi:type="ShowTaskpane">
	<SourceLocation resid="url"/>
	<SupportsPinning>true</SupportsPinning>
	</Action>
	</Control>
	</Group>
	</OfficeTab>
	</ExtensionPoint>
	</DesktopFormFactor>
	</Host>
	</Hosts>

	<Resources>
	<bt:Images>
	<bt:Image id="icon404" DefaultValue="https://someuser.ngrok.io/icon404.png"/>
	</bt:Images>
	<bt:Urls>
	<bt:Url id="url" DefaultValue="https://someuser.ngrok.io/index.html"/>
	</bt:Urls>
	<bt:ShortStrings>
	<bt:String id="label" DefaultValue="Demo"/>
	</bt:ShortStrings>
	<bt:LongStrings>
	<bt:String id="label" DefaultValue="Demo"/>
	</bt:LongStrings>
	</Resources>
	</VersionOverrides>
	</VersionOverrides>
	</OfficeApp>
	{
	"scripts": {
	"start": "parcel index.html"
	},
	"dependencies": {
	"core-js": "^3.4.1",
	"msal": "^1.2.0-beta.3",
	"whatwg-fetch": "^3.0.0"
	},
	"devDependencies": {
	"parcel": "^1.12.4"
	},
	"browserslist": [
	"ie >= 11"
	]
	}