@azure/msal-react 2.0.21 → 2.1.0

package/lib/types/MsalProvider.d.ts

@@ -0,0 +1,9 @@
+import React, { PropsWithChildren } from "react";
+import { IPublicClientApplication } from "@azure/msal-browser";
+export 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/lib/types/components/AuthenticatedTemplate.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from "react";
+import { AccountIdentifiers } from "../types/AccountIdentifiers.js";
+export type AuthenticatedTemplateProps = PropsWithChildren<AccountIdentifiers>;
+/**
+ * Renders child components if user is authenticated
+ * @param props
+ */
+export declare function AuthenticatedTemplate({ username, homeAccountId, localAccountId, children, }: AuthenticatedTemplateProps): React.ReactElement | null;

package/lib/types/components/MsalAuthenticationTemplate.d.ts

@@ -0,0 +1,16 @@
+import React, { PropsWithChildren } from "react";
+import { AccountIdentifiers } from "../types/AccountIdentifiers.js";
+import { MsalAuthenticationResult } from "../hooks/useMsalAuthentication.js";
+import { InteractionType, PopupRequest, RedirectRequest, SsoSilentRequest } from "@azure/msal-browser";
+import { IMsalContext } from "../MsalContext.js";
+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 declare function MsalAuthenticationTemplate({ interactionType, username, homeAccountId, localAccountId, authenticationRequest, loadingComponent: LoadingComponent, errorComponent: ErrorComponent, children, }: MsalAuthenticationProps): React.ReactElement | null;

package/lib/types/components/UnauthenticatedTemplate.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from "react";
+import { AccountIdentifiers } from "../types/AccountIdentifiers.js";
+export type UnauthenticatedTemplateProps = PropsWithChildren<AccountIdentifiers>;
+/**
+ * Renders child components if user is unauthenticated
+ * @param props
+ */
+export declare function UnauthenticatedTemplate({ username, homeAccountId, localAccountId, children, }: UnauthenticatedTemplateProps): React.ReactElement | null;

package/lib/types/components/withMsal.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { IMsalContext } from "../MsalContext.js";
+import { Subtract } from "../utils/utilities.js";
+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 declare const withMsal: <P extends WithMsalProps>(Component: React.ComponentType<P>) => React.FunctionComponent<Subtract<P, WithMsalProps>>;

package/lib/types/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/lib/types/hooks/useAccount.d.ts

@@ -0,0 +1,7 @@
+import { AccountInfo } from "@azure/msal-browser";
+import { AccountIdentifiers } from "../types/AccountIdentifiers.js";
+/**
+ * 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;

package/lib/types/hooks/useIsAuthenticated.d.ts

@@ -0,0 +1,6 @@
+import { AccountIdentifiers } from "../types/AccountIdentifiers.js";
+/**
+ * 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 declare function useIsAuthenticated(matchAccount?: AccountIdentifiers): boolean;

package/lib/types/hooks/useMsal.d.ts

@@ -0,0 +1,5 @@
+import { IMsalContext } from "../MsalContext.js";
+/**
+ * Returns Msal Context values
+ */
+export declare const useMsal: () => IMsalContext;

package/lib/types/hooks/useMsalAuthentication.d.ts

@@ -0,0 +1,18 @@
+import { PopupRequest, RedirectRequest, SsoSilentRequest, InteractionType, AuthenticationResult, AuthError, SilentRequest } from "@azure/msal-browser";
+import { AccountIdentifiers } from "../types/AccountIdentifiers.js";
+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 declare function useMsalAuthentication(interactionType: InteractionType, authenticationRequest?: PopupRequest | RedirectRequest | SsoSilentRequest, accountIdentifiers?: AccountIdentifiers): MsalAuthenticationResult;

package/lib/types/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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/lib/types/packageMetadata.d.ts

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

package/lib/types/types/AccountIdentifiers.d.ts

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

package/lib/types/utils/utilities.d.ts

@@ -0,0 +1,17 @@
+/// <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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/msal-react",
-  "version": "2.0.21",
+  "version": "2.1.0",
   "author": {
     "name": "Microsoft",
     "email": "nugetaad@microsoft.com",
@@ -15,15 +15,23 @@
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "main": "lib/msal-react.cjs",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./lib/types/index.d.ts",
+        "default": "./lib/msal-react.cjs"
+      }
     },
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
+    "lib",
     "src"
   ],
   "engines": {
@@ -48,11 +56,11 @@
     "apiExtractor": "api-extractor run"
   },
   "peerDependencies": {
-    "@azure/msal-browser": "^3.19.1",
+    "@azure/msal-browser": "^3.24.0",
     "react": "^16.8.0 || ^17 || ^18"
   },
   "devDependencies": {
-    "@azure/msal-browser": "^3.19.1",
+    "@azure/msal-browser": "^3.24.0",
     "@microsoft/api-extractor": "^7.43.4",
     "@rollup/plugin-typescript": "^11.1.5",
     "@testing-library/jest-dom": "^5.11.5",
@@ -69,6 +77,7 @@
     "react-dom": "^18.2.0",
     "rollup": "^4.9.6",
     "ts-jest": "^29.1.0",
+    "ts-jest-resolver": "^2.0.1",
     "tslib": "^2.0.0",
     "typescript": "^4.9.5"
   }

package/src/MsalProvider.tsx

@@ -18,9 +18,9 @@ import {
     WrapperSKU,
     AccountInfo,
 } from "@azure/msal-browser";
-import { MsalContext, IMsalContext } from "./MsalContext";
-import { accountArraysAreEqual } from "./utils/utilities";
-import { name as SKU, version } from "./packageMetadata";
+import { MsalContext, IMsalContext } from "./MsalContext.js";
+import { accountArraysAreEqual } from "./utils/utilities.js";
+import { name as SKU, version } from "./packageMetadata.js";
 
 export type MsalProviderProps = PropsWithChildren<{
     instance: IPublicClientApplication;

package/src/components/AuthenticatedTemplate.tsx

@@ -4,10 +4,10 @@
  */
 
 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 { AccountIdentifiers } from "../types/AccountIdentifiers.js";
+import { getChildrenOrFunction } from "../utils/utilities.js";
+import { useMsal } from "../hooks/useMsal.js";
+import { useIsAuthenticated } from "../hooks/useIsAuthenticated.js";
 import { InteractionStatus } from "@azure/msal-browser";
 
 export type AuthenticatedTemplateProps = PropsWithChildren<AccountIdentifiers>;

package/src/components/MsalAuthenticationTemplate.tsx

@@ -4,14 +4,14 @@
  */
 
 import React, { PropsWithChildren, useMemo } from "react";
-import { AccountIdentifiers } from "../types/AccountIdentifiers";
-import { getChildrenOrFunction } from "../utils/utilities";
-import { useMsal } from "../hooks/useMsal";
+import { AccountIdentifiers } from "../types/AccountIdentifiers.js";
+import { getChildrenOrFunction } from "../utils/utilities.js";
+import { useMsal } from "../hooks/useMsal.js";
 import {
     MsalAuthenticationResult,
     useMsalAuthentication,
-} from "../hooks/useMsalAuthentication";
-import { useIsAuthenticated } from "../hooks/useIsAuthenticated";
+} from "../hooks/useMsalAuthentication.js";
+import { useIsAuthenticated } from "../hooks/useIsAuthenticated.js";
 import {
     InteractionType,
     PopupRequest,
@@ -19,7 +19,7 @@ import {
     SsoSilentRequest,
     InteractionStatus,
 } from "@azure/msal-browser";
-import { IMsalContext } from "../MsalContext";
+import { IMsalContext } from "../MsalContext.js";
 
 export type MsalAuthenticationProps = PropsWithChildren<
     AccountIdentifiers & {

package/src/components/UnauthenticatedTemplate.tsx

@@ -4,10 +4,10 @@
  */
 
 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 { useMsal } from "../hooks/useMsal.js";
+import { useIsAuthenticated } from "../hooks/useIsAuthenticated.js";
+import { getChildrenOrFunction } from "../utils/utilities.js";
+import { AccountIdentifiers } from "../types/AccountIdentifiers.js";
 import { InteractionStatus } from "@azure/msal-browser";
 
 export type UnauthenticatedTemplateProps =

package/src/components/withMsal.tsx

@@ -4,9 +4,9 @@
  */
 
 import React from "react";
-import { IMsalContext } from "../MsalContext";
-import { useMsal } from "../hooks/useMsal";
-import { Subtract } from "../utils/utilities";
+import { IMsalContext } from "../MsalContext.js";
+import { useMsal } from "../hooks/useMsal.js";
+import { Subtract } from "../utils/utilities.js";
 
 export type WithMsalProps = {
     msalContext: IMsalContext;

package/src/hooks/useAccount.ts

@@ -9,9 +9,9 @@ import {
     IPublicClientApplication,
     AccountEntity,
 } from "@azure/msal-browser";
-import { useMsal } from "./useMsal";
-import { AccountIdentifiers } from "../types/AccountIdentifiers";
-import { getAccountByIdentifiers } from "../utils/utilities";
+import { useMsal } from "./useMsal.js";
+import { AccountIdentifiers } from "../types/AccountIdentifiers.js";
+import { getAccountByIdentifiers } from "../utils/utilities.js";
 
 function getAccount(
     instance: IPublicClientApplication,

package/src/hooks/useIsAuthenticated.ts

@@ -4,10 +4,10 @@
  */
 
 import { useMemo } from "react";
-import { useMsal } from "./useMsal";
-import { AccountIdentifiers } from "../types/AccountIdentifiers";
+import { useMsal } from "./useMsal.js";
+import { AccountIdentifiers } from "../types/AccountIdentifiers.js";
 import { AccountInfo, InteractionStatus } from "@azure/msal-browser";
-import { getAccountByIdentifiers } from "../utils/utilities";
+import { getAccountByIdentifiers } from "../utils/utilities.js";
 
 function isAuthenticated(
     allAccounts: AccountInfo[],

package/src/hooks/useMsal.ts

@@ -4,7 +4,7 @@
  */
 
 import { useContext } from "react";
-import { IMsalContext, MsalContext } from "../MsalContext";
+import { IMsalContext, MsalContext } from "../MsalContext.js";
 
 /**
  * Returns Msal Context values

package/src/hooks/useMsalAuthentication.ts

@@ -18,11 +18,11 @@ import {
     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";
+import { useIsAuthenticated } from "./useIsAuthenticated.js";
+import { AccountIdentifiers } from "../types/AccountIdentifiers.js";
+import { useMsal } from "./useMsal.js";
+import { useAccount } from "./useAccount.js";
+import { ReactAuthError } from "../error/ReactAuthError.js";
 
 export type MsalAuthenticationResult = {
     login: (

package/src/index.ts

@@ -8,28 +8,28 @@
  * @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 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";
-export { MsalProvider } from "./MsalProvider";
+export { MsalContext, MsalConsumer } from "./MsalContext.js";
+export { MsalProvider } from "./MsalProvider.js";
 
-export { AuthenticatedTemplate } from "./components/AuthenticatedTemplate";
-export { UnauthenticatedTemplate } from "./components/UnauthenticatedTemplate";
-export { MsalAuthenticationTemplate } from "./components/MsalAuthenticationTemplate";
+export { AuthenticatedTemplate } from "./components/AuthenticatedTemplate.js";
+export { UnauthenticatedTemplate } from "./components/UnauthenticatedTemplate.js";
+export { MsalAuthenticationTemplate } from "./components/MsalAuthenticationTemplate.js";
 
-export { withMsal } from "./components/withMsal";
-export { Subtract, SetComplement, SetDifference } from "./utils/utilities";
+export { withMsal } from "./components/withMsal.js";
+export { Subtract, SetComplement, SetDifference } from "./utils/utilities.js";
 
-export { useMsal } from "./hooks/useMsal";
-export { useAccount } from "./hooks/useAccount";
-export { useIsAuthenticated } from "./hooks/useIsAuthenticated";
-export { useMsalAuthentication } from "./hooks/useMsalAuthentication";
+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";
+export { version } from "./packageMetadata.js";

package/src/packageMetadata.ts

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

package/src/utils/utilities.ts

@@ -3,7 +3,7 @@
  * Licensed under the MIT License.
  */
 
-import { AccountIdentifiers } from "../types/AccountIdentifiers";
+import { AccountIdentifiers } from "../types/AccountIdentifiers.js";
 import { AccountInfo } from "@azure/msal-browser";
 
 type FaaCFunction = <T>(args: T) => React.ReactNode;