@azure/msal-react 1.1.2 → 1.3.1

package/dist/MsalProvider.d.ts

@@ -3,4 +3,7 @@ import { IPublicClientApplication } from "@azure/msal-browser";
 export declare type MsalProviderProps = PropsWithChildren<{
     instance: IPublicClientApplication;
 }>;
+/**
+ * MSAL context provider component. This must be rendered above any other components that use MSAL.
+ */
 export declare function MsalProvider({ instance, children }: MsalProviderProps): React.ReactElement;

package/dist/error/ReactAuthError.d.ts

@@ -0,0 +1,16 @@
+import { AuthError } from "@azure/msal-browser";
+export declare const ReactAuthErrorMessage: {
+    invalidInteractionType: {
+        code: string;
+        desc: string;
+    };
+    unableToFallbackToInteraction: {
+        code: string;
+        desc: string;
+    };
+};
+export declare class ReactAuthError extends AuthError {
+    constructor(errorCode: string, errorMessage?: string);
+    static createInvalidInteractionTypeError(): ReactAuthError;
+    static createUnableToFallbackToInteractionError(): ReactAuthError;
+}

package/dist/hooks/useAccount.d.ts

@@ -4,4 +4,4 @@ import { AccountIdentifiers } from "../types/AccountIdentifiers";
  * Given 1 or more accountIdentifiers, returns the Account object if the user is signed-in
  * @param accountIdentifiers
  */
-export declare function useAccount(accountIdentifiers: AccountIdentifiers): AccountInfo | null;
+export declare function useAccount(accountIdentifiers?: AccountIdentifiers): AccountInfo | null;

package/dist/hooks/useMsalAuthentication.d.ts

@@ -1,13 +1,15 @@
-import { PopupRequest, RedirectRequest, SsoSilentRequest, InteractionType, AuthenticationResult, AuthError } from "@azure/msal-browser";
+import { PopupRequest, RedirectRequest, SsoSilentRequest, InteractionType, AuthenticationResult, AuthError, SilentRequest } from "@azure/msal-browser";
 import { AccountIdentifiers } from "../types/AccountIdentifiers";
 export declare type MsalAuthenticationResult = {
-    login: Function;
+    login: (callbackInteractionType?: InteractionType | undefined, callbackRequest?: PopupRequest | RedirectRequest | SilentRequest) => Promise<AuthenticationResult | null>;
+    acquireToken: (callbackInteractionType?: InteractionType | undefined, callbackRequest?: SilentRequest | undefined) => Promise<AuthenticationResult | null>;
     result: AuthenticationResult | null;
     error: AuthError | null;
 };
 /**
- * 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

package/dist/msal-react.cjs.development.js

@@ -60,15 +60,101 @@ 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.1.2";
+const version = "1.3.1";
 
 /*
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License.
  */
+var MsalProviderActionType;
+
+(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 reducer = (previousState, action) => {
+  const {
+    type,
+    payload
+  } = action;
+  let newAccounts = previousState.accounts;
+  let newInProgress = previousState.inProgress;
+
+  switch (type) {
+    case MsalProviderActionType.UNBLOCK_INPROGRESS:
+      if (previousState.inProgress === msalBrowser.InteractionStatus.Startup) {
+        newInProgress = msalBrowser.InteractionStatus.None;
+        payload.logger.info("MsalProvider - handleRedirectPromise resolved, setting inProgress to 'none'");
+      }
+
+      break;
+
+    case MsalProviderActionType.EVENT:
+      const message = payload.message;
+      const status = msalBrowser.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({
   instance,
   children
@@ -79,56 +165,24 @@ function MsalProvider({
 
   const logger = React.useMemo(() => {
     return instance.getLogger().clone(name, version);
-  }, [instance]); // State hook to store accounts
-
-  const [accounts, setAccounts] = React.useState([]); // State hook to store in progress value
-
-  const [inProgress, setInProgress] = React.useState(msalBrowser.InteractionStatus.Startup); // Mutable object used in the event callback
-
-  const inProgressRef = React.useRef(inProgress);
-  React.useEffect(() => {
-    const callbackId = instance.addEventCallback(message => {
-      switch (message.eventType) {
-        case msalBrowser.EventType.ACCOUNT_ADDED:
-        case msalBrowser.EventType.ACCOUNT_REMOVED:
-        case msalBrowser.EventType.LOGIN_SUCCESS:
-        case msalBrowser.EventType.SSO_SILENT_SUCCESS:
-        case msalBrowser.EventType.HANDLE_REDIRECT_END:
-        case msalBrowser.EventType.LOGIN_FAILURE:
-        case msalBrowser.EventType.SSO_SILENT_FAILURE:
-        case msalBrowser.EventType.LOGOUT_END:
-        case msalBrowser.EventType.ACQUIRE_TOKEN_SUCCESS:
-        case msalBrowser.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;
-      }
-    });
-    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);
-      }
+  }, [instance]);
+  const [state, updateState] = React.useReducer(reducer, undefined, () => {
+    // Lazy initialization of the initial state
+    return {
+      inProgress: msalBrowser.InteractionStatus.Startup,
+      accounts: instance.getAllAccounts()
     };
-  }, [instance, accounts, logger]);
+  });
   React.useEffect(() => {
     const callbackId = instance.addEventCallback(message => {
-      const status = msalBrowser.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(() => {
@@ -139,12 +193,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 === msalBrowser.InteractionStatus.Startup) {
-        inProgressRef.current = msalBrowser.InteractionStatus.None;
-        setInProgress(msalBrowser.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);
@@ -153,8 +211,8 @@ function MsalProvider({
   }, [instance, logger]);
   const contextValue = {
     instance,
-    inProgress,
-    accounts,
+    inProgress: state.inProgress,
+    accounts: state.accounts,
     logger
   };
   return React__default.createElement(MsalContext.Provider, {
@@ -177,61 +235,9 @@ const useMsal = () => React.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 === msalBrowser.InteractionStatus.Startup ? null : getAccount(instance, accountIdentifiers);
-  const [account, setAccount] = React.useState(initialStateValue);
-  React.useEffect(() => {
-    const currentAccount = getAccount(instance, accountIdentifiers);
-
-    if (!msalBrowser.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;
@@ -244,15 +250,12 @@ function isAuthenticated(allAccounts, account, matchAccount) {
 
 function useIsAuthenticated(matchAccount) {
   const {
-    accounts: allAccounts,
-    inProgress
+    accounts: allAccounts
   } = useMsal();
-  const account = useAccount(matchAccount || {});
-  const initialStateValue = inProgress === msalBrowser.InteractionStatus.Startup ? false : isAuthenticated(allAccounts, account, matchAccount);
-  const [hasAuthenticated, setHasAuthenticated] = React.useState(initialStateValue);
+  const [hasAuthenticated, setHasAuthenticated] = React.useState(() => isAuthenticated(allAccounts, matchAccount));
   React.useEffect(() => {
-    setHasAuthenticated(isAuthenticated(allAccounts, account, matchAccount));
-  }, [allAccounts, account, matchAccount]);
+    setHasAuthenticated(isAuthenticated(allAccounts, matchAccount));
+  }, [allAccounts, matchAccount]);
   return hasAuthenticated;
 }
 
@@ -320,13 +323,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] = React.useState(() => getAccount(instance, accountIdentifiers));
+  React.useEffect(() => {
+    setAccount(currentAccount => {
+      const nextAccount = getAccount(instance, accountIdentifiers);
+
+      if (!msalBrowser.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 msalBrowser.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
@@ -340,8 +416,28 @@ function useMsalAuthentication(interactionType, authenticationRequest, accountId
     logger
   } = useMsal();
   const isAuthenticated = useIsAuthenticated(accountIdentifiers);
-  const [[result, error], setResponse] = React.useState([null, null]);
-  const [hasBeenCalled, setHasBeenCalled] = React.useState(false);
+  const account = useAccount(accountIdentifiers);
+  const [[result, error], setResponse] = React.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 = React.useRef(inProgress !== msalBrowser.InteractionStatus.None);
+  React.useEffect(() => {
+    interactionInProgress.current = inProgress !== msalBrowser.InteractionStatus.None;
+  }, [inProgress]); // Flag used to control when the hook calls login/acquireToken
+
+  const shouldAcquireToken = React.useRef(true);
+  React.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 = React.useCallback(async (callbackInteractionType, callbackRequest) => {
     const loginType = callbackInteractionType || interactionType;
     const loginRequest = callbackRequest || authenticationRequest;
@@ -361,9 +457,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 = React.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 || msalBrowser.OIDC_DEFAULT_SCOPES
+      };
+    } else {
+      logger.trace("useMsalAuthentication - acquireToken - No request object provided, using default request.");
+      tokenRequest = {
+        scopes: msalBrowser.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 msalBrowser.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]);
   React.useEffect(() => {
     const callbackId = instance.addEventCallback(message => {
       switch (message.eventType) {
@@ -393,18 +539,27 @@ function useMsalAuthentication(interactionType, authenticationRequest, accountId
     };
   }, [instance, logger]);
   React.useEffect(() => {
-    if (!hasBeenCalled && !error && !isAuthenticated && inProgress === msalBrowser.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 === msalBrowser.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
   };