@azure/msal-react 2.0.1 → 2.0.3

package/src/MsalProvider.tsx

@@ -0,0 +1,210 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import React, {
+    useEffect,
+    useReducer,
+    PropsWithChildren,
+    useMemo,
+} from "react";
+import {
+    IPublicClientApplication,
+    EventMessage,
+    EventMessageUtils,
+    InteractionStatus,
+    Logger,
+    WrapperSKU,
+    AccountInfo,
+} from "@azure/msal-browser";
+import { MsalContext, IMsalContext } from "./MsalContext";
+import { accountArraysAreEqual } from "./utils/utilities";
+import { name as SKU, version } from "./packageMetadata";
+
+export type MsalProviderProps = PropsWithChildren<{
+    instance: IPublicClientApplication;
+}>;
+
+type MsalState = {
+    inProgress: InteractionStatus;
+    accounts: AccountInfo[];
+};
+
+const MsalProviderActionType = {
+    UNBLOCK_INPROGRESS: "UNBLOCK_INPROGRESS",
+    EVENT: "EVENT",
+} as const;
+type MsalProviderActionType =
+    (typeof MsalProviderActionType)[keyof typeof MsalProviderActionType];
+
+type MsalProviderReducerAction = {
+    type: MsalProviderActionType;
+    payload: {
+        logger: Logger;
+        instance: IPublicClientApplication;
+        message?: EventMessage;
+    };
+};
+
+/**
+ * Returns the next inProgress and accounts state based on event message
+ * @param previousState
+ * @param action
+ */
+const reducer = (
+    previousState: MsalState,
+    action: MsalProviderReducerAction
+): MsalState => {
+    const { type, payload } = action;
+    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'"
+                );
+            }
+            break;
+        case MsalProviderActionType.EVENT:
+            const message = payload.message as EventMessage;
+            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 (
+        newInProgress !== previousState.inProgress &&
+        !accountArraysAreEqual(currentAccounts, previousState.accounts)
+    ) {
+        // Both inProgress and accounts changed
+        return {
+            ...previousState,
+            inProgress: newInProgress,
+            accounts: currentAccounts,
+        };
+    } else if (newInProgress !== previousState.inProgress) {
+        // Only only inProgress changed
+        return {
+            ...previousState,
+            inProgress: newInProgress,
+        };
+    } else if (
+        !accountArraysAreEqual(currentAccounts, previousState.accounts)
+    ) {
+        // Only accounts changed
+        return {
+            ...previousState,
+            accounts: currentAccounts,
+        };
+    } else {
+        // Nothing changed
+        return previousState;
+    }
+};
+
+/**
+ * MSAL context provider component. This must be rendered above any other components that use MSAL.
+ */
+export function MsalProvider({
+    instance,
+    children,
+}: MsalProviderProps): React.ReactElement {
+    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(SKU, version);
+    }, [instance]);
+
+    const [state, updateState] = useReducer(reducer, undefined, () => {
+        // Lazy initialization of the initial state
+        return {
+            inProgress: InteractionStatus.Startup,
+            accounts: instance.getAllAccounts(),
+        };
+    });
+
+    useEffect(() => {
+        const callbackId = instance.addEventCallback(
+            (message: EventMessage) => {
+                updateState({
+                    payload: {
+                        instance,
+                        logger,
+                        message,
+                    },
+                    type: MsalProviderActionType.EVENT,
+                });
+            }
+        );
+        logger.verbose(
+            `MsalProvider - Registered event callback with id: ${callbackId}`
+        );
+
+        instance
+            .initialize()
+            .then(() => {
+                instance
+                    .handleRedirectPromise()
+                    .catch(() => {
+                        // Errors should be handled by listening to the LOGIN_FAILURE event
+                        return;
+                    })
+                    .finally(() => {
+                        /*
+                         * 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'
+                         */
+                        updateState({
+                            payload: {
+                                instance,
+                                logger,
+                            },
+                            type: MsalProviderActionType.UNBLOCK_INPROGRESS,
+                        });
+                    });
+            })
+            .catch(() => {
+                // Errors should be handled by listening to the LOGIN_FAILURE event
+                return;
+            });
+
+        return () => {
+            // Remove callback when component unmounts or accounts change
+            if (callbackId) {
+                logger.verbose(
+                    `MsalProvider - Removing event callback ${callbackId}`
+                );
+                instance.removeEventCallback(callbackId);
+            }
+        };
+    }, [instance, logger]);
+
+    const contextValue: IMsalContext = {
+        instance,
+        inProgress: state.inProgress,
+        accounts: state.accounts,
+        logger,
+    };
+
+    return (
+        <MsalContext.Provider value={contextValue}>
+            {children}
+        </MsalContext.Provider>
+    );
+}

package/src/components/AuthenticatedTemplate.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import React, { PropsWithChildren, useMemo } from "react";
+import { AccountIdentifiers } from "../types/AccountIdentifiers";
+import { getChildrenOrFunction } from "../utils/utilities";
+import { useMsal } from "../hooks/useMsal";
+import { useIsAuthenticated } from "../hooks/useIsAuthenticated";
+import { InteractionStatus } from "@azure/msal-browser";
+
+export type AuthenticatedTemplateProps = PropsWithChildren<AccountIdentifiers>;
+
+/**
+ * Renders child components if user is authenticated
+ * @param props
+ */
+export function AuthenticatedTemplate({
+    username,
+    homeAccountId,
+    localAccountId,
+    children,
+}: AuthenticatedTemplateProps): React.ReactElement | null {
+    const context = useMsal();
+    const accountIdentifier: AccountIdentifiers = useMemo(() => {
+        return {
+            username,
+            homeAccountId,
+            localAccountId,
+        };
+    }, [username, homeAccountId, localAccountId]);
+    const isAuthenticated = useIsAuthenticated(accountIdentifier);
+
+    if (isAuthenticated && context.inProgress !== InteractionStatus.Startup) {
+        return (
+            <React.Fragment>
+                {getChildrenOrFunction(children, context)}
+            </React.Fragment>
+        );
+    }
+    return null;
+}

package/src/components/MsalAuthenticationTemplate.tsx

@@ -0,0 +1,86 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import React, { PropsWithChildren, useMemo } from "react";
+import { AccountIdentifiers } from "../types/AccountIdentifiers";
+import { getChildrenOrFunction } from "../utils/utilities";
+import { useMsal } from "../hooks/useMsal";
+import {
+    MsalAuthenticationResult,
+    useMsalAuthentication,
+} from "../hooks/useMsalAuthentication";
+import { useIsAuthenticated } from "../hooks/useIsAuthenticated";
+import {
+    InteractionType,
+    PopupRequest,
+    RedirectRequest,
+    SsoSilentRequest,
+    InteractionStatus,
+} from "@azure/msal-browser";
+import { IMsalContext } from "../MsalContext";
+
+export type MsalAuthenticationProps = PropsWithChildren<
+    AccountIdentifiers & {
+        interactionType: InteractionType;
+        authenticationRequest?:
+            | PopupRequest
+            | RedirectRequest
+            | SsoSilentRequest;
+        loadingComponent?: React.ElementType<IMsalContext>;
+        errorComponent?: React.ElementType<MsalAuthenticationResult>;
+    }
+>;
+
+/**
+ * Attempts to authenticate user if not already authenticated, then renders child components
+ * @param props
+ */
+export function MsalAuthenticationTemplate({
+    interactionType,
+    username,
+    homeAccountId,
+    localAccountId,
+    authenticationRequest,
+    loadingComponent: LoadingComponent,
+    errorComponent: ErrorComponent,
+    children,
+}: MsalAuthenticationProps): React.ReactElement | null {
+    const accountIdentifier: AccountIdentifiers = useMemo(() => {
+        return {
+            username,
+            homeAccountId,
+            localAccountId,
+        };
+    }, [username, homeAccountId, localAccountId]);
+    const context = useMsal();
+    const msalAuthResult = useMsalAuthentication(
+        interactionType,
+        authenticationRequest,
+        accountIdentifier
+    );
+    const isAuthenticated = useIsAuthenticated(accountIdentifier);
+
+    if (msalAuthResult.error && context.inProgress === InteractionStatus.None) {
+        if (!!ErrorComponent) {
+            return <ErrorComponent {...msalAuthResult} />;
+        }
+
+        throw msalAuthResult.error;
+    }
+
+    if (isAuthenticated) {
+        return (
+            <React.Fragment>
+                {getChildrenOrFunction(children, msalAuthResult)}
+            </React.Fragment>
+        );
+    }
+
+    if (!!LoadingComponent && context.inProgress !== InteractionStatus.None) {
+        return <LoadingComponent {...context} />;
+    }
+
+    return null;
+}

package/src/components/UnauthenticatedTemplate.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import React, { PropsWithChildren, useMemo } from "react";
+import { useMsal } from "../hooks/useMsal";
+import { useIsAuthenticated } from "../hooks/useIsAuthenticated";
+import { getChildrenOrFunction } from "../utils/utilities";
+import { AccountIdentifiers } from "../types/AccountIdentifiers";
+import { InteractionStatus } from "@azure/msal-browser";
+
+export type UnauthenticatedTemplateProps =
+    PropsWithChildren<AccountIdentifiers>;
+
+/**
+ * Renders child components if user is unauthenticated
+ * @param props
+ */
+export function UnauthenticatedTemplate({
+    username,
+    homeAccountId,
+    localAccountId,
+    children,
+}: UnauthenticatedTemplateProps): React.ReactElement | null {
+    const context = useMsal();
+    const accountIdentifier: AccountIdentifiers = useMemo(() => {
+        return {
+            username,
+            homeAccountId,
+            localAccountId,
+        };
+    }, [username, homeAccountId, localAccountId]);
+    const isAuthenticated = useIsAuthenticated(accountIdentifier);
+
+    if (
+        !isAuthenticated &&
+        context.inProgress !== InteractionStatus.Startup &&
+        context.inProgress !== InteractionStatus.HandleRedirect
+    ) {
+        return (
+            <React.Fragment>
+                {getChildrenOrFunction(children, context)}
+            </React.Fragment>
+        );
+    }
+    return null;
+}

package/src/components/withMsal.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import React from "react";
+import { IMsalContext } from "../MsalContext";
+import { useMsal } from "../hooks/useMsal";
+import { Subtract } from "../utils/utilities";
+
+export type WithMsalProps = {
+    msalContext: IMsalContext;
+};
+
+/**
+ * Higher order component wraps provided component with msal by injecting msal context values into the component's props
+ * @param Component
+ */
+export const withMsal = <P extends WithMsalProps>(
+    Component: React.ComponentType<P>
+): React.FunctionComponent<Subtract<P, WithMsalProps>> => {
+    const ComponentWithMsal: React.FunctionComponent<
+        Subtract<P, WithMsalProps>
+    > = (props) => {
+        const msal = useMsal();
+        return <Component {...(props as P)} msalContext={msal} />;
+    };
+
+    const componentName =
+        Component.displayName || Component.name || "Component";
+    ComponentWithMsal.displayName = `withMsal(${componentName})`;
+
+    return ComponentWithMsal;
+};

package/src/error/ReactAuthError.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { AuthError } from "@azure/msal-browser";
+
+export 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.",
+    },
+};
+
+export class ReactAuthError extends AuthError {
+    constructor(errorCode: string, errorMessage?: string) {
+        super(errorCode, errorMessage);
+
+        Object.setPrototypeOf(this, ReactAuthError.prototype);
+        this.name = "ReactAuthError";
+    }
+
+    static createInvalidInteractionTypeError(): ReactAuthError {
+        return new ReactAuthError(
+            ReactAuthErrorMessage.invalidInteractionType.code,
+            ReactAuthErrorMessage.invalidInteractionType.desc
+        );
+    }
+
+    static createUnableToFallbackToInteractionError(): ReactAuthError {
+        return new ReactAuthError(
+            ReactAuthErrorMessage.unableToFallbackToInteraction.code,
+            ReactAuthErrorMessage.unableToFallbackToInteraction.desc
+        );
+    }
+}

package/src/hooks/useAccount.ts

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { useState, useEffect } from "react";
+import {
+    AccountInfo,
+    IPublicClientApplication,
+    AccountEntity,
+} from "@azure/msal-browser";
+import { useMsal } from "./useMsal";
+import { AccountIdentifiers } from "../types/AccountIdentifiers";
+import { getAccountByIdentifiers } from "../utils/utilities";
+
+function getAccount(
+    instance: IPublicClientApplication,
+    accountIdentifiers?: AccountIdentifiers
+): AccountInfo | null {
+    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
+ */
+export function useAccount(
+    accountIdentifiers?: AccountIdentifiers
+): AccountInfo | null {
+    const { instance, inProgress, logger } = useMsal();
+
+    const [account, setAccount] = useState<AccountInfo | null>(() =>
+        getAccount(instance, accountIdentifiers)
+    );
+
+    useEffect(() => {
+        setAccount((currentAccount: AccountInfo | null) => {
+            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;
+}

package/src/hooks/useIsAuthenticated.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { useState, useEffect } from "react";
+import { useMsal } from "./useMsal";
+import { AccountIdentifiers } from "../types/AccountIdentifiers";
+import { AccountInfo, InteractionStatus } from "@azure/msal-browser";
+import { getAccountByIdentifiers } from "../utils/utilities";
+
+function isAuthenticated(
+    allAccounts: AccountInfo[],
+    matchAccount?: AccountIdentifiers
+): boolean {
+    if (
+        matchAccount &&
+        (matchAccount.username ||
+            matchAccount.homeAccountId ||
+            matchAccount.localAccountId)
+    ) {
+        return !!getAccountByIdentifiers(allAccounts, matchAccount);
+    }
+
+    return allAccounts.length > 0;
+}
+
+/**
+ * Returns whether or not a user is currently signed-in. Optionally provide 1 or more accountIdentifiers to determine if a specific user is signed-in
+ * @param matchAccount
+ */
+export function useIsAuthenticated(matchAccount?: AccountIdentifiers): boolean {
+    const { accounts: allAccounts, inProgress } = useMsal();
+
+    const [hasAuthenticated, setHasAuthenticated] = useState<boolean>(() => {
+        if (inProgress === InteractionStatus.Startup) {
+            return false;
+        }
+        return isAuthenticated(allAccounts, matchAccount);
+    });
+
+    useEffect(() => {
+        setHasAuthenticated(isAuthenticated(allAccounts, matchAccount));
+    }, [allAccounts, matchAccount]);
+
+    return hasAuthenticated;
+}

package/src/hooks/useMsal.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { useContext } from "react";
+import { IMsalContext, MsalContext } from "../MsalContext";
+
+/**
+ * Returns Msal Context values
+ */
+export const useMsal = (): IMsalContext => useContext(MsalContext);