@azure/msal-react 1.2.0 → 1.3.2

package/dist/msal-react.esm.js

@@ -1,5 +1,5 @@
-import React__default, { createContext, useEffect, useMemo, useState, useRef, useContext, useCallback } from 'react';
-import { stubbedPublicClientApplication, InteractionStatus, Logger, WrapperSKU, EventType, EventMessageUtils, AccountEntity, InteractionType } from '@azure/msal-browser';
+import React__default, { createContext, useEffect, useMemo, useReducer, useContext, useState, useRef, useCallback } from 'react';
+import { stubbedPublicClientApplication, InteractionStatus, Logger, WrapperSKU, EventMessageUtils, AccountEntity, AuthError, InteractionType, InteractionRequiredAuthError, EventType, OIDC_DEFAULT_SCOPES } from '@azure/msal-browser';
 
 /*
  * Copyright (c) Microsoft Corporation. All rights reserved.
@@ -53,75 +53,130 @@ function accountArraysAreEqual(arrayA, arrayB) {
     return elementA.homeAccountId === elementB.homeAccountId && elementA.localAccountId === elementB.localAccountId && elementA.username === elementB.username;
   });
 }
+function getAccountByIdentifiers(allAccounts, accountIdentifiers) {
+  if (allAccounts.length > 0 && (accountIdentifiers.homeAccountId || accountIdentifiers.localAccountId || accountIdentifiers.username)) {
+    const matchedAccounts = allAccounts.filter(accountObj => {
+      if (accountIdentifiers.username && accountIdentifiers.username.toLowerCase() !== accountObj.username.toLowerCase()) {
+        return false;
+      }
+
+      if (accountIdentifiers.homeAccountId && accountIdentifiers.homeAccountId.toLowerCase() !== accountObj.homeAccountId.toLowerCase()) {
+        return false;
+      }
+
+      if (accountIdentifiers.localAccountId && accountIdentifiers.localAccountId.toLowerCase() !== accountObj.localAccountId.toLowerCase()) {
+        return false;
+      }
+
+      return true;
+    });
+    return matchedAccounts[0] || null;
+  } else {
+    return null;
+  }
+}
 
 /* eslint-disable header/header */
 const name = "@azure/msal-react";
-const version = "1.2.0";
+const version = "1.3.2";
 
 /*
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License.
  */
-function MsalProvider({
-  instance,
-  children
-}) {
-  useEffect(() => {
-    instance.initializeWrapperLibrary(WrapperSKU.React, version);
-  }, [instance]); // Create a logger instance for msal-react with the same options as PublicClientApplication
+var MsalProviderActionType;
 
-  const logger = useMemo(() => {
-    return instance.getLogger().clone(name, version);
-  }, [instance]); // State hook to store accounts
+(function (MsalProviderActionType) {
+  MsalProviderActionType["UNBLOCK_INPROGRESS"] = "UNBLOCK_INPROGRESS";
+  MsalProviderActionType["EVENT"] = "EVENT";
+})(MsalProviderActionType || (MsalProviderActionType = {}));
+/**
+ * Returns the next inProgress and accounts state based on event message
+ * @param previousState
+ * @param action
+ */
 
-  const [accounts, setAccounts] = useState([]); // State hook to store in progress value
 
-  const [inProgress, setInProgress] = useState(InteractionStatus.Startup); // Mutable object used in the event callback
+const reducer = (previousState, action) => {
+  const {
+    type,
+    payload
+  } = action;
+  let newAccounts = previousState.accounts;
+  let newInProgress = previousState.inProgress;
+
+  switch (type) {
+    case MsalProviderActionType.UNBLOCK_INPROGRESS:
+      if (previousState.inProgress === InteractionStatus.Startup) {
+        newInProgress = InteractionStatus.None;
+        payload.logger.info("MsalProvider - handleRedirectPromise resolved, setting inProgress to 'none'");
+      }
 
-  const inProgressRef = useRef(inProgress);
-  useEffect(() => {
-    const callbackId = instance.addEventCallback(message => {
-      switch (message.eventType) {
-        case EventType.ACCOUNT_ADDED:
-        case EventType.ACCOUNT_REMOVED:
-        case EventType.LOGIN_SUCCESS:
-        case EventType.SSO_SILENT_SUCCESS:
-        case EventType.HANDLE_REDIRECT_END:
-        case EventType.LOGIN_FAILURE:
-        case EventType.SSO_SILENT_FAILURE:
-        case EventType.LOGOUT_END:
-        case EventType.ACQUIRE_TOKEN_SUCCESS:
-        case EventType.ACQUIRE_TOKEN_FAILURE:
-          const currentAccounts = instance.getAllAccounts();
-
-          if (!accountArraysAreEqual(currentAccounts, accounts)) {
-            logger.info("MsalProvider - updating account state");
-            setAccounts(currentAccounts);
-          } else {
-            logger.info("MsalProvider - no account changes");
-          }
+      break;
 
-          break;
-      }
-    });
-    logger.verbose(`MsalProvider - Registered event callback with id: ${callbackId}`);
-    return () => {
-      // Remove callback when component unmounts or accounts change
-      if (callbackId) {
-        logger.verbose(`MsalProvider - Removing event callback ${callbackId}`);
-        instance.removeEventCallback(callbackId);
+    case MsalProviderActionType.EVENT:
+      const message = payload.message;
+      const status = EventMessageUtils.getInteractionStatusFromEvent(message, previousState.inProgress);
+
+      if (status) {
+        payload.logger.info(`MsalProvider - ${message.eventType} results in setting inProgress from ${previousState.inProgress} to ${status}`);
+        newInProgress = status;
       }
+
+      break;
+
+    default:
+      throw new Error(`Unknown action type: ${type}`);
+  }
+
+  const currentAccounts = payload.instance.getAllAccounts();
+
+  if (!accountArraysAreEqual(currentAccounts, previousState.accounts)) {
+    payload.logger.info("MsalProvider - updating account state");
+    newAccounts = currentAccounts;
+  } else {
+    payload.logger.verbose("MsalProvider - no account changes");
+  }
+
+  return { ...previousState,
+    inProgress: newInProgress,
+    accounts: newAccounts
+  };
+};
+/**
+ * MSAL context provider component. This must be rendered above any other components that use MSAL.
+ */
+
+
+function MsalProvider(_ref) {
+  let {
+    instance,
+    children
+  } = _ref;
+  useEffect(() => {
+    instance.initializeWrapperLibrary(WrapperSKU.React, version);
+  }, [instance]); // Create a logger instance for msal-react with the same options as PublicClientApplication
+
+  const logger = useMemo(() => {
+    return instance.getLogger().clone(name, version);
+  }, [instance]);
+  const [state, updateState] = useReducer(reducer, undefined, () => {
+    // Lazy initialization of the initial state
+    return {
+      inProgress: InteractionStatus.Startup,
+      accounts: instance.getAllAccounts()
     };
-  }, [instance, accounts, logger]);
+  });
   useEffect(() => {
     const callbackId = instance.addEventCallback(message => {
-      const status = EventMessageUtils.getInteractionStatusFromEvent(message, inProgressRef.current);
-
-      if (status !== null) {
-        logger.info(`MsalProvider - ${message.eventType} results in setting inProgress from ${inProgressRef.current} to ${status}`);
-        inProgressRef.current = status;
-        setInProgress(status);
-      }
+      updateState({
+        payload: {
+          instance,
+          logger,
+          message
+        },
+        type: MsalProviderActionType.EVENT
+      });
     });
     logger.verbose(`MsalProvider - Registered event callback with id: ${callbackId}`);
     instance.handleRedirectPromise().catch(() => {
@@ -132,12 +187,16 @@ function MsalProvider({
        * If handleRedirectPromise returns a cached promise the necessary events may not be fired
        * This is a fallback to prevent inProgress from getting stuck in 'startup'
        */
-      if (inProgressRef.current === InteractionStatus.Startup) {
-        inProgressRef.current = InteractionStatus.None;
-        setInProgress(InteractionStatus.None);
-      }
+      updateState({
+        payload: {
+          instance,
+          logger
+        },
+        type: MsalProviderActionType.UNBLOCK_INPROGRESS
+      });
     });
     return () => {
+      // Remove callback when component unmounts or accounts change
       if (callbackId) {
         logger.verbose(`MsalProvider - Removing event callback ${callbackId}`);
         instance.removeEventCallback(callbackId);
@@ -146,8 +205,8 @@ function MsalProvider({
   }, [instance, logger]);
   const contextValue = {
     instance,
-    inProgress,
-    accounts,
+    inProgress: state.inProgress,
+    accounts: state.accounts,
     logger
   };
   return React__default.createElement(MsalContext.Provider, {
@@ -170,61 +229,9 @@ const useMsal = () => useContext(MsalContext);
  * Licensed under the MIT License.
  */
 
-function getAccount(instance, accountIdentifiers) {
-  const allAccounts = instance.getAllAccounts();
-
-  if (allAccounts.length > 0 && (accountIdentifiers.homeAccountId || accountIdentifiers.localAccountId || accountIdentifiers.username)) {
-    const matchedAccounts = allAccounts.filter(accountObj => {
-      if (accountIdentifiers.username && accountIdentifiers.username.toLowerCase() !== accountObj.username.toLowerCase()) {
-        return false;
-      }
-
-      if (accountIdentifiers.homeAccountId && accountIdentifiers.homeAccountId.toLowerCase() !== accountObj.homeAccountId.toLowerCase()) {
-        return false;
-      }
-
-      if (accountIdentifiers.localAccountId && accountIdentifiers.localAccountId.toLowerCase() !== accountObj.localAccountId.toLowerCase()) {
-        return false;
-      }
-
-      return true;
-    });
-    return matchedAccounts[0] || null;
-  } else {
-    return null;
-  }
-}
-/**
- * Given 1 or more accountIdentifiers, returns the Account object if the user is signed-in
- * @param accountIdentifiers
- */
-
-
-function useAccount(accountIdentifiers) {
-  const {
-    instance,
-    inProgress
-  } = useMsal();
-  const initialStateValue = inProgress === InteractionStatus.Startup ? null : getAccount(instance, accountIdentifiers);
-  const [account, setAccount] = useState(initialStateValue);
-  useEffect(() => {
-    const currentAccount = getAccount(instance, accountIdentifiers);
-
-    if (!AccountEntity.accountInfoIsEqual(account, currentAccount, true)) {
-      setAccount(currentAccount);
-    }
-  }, [inProgress, accountIdentifiers, instance, account]);
-  return account;
-}
-
-/*
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the MIT License.
- */
-
-function isAuthenticated(allAccounts, account, matchAccount) {
+function isAuthenticated(allAccounts, matchAccount) {
   if (matchAccount && (matchAccount.username || matchAccount.homeAccountId || matchAccount.localAccountId)) {
-    return !!account;
+    return !!getAccountByIdentifiers(allAccounts, matchAccount);
   }
 
   return allAccounts.length > 0;
@@ -237,15 +244,12 @@ function isAuthenticated(allAccounts, account, matchAccount) {
 
 function useIsAuthenticated(matchAccount) {
   const {
-    accounts: allAccounts,
-    inProgress
+    accounts: allAccounts
   } = useMsal();
-  const account = useAccount(matchAccount || {});
-  const initialStateValue = inProgress === InteractionStatus.Startup ? false : isAuthenticated(allAccounts, account, matchAccount);
-  const [hasAuthenticated, setHasAuthenticated] = useState(initialStateValue);
+  const [hasAuthenticated, setHasAuthenticated] = useState(() => isAuthenticated(allAccounts, matchAccount));
   useEffect(() => {
-    setHasAuthenticated(isAuthenticated(allAccounts, account, matchAccount));
-  }, [allAccounts, account, matchAccount]);
+    setHasAuthenticated(isAuthenticated(allAccounts, matchAccount));
+  }, [allAccounts, matchAccount]);
   return hasAuthenticated;
 }
 
@@ -258,12 +262,13 @@ function useIsAuthenticated(matchAccount) {
  * @param props
  */
 
-function AuthenticatedTemplate({
-  username,
-  homeAccountId,
-  localAccountId,
-  children
-}) {
+function AuthenticatedTemplate(_ref) {
+  let {
+    username,
+    homeAccountId,
+    localAccountId,
+    children
+  } = _ref;
   const context = useMsal();
   const accountIdentifier = useMemo(() => {
     return {
@@ -290,12 +295,13 @@ function AuthenticatedTemplate({
  * @param props
  */
 
-function UnauthenticatedTemplate({
-  username,
-  homeAccountId,
-  localAccountId,
-  children
-}) {
+function UnauthenticatedTemplate(_ref) {
+  let {
+    username,
+    homeAccountId,
+    localAccountId,
+    children
+  } = _ref;
   const context = useMsal();
   const accountIdentifier = useMemo(() => {
     return {
@@ -313,13 +319,86 @@ function UnauthenticatedTemplate({
   return null;
 }
 
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+function getAccount(instance, accountIdentifiers) {
+  if (!accountIdentifiers || !accountIdentifiers.homeAccountId && !accountIdentifiers.localAccountId && !accountIdentifiers.username) {
+    // If no account identifiers are provided, return active account
+    return instance.getActiveAccount();
+  }
+
+  return getAccountByIdentifiers(instance.getAllAccounts(), accountIdentifiers);
+}
+/**
+ * Given 1 or more accountIdentifiers, returns the Account object if the user is signed-in
+ * @param accountIdentifiers
+ */
+
+
+function useAccount(accountIdentifiers) {
+  const {
+    instance,
+    inProgress,
+    logger
+  } = useMsal();
+  const [account, setAccount] = useState(() => getAccount(instance, accountIdentifiers));
+  useEffect(() => {
+    setAccount(currentAccount => {
+      const nextAccount = getAccount(instance, accountIdentifiers);
+
+      if (!AccountEntity.accountInfoIsEqual(currentAccount, nextAccount, true)) {
+        logger.info("useAccount - Updating account");
+        return nextAccount;
+      }
+
+      return currentAccount;
+    });
+  }, [inProgress, accountIdentifiers, instance, logger]);
+  return account;
+}
+
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+const ReactAuthErrorMessage = {
+  invalidInteractionType: {
+    code: "invalid_interaction_type",
+    desc: "The provided interaction type is invalid."
+  },
+  unableToFallbackToInteraction: {
+    code: "unable_to_fallback_to_interaction",
+    desc: "Interaction is required but another interaction is already in progress. Please try again when the current interaction is complete."
+  }
+};
+class ReactAuthError extends AuthError {
+  constructor(errorCode, errorMessage) {
+    super(errorCode, errorMessage);
+    Object.setPrototypeOf(this, ReactAuthError.prototype);
+    this.name = "ReactAuthError";
+  }
+
+  static createInvalidInteractionTypeError() {
+    return new ReactAuthError(ReactAuthErrorMessage.invalidInteractionType.code, ReactAuthErrorMessage.invalidInteractionType.desc);
+  }
+
+  static createUnableToFallbackToInteractionError() {
+    return new ReactAuthError(ReactAuthErrorMessage.unableToFallbackToInteraction.code, ReactAuthErrorMessage.unableToFallbackToInteraction.desc);
+  }
+
+}
+
 /*
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License.
  */
 /**
- * Invokes a login call if a user is not currently signed-in. Failed logins can be retried using the login callback returned.
- * Optionally provide a request object to be used in the login call.
+ * If a user is not currently signed in this hook invokes a login. Failed logins can be retried using the login callback returned.
+ * If a user is currently signed in this hook attempts to acquire a token. Subsequent token requests can use the acquireToken callback returned.
+ * Optionally provide a request object to be used in the login/acquireToken call.
  * Optionally provide a specific user that should be logged in.
  * @param interactionType
  * @param authenticationRequest
@@ -333,8 +412,28 @@ function useMsalAuthentication(interactionType, authenticationRequest, accountId
     logger
   } = useMsal();
   const isAuthenticated = useIsAuthenticated(accountIdentifiers);
-  const [[result, error], setResponse] = useState([null, null]);
-  const [hasBeenCalled, setHasBeenCalled] = useState(false);
+  const account = useAccount(accountIdentifiers);
+  const [[result, error], setResponse] = useState([null, null]); // Boolean used to check if interaction is in progress in acquireTokenSilent fallback. Use Ref instead of state to prevent acquireToken function from being regenerated on each change to interactionInProgress value
+
+  const interactionInProgress = useRef(inProgress !== InteractionStatus.None);
+  useEffect(() => {
+    interactionInProgress.current = inProgress !== InteractionStatus.None;
+  }, [inProgress]); // Flag used to control when the hook calls login/acquireToken
+
+  const shouldAcquireToken = useRef(true);
+  useEffect(() => {
+    if (!!error) {
+      // Errors should be handled by consuming component
+      shouldAcquireToken.current = false;
+      return;
+    }
+
+    if (!!result) {
+      // Token has already been acquired, consuming component/application is responsible for renewing
+      shouldAcquireToken.current = false;
+      return;
+    }
+  }, [error, result]);
   const login = useCallback(async (callbackInteractionType, callbackRequest) => {
     const loginType = callbackInteractionType || interactionType;
     const loginRequest = callbackRequest || authenticationRequest;
@@ -354,9 +453,59 @@ function useMsalAuthentication(interactionType, authenticationRequest, accountId
         return instance.ssoSilent(loginRequest);
 
       default:
-        throw "Invalid interaction type provided.";
+        throw ReactAuthError.createInvalidInteractionTypeError();
     }
   }, [instance, interactionType, authenticationRequest, logger]);
+  const acquireToken = useCallback(async (callbackInteractionType, callbackRequest) => {
+    const fallbackInteractionType = callbackInteractionType || interactionType;
+    let tokenRequest;
+
+    if (callbackRequest) {
+      logger.trace("useMsalAuthentication - acquireToken - Using request provided in the callback");
+      tokenRequest = { ...callbackRequest
+      };
+    } else if (authenticationRequest) {
+      logger.trace("useMsalAuthentication - acquireToken - Using request provided in the hook");
+      tokenRequest = { ...authenticationRequest,
+        scopes: authenticationRequest.scopes || OIDC_DEFAULT_SCOPES
+      };
+    } else {
+      logger.trace("useMsalAuthentication - acquireToken - No request object provided, using default request.");
+      tokenRequest = {
+        scopes: OIDC_DEFAULT_SCOPES
+      };
+    }
+
+    if (!tokenRequest.account && account) {
+      logger.trace("useMsalAuthentication - acquireToken - Attaching account to request");
+      tokenRequest.account = account;
+    }
+
+    const getToken = async () => {
+      logger.verbose("useMsalAuthentication - Calling acquireTokenSilent");
+      return instance.acquireTokenSilent(tokenRequest).catch(async e => {
+        if (e instanceof InteractionRequiredAuthError) {
+          if (!interactionInProgress.current) {
+            logger.error("useMsalAuthentication - Interaction required, falling back to interaction");
+            return login(fallbackInteractionType, tokenRequest);
+          } else {
+            logger.error("useMsalAuthentication - Interaction required but is already in progress. Please try again, if needed, after interaction completes.");
+            throw ReactAuthError.createUnableToFallbackToInteractionError();
+          }
+        }
+
+        throw e;
+      });
+    };
+
+    return getToken().then(response => {
+      setResponse([response, null]);
+      return response;
+    }).catch(e => {
+      setResponse([null, e]);
+      throw e;
+    });
+  }, [instance, interactionType, authenticationRequest, logger, account, login]);
   useEffect(() => {
     const callbackId = instance.addEventCallback(message => {
       switch (message.eventType) {
@@ -386,18 +535,27 @@ function useMsalAuthentication(interactionType, authenticationRequest, accountId
     };
   }, [instance, logger]);
   useEffect(() => {
-    if (!hasBeenCalled && !error && !isAuthenticated && inProgress === InteractionStatus.None) {
-      logger.info("useMsalAuthentication - No user is authenticated, attempting to login"); // Ensure login is only called one time from within this hook, any subsequent login attempts should use the callback returned
-
-      setHasBeenCalled(true);
-      login().catch(() => {
-        // Errors are handled by the event handler above
-        return;
-      });
+    if (shouldAcquireToken.current && inProgress === InteractionStatus.None) {
+      shouldAcquireToken.current = false;
+
+      if (!isAuthenticated) {
+        logger.info("useMsalAuthentication - No user is authenticated, attempting to login");
+        login().catch(() => {
+          // Errors are saved in state above
+          return;
+        });
+      } else if (account) {
+        logger.info("useMsalAuthentication - User is authenticated, attempting to acquire token");
+        acquireToken().catch(() => {
+          // Errors are saved in state above
+          return;
+        });
+      }
     }
-  }, [isAuthenticated, inProgress, error, hasBeenCalled, login, logger]);
+  }, [isAuthenticated, account, inProgress, login, acquireToken, logger]);
   return {
     login,
+    acquireToken,
     result,
     error
   };
@@ -412,16 +570,17 @@ function useMsalAuthentication(interactionType, authenticationRequest, accountId
  * @param props
  */
 
-function MsalAuthenticationTemplate({
-  interactionType,
-  username,
-  homeAccountId,
-  localAccountId,
-  authenticationRequest,
-  loadingComponent: LoadingComponent,
-  errorComponent: ErrorComponent,
-  children
-}) {
+function MsalAuthenticationTemplate(_ref) {
+  let {
+    interactionType,
+    username,
+    homeAccountId,
+    localAccountId,
+    authenticationRequest,
+    loadingComponent: LoadingComponent,
+    errorComponent: ErrorComponent,
+    children
+  } = _ref;
   const accountIdentifier = useMemo(() => {
     return {
       username,