@azure/msal-react 1.2.0 → 1.3.0

package/CHANGELOG.json

@@ -1,6 +1,41 @@
 {
   "name": "@azure/msal-react",
   "entries": [
+    {
+      "date": "Tue, 08 Feb 2022 00:41:07 GMT",
+      "tag": "@azure/msal-react_v1.3.0",
+      "version": "1.3.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "thomas.norling@microsoft.com",
+            "package": "@azure/msal-react",
+            "commit": "67ce881faa2a6931320541d99de2efe4e9ba6a3f",
+            "comment": "useMsalAuthentication hook acquires a token if user is already signed in #4280"
+          },
+          {
+            "author": "beachball",
+            "package": "@azure/msal-react",
+            "comment": "Bump @azure/msal-browser to v2.22.0",
+            "commit": "639253acbc825e1f19ca712bc72dce8da149e3e8"
+          }
+        ],
+        "none": [
+          {
+            "author": "kamausamuel11@gmail.com",
+            "package": "@azure/msal-react",
+            "commit": "5767008f8ef9f3b05aeba421cc4aa6c6bb616e86",
+            "comment": "fix: update package-lock files"
+          },
+          {
+            "author": "thomas.norling@microsoft.com",
+            "package": "@azure/msal-react",
+            "commit": "19f76b1d9cd2b0f1a4a7e4765c8ee9e7e17f3d59",
+            "comment": "Test changes #4383"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 04 Jan 2022 00:20:29 GMT",
       "tag": "@azure/msal-react_v1.2.0",

package/CHANGELOG.md

@@ -1,9 +1,18 @@
 # Change Log - @azure/msal-react
 
-This log was last generated on Tue, 04 Jan 2022 00:20:29 GMT and should not be manually modified.
+This log was last generated on Tue, 08 Feb 2022 00:41:07 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.3.0
+
+Tue, 08 Feb 2022 00:41:07 GMT
+
+### Minor changes
+
+- useMsalAuthentication hook acquires a token if user is already signed in #4280 (thomas.norling@microsoft.com)
+- Bump @azure/msal-browser to v2.22.0
+
 ## 1.2.0
 
 Tue, 04 Jan 2022 00:20:29 GMT

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,10 +60,32 @@ 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.0";
 
 /*
  * Copyright (c) Microsoft Corporation. All rights reserved.
@@ -81,7 +103,7 @@ function MsalProvider({
     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 [accounts, setAccounts] = React.useState(() => instance.getAllAccounts()); // State hook to store in progress value
 
   const [inProgress, setInProgress] = React.useState(msalBrowser.InteractionStatus.Startup); // Mutable object used in the event callback
 
@@ -177,61 +199,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 +214,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;
 }
 
@@ -324,9 +291,82 @@ function UnauthenticatedTemplate({
  * 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);
+}
 /**
- * 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.
+ * 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.
+ */
+/**
+ * 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 +380,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 +421,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 +503,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
   };