From 724846cb17b8fb990889756cad276d68e09f03e1 Mon Sep 17 00:00:00 2001
From: Hector Morales <hemoral@microsoft.com>
Date: Thu, 20 Jul 2023 17:39:11 -0700
Subject: [PATCH] Replace createPublicClientApplication in TS react sample with
 instantiation + initialize

---
 .../typescript-sample/src/index.tsx           | 49 ++++++++++---------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/samples/msal-react-samples/typescript-sample/src/index.tsx b/samples/msal-react-samples/typescript-sample/src/index.tsx
index b9b6054800..6a9b618a42 100644
--- a/samples/msal-react-samples/typescript-sample/src/index.tsx
+++ b/samples/msal-react-samples/typescript-sample/src/index.tsx
@@ -14,30 +14,31 @@ import {
 } from "@azure/msal-browser";
 import { msalConfig } from "./authConfig";
 
-export const msalInstance =
-    await PublicClientApplication.createPublicClientApplication(msalConfig);
+export const msalInstance = new PublicClientApplication(msalConfig);
 
-// Account selection logic is app dependent. Adjust as needed for different use cases.
-const accounts = msalInstance.getAllAccounts();
-if (accounts.length > 0) {
-    msalInstance.setActiveAccount(accounts[0]);
-}
-
-msalInstance.addEventCallback((event: EventMessage) => {
-    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
-        const payload = event.payload as AuthenticationResult;
-        const account = payload.account;
-        msalInstance.setActiveAccount(account);
+msalInstance.initialize().then(() => {
+    // Account selection logic is app dependent. Adjust as needed for different use cases.
+    const accounts = msalInstance.getAllAccounts();
+    if (accounts.length > 0) {
+        msalInstance.setActiveAccount(accounts[0]);
     }
-});
 
-const root = ReactDOM.createRoot(
-    document.getElementById("root") as HTMLElement
-);
-root.render(
-    <Router>
-        <ThemeProvider theme={theme}>
-            <App pca={msalInstance} />
-        </ThemeProvider>
-    </Router>
-);
+    msalInstance.addEventCallback((event: EventMessage) => {
+        if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
+            const payload = event.payload as AuthenticationResult;
+            const account = payload.account;
+            msalInstance.setActiveAccount(account);
+        }
+    });
+
+    const root = ReactDOM.createRoot(
+        document.getElementById("root") as HTMLElement
+    );
+    root.render(
+        <Router>
+            <ThemeProvider theme={theme}>
+                <App pca={msalInstance} />
+            </ThemeProvider>
+        </Router>
+    );
+});