Replace instantiation then initialization with createPublicClientAppl…

…ication in react samples
AzureAD · Jul 20, 2023 · b4c1ede · b4c1ede
1 parent 723de29
commit b4c1ede
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 22 deletions.
diff --git 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
@@ -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 (
-        <ThemeProvider theme={theme}>
-            <MsalProvider instance={msalInstance}>
-                {element}
-            </MsalProvider>
-        </ThemeProvider>
-    );
+        return (
+            <ThemeProvider theme={theme}>
+                <MsalProvider instance={msalInstance}>
+                    {element}
+                </MsalProvider>
+            </ThemeProvider>
+        );
+    });
 }
diff --git 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
@@ -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(() => {
       </ThemeProvider>
     </Router>
   );
+
+  return msalInstance;
 });
diff --git 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();