@azure/msal-react 2.0.21 → 2.1.0

package/dist/hooks/useMsalAuthentication.js

@@ -1,4 +1,4 @@
-/*! @azure/msal-react v2.0.21 2024-07-16 */
+/*! @azure/msal-react v2.1.0 2024-09-20 */
 'use strict';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { InteractionStatus, InteractionType, EventType, OIDC_DEFAULT_SCOPES, InteractionRequiredAuthError } from '@azure/msal-browser';
@@ -7,189 +7,189 @@ import { useMsal } from './useMsal.js';
 import { useAccount } from './useAccount.js';
 import { ReactAuthError } from '../error/ReactAuthError.js';
 
-/*
- * 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
- * @param accountIdentifiers
- */
-function useMsalAuthentication(interactionType, authenticationRequest, accountIdentifiers) {
-    const { instance, inProgress, logger } = useMsal();
-    const isAuthenticated = useIsAuthenticated(accountIdentifiers);
-    const account = useAccount(accountIdentifiers);
-    const [[result, error], setResponse] = useState([null, null]);
-    // Used to prevent state updates after unmount
-    const mounted = useRef(true);
-    useEffect(() => {
-        return () => {
-            mounted.current = false;
-        };
-    }, []);
-    // 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;
-        switch (loginType) {
-            case InteractionType.Popup:
-                logger.verbose("useMsalAuthentication - Calling loginPopup");
-                return instance.loginPopup(loginRequest);
-            case InteractionType.Redirect:
-                // This promise is not expected to resolve due to full frame redirect
-                logger.verbose("useMsalAuthentication - Calling loginRedirect");
-                return instance
-                    .loginRedirect(loginRequest)
-                    .then(null);
-            case InteractionType.Silent:
-                logger.verbose("useMsalAuthentication - Calling ssoSilent");
-                return instance.ssoSilent(loginRequest);
-            default:
-                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) => {
-            if (mounted.current) {
-                setResponse([response, null]);
-            }
-            return response;
-        })
-            .catch((e) => {
-            if (mounted.current) {
-                setResponse([null, e]);
-            }
-            throw e;
-        });
-    }, [
-        instance,
-        interactionType,
-        authenticationRequest,
-        logger,
-        account,
-        login,
-    ]);
-    useEffect(() => {
-        const callbackId = instance.addEventCallback((message) => {
-            switch (message.eventType) {
-                case EventType.LOGIN_SUCCESS:
-                case EventType.SSO_SILENT_SUCCESS:
-                    if (message.payload) {
-                        setResponse([
-                            message.payload,
-                            null,
-                        ]);
-                    }
-                    break;
-                case EventType.LOGIN_FAILURE:
-                case EventType.SSO_SILENT_FAILURE:
-                    if (message.error) {
-                        setResponse([null, message.error]);
-                    }
-                    break;
-            }
-        });
-        logger.verbose(`useMsalAuthentication - Registered event callback with id: ${callbackId}`);
-        return () => {
-            if (callbackId) {
-                logger.verbose(`useMsalAuthentication - Removing event callback ${callbackId}`);
-                instance.removeEventCallback(callbackId);
-            }
-        };
-    }, [instance, logger]);
-    useEffect(() => {
-        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, account, inProgress, login, acquireToken, logger]);
-    return {
-        login,
-        acquireToken,
-        result,
-        error,
-    };
+/*
+ * 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
+ * @param accountIdentifiers
+ */
+function useMsalAuthentication(interactionType, authenticationRequest, accountIdentifiers) {
+    const { instance, inProgress, logger } = useMsal();
+    const isAuthenticated = useIsAuthenticated(accountIdentifiers);
+    const account = useAccount(accountIdentifiers);
+    const [[result, error], setResponse] = useState([null, null]);
+    // Used to prevent state updates after unmount
+    const mounted = useRef(true);
+    useEffect(() => {
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    // 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;
+        switch (loginType) {
+            case InteractionType.Popup:
+                logger.verbose("useMsalAuthentication - Calling loginPopup");
+                return instance.loginPopup(loginRequest);
+            case InteractionType.Redirect:
+                // This promise is not expected to resolve due to full frame redirect
+                logger.verbose("useMsalAuthentication - Calling loginRedirect");
+                return instance
+                    .loginRedirect(loginRequest)
+                    .then(null);
+            case InteractionType.Silent:
+                logger.verbose("useMsalAuthentication - Calling ssoSilent");
+                return instance.ssoSilent(loginRequest);
+            default:
+                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) => {
+            if (mounted.current) {
+                setResponse([response, null]);
+            }
+            return response;
+        })
+            .catch((e) => {
+            if (mounted.current) {
+                setResponse([null, e]);
+            }
+            throw e;
+        });
+    }, [
+        instance,
+        interactionType,
+        authenticationRequest,
+        logger,
+        account,
+        login,
+    ]);
+    useEffect(() => {
+        const callbackId = instance.addEventCallback((message) => {
+            switch (message.eventType) {
+                case EventType.LOGIN_SUCCESS:
+                case EventType.SSO_SILENT_SUCCESS:
+                    if (message.payload) {
+                        setResponse([
+                            message.payload,
+                            null,
+                        ]);
+                    }
+                    break;
+                case EventType.LOGIN_FAILURE:
+                case EventType.SSO_SILENT_FAILURE:
+                    if (message.error) {
+                        setResponse([null, message.error]);
+                    }
+                    break;
+            }
+        });
+        logger.verbose(`useMsalAuthentication - Registered event callback with id: ${callbackId}`);
+        return () => {
+            if (callbackId) {
+                logger.verbose(`useMsalAuthentication - Removing event callback ${callbackId}`);
+                instance.removeEventCallback(callbackId);
+            }
+        };
+    }, [instance, logger]);
+    useEffect(() => {
+        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, account, inProgress, login, acquireToken, logger]);
+    return {
+        login,
+        acquireToken,
+        result,
+        error,
+    };
 }
 
 export { useMsalAuthentication };

package/dist/index.d.ts

@@ -1,24 +1,24 @@
-/**
- * @packageDocumentation
- * @module @azure/msal-react
- */
-export type { IMsalContext } from "./MsalContext";
-export type { MsalProviderProps } from "./MsalProvider";
-export type { MsalAuthenticationResult } from "./hooks/useMsalAuthentication";
-export type { MsalAuthenticationProps } from "./components/MsalAuthenticationTemplate";
-export type { AuthenticatedTemplateProps } from "./components/AuthenticatedTemplate";
-export type { UnauthenticatedTemplateProps } from "./components/UnauthenticatedTemplate";
-export type { WithMsalProps } from "./components/withMsal";
-export type { AccountIdentifiers } from "./types/AccountIdentifiers";
-export { MsalContext, MsalConsumer } from "./MsalContext";
-export { MsalProvider } from "./MsalProvider";
-export { AuthenticatedTemplate } from "./components/AuthenticatedTemplate";
-export { UnauthenticatedTemplate } from "./components/UnauthenticatedTemplate";
-export { MsalAuthenticationTemplate } from "./components/MsalAuthenticationTemplate";
-export { withMsal } from "./components/withMsal";
-export { Subtract, SetComplement, SetDifference } from "./utils/utilities";
-export { useMsal } from "./hooks/useMsal";
-export { useAccount } from "./hooks/useAccount";
-export { useIsAuthenticated } from "./hooks/useIsAuthenticated";
-export { useMsalAuthentication } from "./hooks/useMsalAuthentication";
-export { version } from "./packageMetadata";
+/**
+ * @packageDocumentation
+ * @module @azure/msal-react
+ */
+export type { IMsalContext } from "./MsalContext.js";
+export type { MsalProviderProps } from "./MsalProvider.js";
+export type { MsalAuthenticationResult } from "./hooks/useMsalAuthentication.js";
+export type { MsalAuthenticationProps } from "./components/MsalAuthenticationTemplate.js";
+export type { AuthenticatedTemplateProps } from "./components/AuthenticatedTemplate.js";
+export type { UnauthenticatedTemplateProps } from "./components/UnauthenticatedTemplate.js";
+export type { WithMsalProps } from "./components/withMsal.js";
+export type { AccountIdentifiers } from "./types/AccountIdentifiers.js";
+export { MsalContext, MsalConsumer } from "./MsalContext.js";
+export { MsalProvider } from "./MsalProvider.js";
+export { AuthenticatedTemplate } from "./components/AuthenticatedTemplate.js";
+export { UnauthenticatedTemplate } from "./components/UnauthenticatedTemplate.js";
+export { MsalAuthenticationTemplate } from "./components/MsalAuthenticationTemplate.js";
+export { withMsal } from "./components/withMsal.js";
+export { Subtract, SetComplement, SetDifference } from "./utils/utilities.js";
+export { useMsal } from "./hooks/useMsal.js";
+export { useAccount } from "./hooks/useAccount.js";
+export { useIsAuthenticated } from "./hooks/useIsAuthenticated.js";
+export { useMsalAuthentication } from "./hooks/useMsalAuthentication.js";
+export { version } from "./packageMetadata.js";

package/dist/index.js

@@ -1,4 +1,4 @@
-/*! @azure/msal-react v2.0.21 2024-07-16 */
+/*! @azure/msal-react v2.1.0 2024-09-20 */
 'use strict';
 export { MsalConsumer, MsalContext } from './MsalContext.js';
 export { MsalProvider } from './MsalProvider.js';

package/dist/packageMetadata.d.ts

@@ -1,2 +1,2 @@
-export declare const name = "@azure/msal-react";
-export declare const version = "2.0.21";
+export declare const name = "@azure/msal-react";
+export declare const version = "2.1.0";

package/dist/packageMetadata.js

@@ -1,8 +1,8 @@
-/*! @azure/msal-react v2.0.21 2024-07-16 */
+/*! @azure/msal-react v2.1.0 2024-09-20 */
 'use strict';
-/* eslint-disable header/header */
-const name = "@azure/msal-react";
-const version = "2.0.21";
+/* eslint-disable header/header */
+const name = "@azure/msal-react";
+const version = "2.1.0";
 
 export { name, version };
 //# sourceMappingURL=packageMetadata.js.map

package/dist/types/AccountIdentifiers.d.ts

@@ -1,2 +1,2 @@
-import { AccountInfo } from "@azure/msal-browser";
-export type AccountIdentifiers = Partial<Pick<AccountInfo, "homeAccountId" | "localAccountId" | "username">>;
+import { AccountInfo } from "@azure/msal-browser";
+export type AccountIdentifiers = Partial<Pick<AccountInfo, "homeAccountId" | "localAccountId" | "username">>;

package/dist/utils/utilities.d.ts

@@ -1,17 +1,17 @@
-/// <reference types="react" />
-import { AccountIdentifiers } from "../types/AccountIdentifiers";
-import { AccountInfo } from "@azure/msal-browser";
-type FaaCFunction = <T>(args: T) => React.ReactNode;
-export declare function getChildrenOrFunction<T>(children: React.ReactNode | FaaCFunction, args: T): React.ReactNode;
-export type SetDifference<A, B> = A extends B ? never : A;
-export type SetComplement<A, A1 extends A> = SetDifference<A, A1>;
-export type Subtract<T extends T1, T1 extends object> = Pick<T, SetComplement<keyof T, keyof T1>>;
-/**
- * Helper function to determine whether 2 arrays are equal
- * Used to avoid unnecessary state updates
- * @param arrayA
- * @param arrayB
- */
-export declare function accountArraysAreEqual(arrayA: Array<AccountIdentifiers>, arrayB: Array<AccountIdentifiers>): boolean;
-export declare function getAccountByIdentifiers(allAccounts: AccountInfo[], accountIdentifiers: AccountIdentifiers): AccountInfo | null;
-export {};
+/// <reference types="react" />
+import { AccountIdentifiers } from "../types/AccountIdentifiers.js";
+import { AccountInfo } from "@azure/msal-browser";
+type FaaCFunction = <T>(args: T) => React.ReactNode;
+export declare function getChildrenOrFunction<T>(children: React.ReactNode | FaaCFunction, args: T): React.ReactNode;
+export type SetDifference<A, B> = A extends B ? never : A;
+export type SetComplement<A, A1 extends A> = SetDifference<A, A1>;
+export type Subtract<T extends T1, T1 extends object> = Pick<T, SetComplement<keyof T, keyof T1>>;
+/**
+ * Helper function to determine whether 2 arrays are equal
+ * Used to avoid unnecessary state updates
+ * @param arrayA
+ * @param arrayB
+ */
+export declare function accountArraysAreEqual(arrayA: Array<AccountIdentifiers>, arrayB: Array<AccountIdentifiers>): boolean;
+export declare function getAccountByIdentifiers(allAccounts: AccountInfo[], accountIdentifiers: AccountIdentifiers): AccountInfo | null;
+export {};

package/dist/utils/utilities.js

@@ -1,64 +1,64 @@
-/*! @azure/msal-react v2.0.21 2024-07-16 */
+/*! @azure/msal-react v2.1.0 2024-09-20 */
 'use strict';
-/*
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the MIT License.
- */
-function getChildrenOrFunction(children, args) {
-    if (typeof children === "function") {
-        return children(args);
-    }
-    return children;
-}
-/**
- * Helper function to determine whether 2 arrays are equal
- * Used to avoid unnecessary state updates
- * @param arrayA
- * @param arrayB
- */
-function accountArraysAreEqual(arrayA, arrayB) {
-    if (arrayA.length !== arrayB.length) {
-        return false;
-    }
-    const comparisonArray = [...arrayB];
-    return arrayA.every((elementA) => {
-        const elementB = comparisonArray.shift();
-        if (!elementA || !elementB) {
-            return false;
-        }
-        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;
-    }
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+function getChildrenOrFunction(children, args) {
+    if (typeof children === "function") {
+        return children(args);
+    }
+    return children;
+}
+/**
+ * Helper function to determine whether 2 arrays are equal
+ * Used to avoid unnecessary state updates
+ * @param arrayA
+ * @param arrayB
+ */
+function accountArraysAreEqual(arrayA, arrayB) {
+    if (arrayA.length !== arrayB.length) {
+        return false;
+    }
+    const comparisonArray = [...arrayB];
+    return arrayA.every((elementA) => {
+        const elementB = comparisonArray.shift();
+        if (!elementA || !elementB) {
+            return false;
+        }
+        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;
+    }
 }
 
 export { accountArraysAreEqual, getAccountByIdentifiers, getChildrenOrFunction };