@azure/msal-react 2.0.1 → 2.0.3

package/src/hooks/useMsalAuthentication.ts

@@ -0,0 +1,283 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { useCallback, useEffect, useState, useRef } from "react";
+import {
+    PopupRequest,
+    RedirectRequest,
+    SsoSilentRequest,
+    InteractionType,
+    AuthenticationResult,
+    AuthError,
+    EventMessage,
+    EventType,
+    InteractionStatus,
+    SilentRequest,
+    InteractionRequiredAuthError,
+    OIDC_DEFAULT_SCOPES,
+} from "@azure/msal-browser";
+import { useIsAuthenticated } from "./useIsAuthenticated";
+import { AccountIdentifiers } from "../types/AccountIdentifiers";
+import { useMsal } from "./useMsal";
+import { useAccount } from "./useAccount";
+import { ReactAuthError } from "../error/ReactAuthError";
+
+export type MsalAuthenticationResult = {
+    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;
+};
+
+/**
+ * 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
+ */
+export function useMsalAuthentication(
+    interactionType: InteractionType,
+    authenticationRequest?: PopupRequest | RedirectRequest | SsoSilentRequest,
+    accountIdentifiers?: AccountIdentifiers
+): MsalAuthenticationResult {
+    const { instance, inProgress, logger } = useMsal();
+    const isAuthenticated = useIsAuthenticated(accountIdentifiers);
+    const account = useAccount(accountIdentifiers);
+    const [[result, error], setResponse] = useState<
+        [AuthenticationResult | null, AuthError | null]
+    >([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?: InteractionType,
+            callbackRequest?: PopupRequest | RedirectRequest | SsoSilentRequest
+        ): Promise<AuthenticationResult | null> => {
+            const loginType = callbackInteractionType || interactionType;
+            const loginRequest = callbackRequest || authenticationRequest;
+            switch (loginType) {
+                case InteractionType.Popup:
+                    logger.verbose(
+                        "useMsalAuthentication - Calling loginPopup"
+                    );
+                    return instance.loginPopup(loginRequest as PopupRequest);
+                case InteractionType.Redirect:
+                    // This promise is not expected to resolve due to full frame redirect
+                    logger.verbose(
+                        "useMsalAuthentication - Calling loginRedirect"
+                    );
+                    return instance
+                        .loginRedirect(loginRequest as RedirectRequest)
+                        .then(null);
+                case InteractionType.Silent:
+                    logger.verbose("useMsalAuthentication - Calling ssoSilent");
+                    return instance.ssoSilent(loginRequest as SsoSilentRequest);
+                default:
+                    throw ReactAuthError.createInvalidInteractionTypeError();
+            }
+        },
+        [instance, interactionType, authenticationRequest, logger]
+    );
+
+    const acquireToken = useCallback(
+        async (
+            callbackInteractionType?: InteractionType,
+            callbackRequest?: SilentRequest
+        ): Promise<AuthenticationResult | null> => {
+            const fallbackInteractionType =
+                callbackInteractionType || interactionType;
+
+            let tokenRequest: SilentRequest;
+
+            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 (): Promise<AuthenticationResult | null> => {
+                logger.verbose(
+                    "useMsalAuthentication - Calling acquireTokenSilent"
+                );
+                return instance
+                    .acquireTokenSilent(tokenRequest)
+                    .catch(async (e: AuthError) => {
+                        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: AuthenticationResult | null) => {
+                    if (mounted.current) {
+                        setResponse([response, null]);
+                    }
+                    return response;
+                })
+                .catch((e: AuthError) => {
+                    if (mounted.current) {
+                        setResponse([null, e]);
+                    }
+                    throw e;
+                });
+        },
+        [
+            instance,
+            interactionType,
+            authenticationRequest,
+            logger,
+            account,
+            login,
+        ]
+    );
+
+    useEffect(() => {
+        const callbackId = instance.addEventCallback(
+            (message: EventMessage) => {
+                switch (message.eventType) {
+                    case EventType.LOGIN_SUCCESS:
+                    case EventType.SSO_SILENT_SUCCESS:
+                        if (message.payload) {
+                            setResponse([
+                                message.payload as AuthenticationResult,
+                                null,
+                            ]);
+                        }
+                        break;
+                    case EventType.LOGIN_FAILURE:
+                    case EventType.SSO_SILENT_FAILURE:
+                        if (message.error) {
+                            setResponse([null, message.error as AuthError]);
+                        }
+                        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,
+    };
+}

package/src/index.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+/**
+ * @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";

package/src/packageMetadata.ts

@@ -0,0 +1,3 @@
+/* eslint-disable header/header */
+export const name = "@azure/msal-react";
+export const version = "2.0.3";

package/src/types/AccountIdentifiers.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { AccountInfo } from "@azure/msal-browser";
+
+export type AccountIdentifiers = Partial<
+    Pick<AccountInfo, "homeAccountId" | "localAccountId" | "username">
+>;

package/src/utils/utilities.ts

@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { AccountIdentifiers } from "../types/AccountIdentifiers";
+import { AccountInfo } from "@azure/msal-browser";
+
+type FaaCFunction = <T>(args: T) => React.ReactNode;
+
+export function getChildrenOrFunction<T>(
+    children: React.ReactNode | FaaCFunction,
+    args: T
+): React.ReactNode {
+    if (typeof children === "function") {
+        return children(args);
+    }
+    return children;
+}
+
+/*
+ * Utility types
+ * Reference: https://github.com/piotrwitek/utility-types
+ */
+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 function accountArraysAreEqual(
+    arrayA: Array<AccountIdentifiers>,
+    arrayB: Array<AccountIdentifiers>
+): boolean {
+    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
+        );
+    });
+}
+
+export function getAccountByIdentifiers(
+    allAccounts: AccountInfo[],
+    accountIdentifiers: AccountIdentifiers
+): AccountInfo | null {
+    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;
+    }
+}