Accept existing UserAgentApplication as parameter to MsalProvider (#576)

* copy changes

* Don't export MsalConfigBase

* test clientId before userAgentApplication

* Fix prettier error

* Update packages/mgt/src/providers/MsalProvider.ts

Comitting suggested update

Co-authored-by: Matthew Haugen <[email protected]>

Co-authored-by: Nikola Metulev <[email protected]>
Co-authored-by: Shane Weaver <[email protected]>

Author: 3 people

packages/mgt/src/providers/MsalProvider.ts

@@ -11,40 +11,73 @@ import { IProvider, LoginType, ProviderState } from '@microsoft/mgt-element';
 import { AuthenticationParameters, AuthError, AuthResponse, Configuration, UserAgentApplication } from 'msal';
 
 /**
- * config for MSAL authentication
+ * base config for MSAL authentication
  *
  * @export
- * @interface MsalConfig
+ * @interface MsalConfigBase
  */
-export interface MsalConfig {
+interface MsalConfigBase {
   /**
-   * clientId alphanumeric code
+   * scopes
+   *
+   * @type {string[]}
+   * @memberof MsalConfigBase
+   */
+  scopes?: string[];
+  /**
+   * loginType if login uses popup
+   *
+   * @type {LoginType}
+   * @memberof MsalConfigBase
+   */
+  loginType?: LoginType;
+  /**
+   * login hint value
    *
    * @type {string}
-   * @memberof MsalConfig
+   * @memberof MsalConfigBase
    */
-  clientId: string;
+  loginHint?: string;
+}
+
+/**
+ * config for MSAL authentication where a UserAgentApplication already exists
+ *
+ * @export
+ * @interface MsalConfig
+ */
+export interface MsalUserAgentApplicationConfig extends MsalConfigBase {
   /**
-   * scopes
+   * UserAgentApplication instance to use
    *
-   * @type {string[]}
+   * @type {UserAgentApplication}
    * @memberof MsalConfig
    */
-  scopes?: string[];
+  userAgentApplication: UserAgentApplication;
+}
+
+/**
+ * config for MSAL authentication
+ *
+ * @export
+ * @interface MsalConfig
+ */
+export interface MsalConfig extends MsalConfigBase {
   /**
-   * config authority
+   * clientId alphanumeric code
    *
    * @type {string}
    * @memberof MsalConfig
    */
-  authority?: string;
+  clientId: string;
+
   /**
-   * loginType if login uses popup
+   * config authority
    *
-   * @type {LoginType}
+   * @type {string}
    * @memberof MsalConfig
    */
-  loginType?: LoginType;
+  authority?: string;
   /**
    * options as defined in
    * https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-js-initializing-client-applications#configuration-options
@@ -53,13 +86,6 @@ export interface MsalConfig {
    * @memberof MsalConfig
    */
   options?: Configuration;
-  /**
-   * login hint value
-   *
-   * @type {string}
-   * @memberof MsalConfig
-   */
-  loginHint?: string;
   /**
    * redirect Uri
    *
@@ -109,7 +135,7 @@ export class MsalProvider extends IProvider {
   private sessionStorageRequestedScopesKey = 'mgt-requested-scopes';
   private sessionStorageDeniedScopesKey = 'mgt-denied-scopes';
 
-  constructor(config: MsalConfig) {
+  constructor(config: MsalConfig | MsalUserAgentApplicationConfig) {
     super();
     this.initProvider(config);
   }
@@ -329,38 +355,58 @@ export class MsalProvider extends IProvider {
     return false;
   }
 
-  private initProvider(config: MsalConfig) {
+  private initProvider(config: MsalConfig | MsalUserAgentApplicationConfig) {
     this.scopes = typeof config.scopes !== 'undefined' ? config.scopes : ['user.read'];
     this._loginType = typeof config.loginType !== 'undefined' ? config.loginType : LoginType.Redirect;
     this._loginHint = config.loginHint;
 
-    if (config.clientId) {
-      const msalConfig: Configuration = config.options || { auth: { clientId: config.clientId } };
+    let userAgentApplication: UserAgentApplication;
+    let clientId: string;
 
-      msalConfig.auth.clientId = config.clientId;
-      msalConfig.cache = msalConfig.cache || {};
-      msalConfig.cache.cacheLocation = msalConfig.cache.cacheLocation || 'localStorage';
-      msalConfig.cache.storeAuthStateInCookie = msalConfig.cache.storeAuthStateInCookie || true;
+    if ('clientId' in config) {
+      if (config.clientId) {
+        const msalConfig: Configuration = config.options || { auth: { clientId: config.clientId } };
 
-      if (config.authority) {
-        msalConfig.auth.authority = config.authority;
-      }
+        msalConfig.auth.clientId = config.clientId;
+        msalConfig.cache = msalConfig.cache || {};
+        msalConfig.cache.cacheLocation = msalConfig.cache.cacheLocation || 'localStorage';
+        msalConfig.cache.storeAuthStateInCookie = msalConfig.cache.storeAuthStateInCookie || true;
 
-      if (config.redirectUri) {
-        msalConfig.auth.redirectUri = config.redirectUri;
-      }
+        if (config.authority) {
+          msalConfig.auth.authority = config.authority;
+        }
+
+        if (config.redirectUri) {
+          msalConfig.auth.redirectUri = config.redirectUri;
+        }
 
-      this.clientId = config.clientId;
+        clientId = config.clientId;
 
-      this._userAgentApplication = new UserAgentApplication(msalConfig);
-      this._userAgentApplication.handleRedirectCallback(
-        response => this.tokenReceivedCallback(response),
-        (error, state) => this.errorReceivedCallback(error, state)
-      );
+        userAgentApplication = new UserAgentApplication(msalConfig);
+      } else {
+        throw new Error('clientId must be provided');
+      }
+    } else if ('userAgentApplication' in config) {
+      if (config.userAgentApplication) {
+        userAgentApplication = config.userAgentApplication;
+        const msalConfig = userAgentApplication.getCurrentConfiguration();
+
+        clientId = msalConfig.auth.clientId;
+      } else {
+        throw new Error('userAgentApplication must be provided');
+      }
     } else {
-      throw new Error('clientId must be provided');
+      throw new Error('either clientId or userAgentApplication must be provided');
     }
 
+    this.clientId = clientId;
+
+    this._userAgentApplication = userAgentApplication;
+    this._userAgentApplication.handleRedirectCallback(
+      response => this.tokenReceivedCallback(response),
+      (error, state) => this.errorReceivedCallback(error, state)
+    );
+
     this.graph = createFromProvider(this);
 
     this.trySilentSignIn();

readme.md

@@ -104,6 +104,18 @@ or, add it in your code:
 </script>
 ```
 
+or, if you already use MSAL.js and have a `UserAgentApplication`, you can use it:
+
+```html
+<script type="module">
+  import { Providers, MsalProvider } from '@microsoft/mgt';
+
+  const app = new UserAgentApplication({ auth: { clientId: '[CLIENT-ID]' } });
+
+  Providers.globalProvider = new MsalProvider({ userAgentApplication: app });
+</script>
+```
+
 ## Providers
 
 The components work best when used with a [provider](https://docs.microsoft.com/graph/toolkit/providers). The provider exposes authentication and Microsoft Graph apis used by the components to call into the Microsoft Graph.