title: How to properly import and use the MSAL (Microsoft Authentication Library for js) into a typescript react single page application?
body: <h2>Problem</h2>
  
  <p>I can't seem to get the MSAL library to import properly into my typescript code. I'm using the <a href="https://github.com/AzureAD/microsoft-authentication-library-for-js" rel="noreferrer">MSAL for JS</a> library (which is supposed to have typings) in a simple typescript/react project scaffolded using the create-react-app with react-typescript scripts. I'm new to typescript and not sure if I'm missing something obvious or if there is a problem with the MSAL package when using it with typescript projects.</p>
  
  <h2>Details:</h2>
  
  <ol>
  <li>I added the MSAL package from NPM using <code>npm install --save msal</code>.</li>
  <li>I attempted to import the MSAL into my .ts using different forms of <code>import {Msal} from 'msal';</code></li>
  <li>This results in a typescript error <code>Could not find a declaration file for module 'msal'. '&lt;path&gt;/node_modules/msal/out/msal.js' implicitly has an 'any' type.</code></li>
  <li>Thinking that was odd, I looked at the the node_module/msal/out folder and saw a 'msal.d.ts' file, which is what I would expect.</li>
  <li>When I look at the contents of the <a href="https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/out/msal.d.ts" rel="noreferrer">msal.d.ts</a> file, I don't see any exports, which I would normally expect to see.</li>
  <li>I tried install the declaration from @types using <code>npm install --save-dev @types/msal</code>, but it doesn't exist.</li>
  <li>I also tried importing it into my file using <code>let Msal = require('Msal');</code>, but get an error that the Msal.UserAgentApplication isn't a constructor.</li>
  <li>I didn't have much luck trying to use the /// reference directive and adding a script tag to the main index.html. This also doesn't feel like the right way to solve the problem.</li>
  </ol>
  
  <h2>ExampleMsal.ts</h2>
  
  <pre><code>import { observable, action, computed } from 'mobx';
  import * as Msal from 'msal'; // &lt;-- This line gives the error
  
  class ExampleMsal{
      @observable 
      private _isLoggedIn: boolean;
  
      constructor() {
          this._isLoggedIn = false;
      }
  
      @computed 
      get isLoggedIn(): boolean {
          return this._isLoggedIn;
      }
  
      @action 
      signIn() {
  
          let userAgentApplication = new Msal.UserAgentApplication('&lt;client-id&gt;', null, 
          function (errorDes: string, token: string, error: string, tokenType: string) {
              // this callback is called after loginRedirect OR acquireTokenRedirect 
              // (not used for loginPopup/aquireTokenPopup)
          }
          );
  
          userAgentApplication.loginPopup(['user.read']).then(function(token: string) {
              let user = userAgentApplication.getUser();
              if (user) {
                  // signin successful
                  alert('success');
              } else {
                  // signin failure
                  alert('fail');
              }
          }, function (error: string) {
              // handle error
              alert('Error' + error);
          });        
          this._isLoggedIn = true;
      }
  
      @action 
      signOut() {
          this._isLoggedIn = false;
      }
  }
  
  export default ExampleMsal;
  </code></pre>
  
  <h2>tsconfig.json</h2>
  
  <pre><code>{
    "compilerOptions": {
      "outDir": "build/dist",
      "module": "commonjs",
      "target": "es5",
      "lib": ["es6", "dom"],
      "sourceMap": true,
      "allowJs": true,
      "jsx": "react",
      "moduleResolution": "node",
      "rootDir": "src",
      "forceConsistentCasingInFileNames": true,
      "noImplicitReturns": true,
      "noImplicitThis": true,
      "noImplicitAny": true,
      "strictNullChecks": true,
      "suppressImplicitAnyIndexErrors": true,
      "noUnusedLocals": true,
      "experimentalDecorators": true
    },
    "exclude": [
      "node_modules",
      "build",
      "scripts",
      "acceptance-tests",
      "webpack",
      "jest",
      "src/setupTests.ts"
    ],
    "types": [
      "typePatches"
    ]
  }
  </code></pre>