Update react samples with initialize

AzureAD · Jul 20, 2023 · 723de29 · 723de29
1 parent 38346d3
commit 723de29
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 64 deletions.
diff --git a/lib/msal-browser/tsconfig.build.tsbuildinfo b/lib/msal-browser/tsconfig.build.tsbuildinfo
diff --git a/samples/msal-react-samples/b2c-sample/src/index.js b/samples/msal-react-samples/b2c-sample/src/index.js
@@ -11,34 +11,36 @@ import { msalConfig } from "./authConfig";
 
 export const msalInstance = new PublicClientApplication(msalConfig);
 
-// 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.
-  msalInstance.setActiveAccount(msalInstance.getAllAccounts()[0]);
-}
+msalInstance.initialize().then(() => {
+  // 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.
+    msalInstance.setActiveAccount(msalInstance.getAllAccounts()[0]);
+  }
 
-// Optional - This will update account state if a user signs in from another tab or window
-msalInstance.enableAccountStorageEvents();
+  // Optional - This will update account state if a user signs in from another tab or window
+  msalInstance.enableAccountStorageEvents();
 
-msalInstance.addEventCallback((event) => {
-  if (event.eventType === EventType.LOGIN_SUCCESS
-    ||
-    event.eventType === EventType.ACQUIRE_TOKEN_SUCCESS
-    ||
-    event.eventType === EventType.SSO_SILENT_SUCCESS
-  ) {
-    const account = event.payload.account;
-    msalInstance.setActiveAccount(account);
-  }
-});
+  msalInstance.addEventCallback((event) => {
+    if (event.eventType === EventType.LOGIN_SUCCESS
+      ||
+      event.eventType === EventType.ACQUIRE_TOKEN_SUCCESS
+      ||
+      event.eventType === EventType.SSO_SILENT_SUCCESS
+    ) {
+      const account = event.payload.account;
+      msalInstance.setActiveAccount(account);
+    }
+  });
 
-const container = document.getElementById("root");
-const root = ReactDOM.createRoot(container);
+  const container = document.getElementById("root");
+  const root = ReactDOM.createRoot(container);
 
-root.render(
-  <Router>
-    <ThemeProvider theme={theme}>
-      <App pca={msalInstance} />
-    </ThemeProvider>
-  </Router>
-);
+  root.render(
+    <Router>
+      <ThemeProvider theme={theme}>
+        <App pca={msalInstance} />
+      </ThemeProvider>
+    </Router>
+  );
+});
diff --git a/samples/msal-react-samples/nextjs-sample/next-env.d.ts b/samples/msal-react-samples/nextjs-sample/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/samples/msal-react-samples/nextjs-sample/pages/_app.js b/samples/msal-react-samples/nextjs-sample/pages/_app.js
@@ -22,17 +22,19 @@ const clientSideEmotionCache = createEmotionCache();
 
 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) => {
-  if (event.eventType === EventType.LOGIN_SUCCESS && event.payload.account) {
-    const account = event.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]);
   }
+
+  msalInstance.addEventCallback((event) => {
+    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload.account) {
+      const account = event.payload.account;
+      msalInstance.setActiveAccount(account);
+    }
+  });
 });
 
 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
@@ -11,29 +11,31 @@ import { msalConfig } from "./authConfig";
 
 export const msalInstance = new PublicClientApplication(msalConfig);
 
-// 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.
-  msalInstance.setActiveAccount(msalInstance.getAllAccounts()[0]);
-}
+msalInstance.initialize().then(() => {
+  // 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.
+    msalInstance.setActiveAccount(msalInstance.getAllAccounts()[0]);
+  }
 
-// Optional - This will update account state if a user signs in from another tab or window
-msalInstance.enableAccountStorageEvents();
+  // Optional - This will update account state if a user signs in from another tab or window
+  msalInstance.enableAccountStorageEvents();
 
-msalInstance.addEventCallback((event) => {
-  if (event.eventType === EventType.LOGIN_SUCCESS && event.payload.account) {
-    const account = event.payload.account;
-    msalInstance.setActiveAccount(account);
-  }
-});
+  msalInstance.addEventCallback((event) => {
+    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload.account) {
+      const account = event.payload.account;
+      msalInstance.setActiveAccount(account);
+    }
+  });
 
-const container = document.getElementById("root");
-const root = ReactDOM.createRoot(container);
+  const container = document.getElementById("root");
+  const root = ReactDOM.createRoot(container);
 
-root.render(
-  <Router>
-    <ThemeProvider theme={theme}>
-      <App pca={msalInstance} />
-    </ThemeProvider>
-  </Router>
-);
+  root.render(
+    <Router>
+      <ThemeProvider theme={theme}>
+        <App pca={msalInstance} />
+      </ThemeProvider>
+    </Router>
+  );
+});
diff --git a/samples/msal-react-samples/typescript-sample/src/index.tsx b/samples/msal-react-samples/typescript-sample/src/index.tsx
@@ -1,15 +1,21 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import React from "react";
+import ReactDOM from "react-dom/client";
 import { BrowserRouter as Router } from "react-router-dom";
 import { ThemeProvider } from "@mui/material/styles";
 import { theme } from "./styles/theme";
 import App from "./App";
 
 // MSAL imports
-import { PublicClientApplication, EventType, EventMessage, AuthenticationResult } from "@azure/msal-browser";
+import {
+    PublicClientApplication,
+    EventType,
+    EventMessage,
+    AuthenticationResult,
+} from "@azure/msal-browser";
 import { msalConfig } from "./authConfig";
 
 export const msalInstance = new PublicClientApplication(msalConfig);
+await msalInstance.initialize();
 
 // Account selection logic is app dependent. Adjust as needed for different use cases.
 const accounts = msalInstance.getAllAccounts();
@@ -26,7 +32,7 @@ msalInstance.addEventCallback((event: EventMessage) => {
 });
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+    document.getElementById("root") as HTMLElement
 );
 root.render(
     <Router>