index_esm.html

<html>
<head>
  <script type="importmap">
    {
      "imports": {
        "tslib": "https://unpkg.com/tslib/tslib.es6.js",
        "@azure/msal-common": "https://unpkg.com/@azure/msal-common/dist/index.js",
        "@azure/msal-browser": "https://unpkg.com/@azure/msal-browser/dist/index.js",
        "@microsoft/microsoft-graph-client": "https://unpkg.com/@microsoft/microsoft-graph-client/lib/es/src/index.js"
      }
    }
  </script>
</head>
<body>
  <h1>Hello Microsoft 365</h1>
  <div id="auth"></div>
  <pre></pre>
  <script type="module">
    import { PublicClientApplication, InteractionType } from '@azure/msal-browser';
    import { Client } from '@microsoft/microsoft-graph-client';
    import { AuthCodeMSALBrowserAuthenticationProvider } from 'https://unpkg.com/@microsoft/microsoft-graph-client/lib/es/src/authentication/msal-browser/AuthCodeMSALBrowserAuthenticationProvider.js';
    import { appId } from './env_esm.js';

    const msalConfig = {
      auth: {
        clientId: appId
      }
    };
    const msalClient = new PublicClientApplication(msalConfig);
    let graphClient = null;

    function render() {
      msalClient
        .handleRedirectPromise()
        .then(response => {
          const accounts = msalClient.getAllAccounts();

          if (accounts.length === 0) {
            document.querySelector('#auth').innerHTML = '<button>Login</button>';
            document.querySelector('#auth button').addEventListener('click', login);
            document.querySelector('pre').innerHTML = '';
          }
          else {
            document.querySelector('#auth').innerHTML = '<button>Logout</button>';
            document.querySelector('#auth button').addEventListener('click', logout);
            graphClient = getGraphClient(accounts[0]);
            loadUserProfile();
          }
        });
    }

    function login(e) {
      e.preventDefault();
      msalClient.loginRedirect();
    }

    function logout(e) {
      e.preventDefault();
      msalClient.logoutRedirect();
    }

    function getGraphClient(account) {
      const authProvider = new AuthCodeMSALBrowserAuthenticationProvider(msalClient, {
        account,
        scopes: ['user.read'],
        interactionType: InteractionType.Redirect,
      });

      return Client.initWithMiddleware({ authProvider });
    }

    function loadUserProfile() {
      graphClient
        .api('/me')
        .get()
        .then(res => {
          document.querySelector('pre').innerHTML = JSON.stringify(res, null, 2);
        });
    }

    render();
  </script>
</body>

</html>