diff --git a/samples/msal-react-samples/b2c-sample/src/index.js b/samples/msal-react-samples/b2c-sample/src/index.js
index 0021ad2ed6..c86b3274a3 100644
--- a/samples/msal-react-samples/b2c-sample/src/index.js
+++ b/samples/msal-react-samples/b2c-sample/src/index.js
@@ -9,9 +9,8 @@ import App from './App';
import { PublicClientApplication, EventType } from "@azure/msal-browser";
import { msalConfig } from "./authConfig";
-export const msalInstance = new PublicClientApplication(msalConfig);
-
-msalInstance.initialize().then(() => {
+// createPublicClientApplication asynchronously instantiates and initializes the MSAL object
+PublicClientApplication.createPublicClientApplication(msalConfig).then((msalInstance) => {
// Default to using the first account if no account is active on page load
if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {
// Account selection logic is app dependent. Adjust as needed for different use cases.
diff --git a/samples/msal-react-samples/gatsby-sample/src/wrap-with-provider.js b/samples/msal-react-samples/gatsby-sample/src/wrap-with-provider.js
index f7494f2101..a6aa349359 100644
--- a/samples/msal-react-samples/gatsby-sample/src/wrap-with-provider.js
+++ b/samples/msal-react-samples/gatsby-sample/src/wrap-with-provider.js
@@ -6,18 +6,20 @@ import { ThemeProvider } from "@mui/material/styles";
import { theme } from "./styles/theme";
import { CustomNavigationClient } from "./utils/NavigationClient";
-const msalInstance = new PublicClientApplication(msalConfig);
export default ({element}) => {
- // The next 2 lines are optional. This is how you configure MSAL to take advantage of the router's navigate functions when MSAL redirects between pages in your app
- const navigationClient = new CustomNavigationClient();
- msalInstance.setNavigationClient(navigationClient);
+ // createPublicClientApplication asynchronously instantiates and initializes the MSAL object
+ PublicClientApplication.createPublicClientApplication(msalConfig).then((msalInstance) => {
+ // The next 2 lines are optional. This is how you configure MSAL to take advantage of the router's navigate functions when MSAL redirects between pages in your app
+ const navigationClient = new CustomNavigationClient();
+ msalInstance.setNavigationClient(navigationClient);
- return (
-
-
- {element}
-
-
- );
+ return (
+
+
+ {element}
+
+
+ );
+ });
}
diff --git a/samples/msal-react-samples/nextjs-sample/pages/_app.js b/samples/msal-react-samples/nextjs-sample/pages/_app.js
index 585e7b06d0..5d35928b6b 100644
--- a/samples/msal-react-samples/nextjs-sample/pages/_app.js
+++ b/samples/msal-react-samples/nextjs-sample/pages/_app.js
@@ -20,9 +20,8 @@ import { CustomNavigationClient } from "../src/utils/NavigationClient";
// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();
-export const msalInstance = new PublicClientApplication(msalConfig);
-
-msalInstance.initialize().then(() => {
+// createPublicClientApplication asynchronously instantiates and initializes the MSAL object
+export const msalInstance = PublicClientApplication.createPublicClientApplication(msalConfig).then((msalInstance) => {
// Account selection logic is app dependent. Adjust as needed for different use cases.
const accounts = msalInstance.getAllAccounts();
if (accounts.length > 0) {
@@ -35,6 +34,7 @@ msalInstance.initialize().then(() => {
msalInstance.setActiveAccount(account);
}
});
+ return msalInstance;
});
export default function MyApp({ Component, emotionCache = clientSideEmotionCache, pageProps }) {
diff --git a/samples/msal-react-samples/react-router-sample/src/index.js b/samples/msal-react-samples/react-router-sample/src/index.js
index 20c767c277..2367b24592 100644
--- a/samples/msal-react-samples/react-router-sample/src/index.js
+++ b/samples/msal-react-samples/react-router-sample/src/index.js
@@ -9,9 +9,7 @@ import App from './App';
import { PublicClientApplication, EventType } from "@azure/msal-browser";
import { msalConfig } from "./authConfig";
-export const msalInstance = new PublicClientApplication(msalConfig);
-
-msalInstance.initialize().then(() => {
+export const msalInstance = PublicClientApplication.createPublicClientApplication(msalConfig).then((msalInstance) => {
// Default to using the first account if no account is active on page load
if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {
// Account selection logic is app dependent. Adjust as needed for different use cases.
@@ -38,4 +36,6 @@ msalInstance.initialize().then(() => {
);
+
+ return msalInstance;
});
diff --git a/samples/msal-react-samples/typescript-sample/src/index.tsx b/samples/msal-react-samples/typescript-sample/src/index.tsx
index c222e872f3..b9b6054800 100644
--- a/samples/msal-react-samples/typescript-sample/src/index.tsx
+++ b/samples/msal-react-samples/typescript-sample/src/index.tsx
@@ -14,8 +14,8 @@ import {
} from "@azure/msal-browser";
import { msalConfig } from "./authConfig";
-export const msalInstance = new PublicClientApplication(msalConfig);
-await msalInstance.initialize();
+export const msalInstance =
+ await PublicClientApplication.createPublicClientApplication(msalConfig);
// Account selection logic is app dependent. Adjust as needed for different use cases.
const accounts = msalInstance.getAllAccounts();