How to properly import and use the MSAL (Microsoft Authentication Library for js) into a typescript react single page application?

Question

Problem

I can\'t seem to get the MSAL library to import properly into my typescript code. I\'m using the MSAL for JS library (which is supposed to have typings) in

Answer 1

It looks like the latest version of MSAL.js does have a CommonJS export. You can now just do the following in TypeScript (tested with version 2.3.3 of TypeScript and 0.1.3 of MSAL.js):

import * as Msal from 'msal';

Now in your .ts (or in my case .tsx file) you can, for instance, setup a click event handler and create a UserAgentApplication object:

// In you class somewhere
private userAgentApplication: any = undefined;

// The login button click handler
handleLoginClick = (event: any): void => {
    if (!this.userAgentApplication) {
        this.userAgentApplication = new Msal.UserAgentApplication(
            'clientID string', 'authority string or empty', this.authCallback, { cacheLocation: 'localStorage'});
    }
    // Other login stuff...
}

// In React render()
public render() {
    return (
         this.handleLoginClick(e)}
        >
        Log in
        
    );
}