Merge branch 'main' of https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial into ch-1-electron-signin

Author: BenBagBag

1-Authentication/1-sign-in-react/README.md

@@ -211,13 +211,13 @@ To provide feedback on or suggest features for Azure Active Directory, visit [Us
 MSAL React should be instantiated outside of the component tree to prevent it from being re-instantiated on re-renders. After instantiation, pass it as props to your application.
 
 ```javascript
+import { createRoot } from 'react-dom/client';
+
 const msalInstance = new PublicClientApplication(msalConfig);
 
-ReactDOM.render(
-    <React.StrictMode>
-        <App msalInstance={msalInstance}/>
-    </React.StrictMode>,
-    document.getElementById("root")
+const root = createRoot(document.getElementById('root'));
+root.render(
+    <App instance={msalInstance}/>
 );
 
 export default function App({msalInstance}) {

1-Authentication/1-sign-in-react/SPA/package-lock.json

@@ -3,9 +3,9 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@azure/msal-browser": "^3.16.0",
-        "@azure/msal-react": "^2.0.18",
-        "@testing-library/jest-dom": "^6.4.5",
+        "@azure/msal-browser": "^3.17.0",
+        "@azure/msal-react": "^2.0.19",
+        "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^14.5.2",
         "bootstrap": "^5.3.3",
@@ -29,6 +29,11 @@
             "react-app/jest"
         ]
     },
+    "jest": {
+        "transformIgnorePatterns": [
+            "node_modules/(?!(@azure/msal-browser|@azure/msal-react)/)"
+        ]
+    },
     "browserslist": {
         "production": [
             ">0.2%",

1-Authentication/1-sign-in-react/SPA/package.json

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 import { PublicClientApplication, EventType } from '@azure/msal-browser';
 import { msalConfig } from './authConfig';
@@ -27,7 +27,7 @@ msalInstance.addEventCallback((event) => {
     }
 });
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
 root.render(
     <App instance={msalInstance}/>
 );

1-Authentication/1-sign-in-react/SPA/src/index.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { React, act } from 'react';
+import { createRoot } from 'react-dom/client';
 import { waitFor } from '@testing-library/react';
 
 import App from './App';
@@ -51,12 +51,14 @@ describe('Ensure that the app starts', () => {
     });
 
     it('should render the app without crashing', async () => {
-        const div = document.createElement('div');
-
-        ReactDOM.render(<App msalInstance={pca} />, div);
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        act(() => {
+            createRoot(container).render(<App instance={pca} />);
+          });
 
         await waitFor(() => expect(handleRedirectSpy).toHaveBeenCalledTimes(1));
 
-        expect(div.textContent).toContain('Welcome to the Microsoft Authentication Library For React Tutorial');
+        expect(container.textContent).toContain('Welcome to the Microsoft Authentication Library For React Tutorial');
     });
 });

1-Authentication/1-sign-in-react/SPA/src/sample.test.js

@@ -99,5 +99,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

1-Authentication/2-sign-in-angular/SPA/angular.json

@@ -11,33 +11,33 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.0",
-    "@angular/cdk": "^13.0.0",
-    "@angular/common": "^14.2.0",
-    "@angular/compiler": "^14.2.0",
-    "@angular/core": "^14.2.0",
-    "@angular/forms": "^14.2.0",
-    "@angular/material": "^13.0.0",
-    "@angular/platform-browser": "^14.2.0",
-    "@angular/platform-browser-dynamic": "^14.2.0",
-    "@angular/router": "^14.2.0",
-    "@azure/msal-angular": "^2.5.7",
-    "@azure/msal-browser": "^2.37.0",
-    "rxjs": "~7.5.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
+    "@angular/animations": "^18.0.2",
+    "@angular/cdk": "^18.0.2",
+    "@angular/common": "^18.0.2",
+    "@angular/compiler": "^18.0.2",
+    "@angular/core": "^18.0.2",
+    "@angular/forms": "^18.0.2",
+    "@angular/material": "^18.0.2",
+    "@angular/platform-browser": "^18.0.2",
+    "@angular/platform-browser-dynamic": "^18.0.2",
+    "@angular/router": "^18.0.2",
+    "@azure/msal-angular": "^3.0.19",
+    "@azure/msal-browser": "^3.16.0",
+    "rxjs": "~7.8.1",
+    "tslib": "^2.6.3",
+    "zone.js": "~0.14.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.10",
-    "@angular/cli": "~14.2.10",
-    "@angular/compiler-cli": "^14.2.0",
-    "@types/jasmine": "~4.0.0",
-    "jasmine-core": "~4.3.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.2.0",
+    "@angular-devkit/build-angular": "^18.0.3",
+    "@angular/cli": "~18.0.3",
+    "@angular/compiler-cli": "^18.0.2",
+    "@types/jasmine": "~5.1.4",
+    "jasmine-core": "~5.1.2",
+    "karma": "~6.4.3",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.0.0",
-    "typescript": "~4.7.2"
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.4.5"
   }
 }