add authConfig

Author: lichuhub

package-lock.json

@@ -11,9 +11,12 @@
   },
   "dependencies": {
     "@apollo/client": "^3.13.8",
+    "@azure/msal-browser": "^4.15.0",
+    "@azure/msal-react": "^3.0.15",
     "graphql": "^16.11.0",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.7.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

package.json

@@ -1,33 +1,53 @@
-import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
 // Import everything needed to use the `useQuery` hook
-import { useQuery, gql } from '@apollo/client';
+// import { useQuery, gql } from '@apollo/client';
+import { MsalAuthenticationTemplate } from "@azure/msal-react";
+import { loginRequest } from "./auth/authConfig";
+import { InteractionType } from '@azure/msal-browser';
+import { callMsGraph } from "./auth/MsGraph.ts";
 
 function App() {
-  const [count, setCount] = useState(0)
-  const GetEngagements = gql`
-  query GetEngagements {
-    engagements {
-      endCursor
-      hasNextPage
-      items {
-        endDate
-        id
-        name
-        programName
-        startDate
-        status
-    }
-  }
-}
-`;
-  const { loading, error, data } = useQuery(GetEngagements);
-  if (loading) return <p>Loading...</p>;
-  if (error) return <p>Error : {error.message}</p>;
+  // const [count, setCount] = useState(0);
+  // const [token, setToken] = useState<string>("");
+
+  // const { result, error } = useMsalAuthentication(InteractionType.Popup, {
+  //   ...loginRequest,
+  //   redirectUri: "/" // e.g. /redirect
+  // });
+  // const navigate = useNavigate();
+  // const navigationClient = new CustomNavigationClient(navigate);
+  // msalInstance.setNavigationClient(navigationClient);
+
+//   const GetEngagements = gql`
+//   query GetEngagements {
+//     engagements {
+//       endCursor
+//       hasNextPage
+//       items {
+//         endDate
+//         id
+//         name
+//         programName
+//         startDate
+//         status
+//     }
+//   }
+// }
+// `;
+
+  // const { loading, error, data } = useQuery(GetEngagements);
+  // if (loading) return <p>Loading...</p>;
+  // if (error) return <p>Error : {error.message}</p>;
+   const authRequest = {
+        ...loginRequest
+    };
   return (
-    <>
+    <MsalAuthenticationTemplate
+      interactionType={InteractionType.Redirect}
+      authenticationRequest={authRequest}
+      >
       <div>
         <a href="https://vite.dev" target="_blank">
           <img src={viteLogo} className="logo" alt="Vite logo" />
@@ -37,22 +57,13 @@ function App() {
         </a>
       </div>
       <h1>Vite + React</h1>
-       // Display the data from the query
-      <ul>
-        {/* @typescript-eslint/no-explicit-any */},
-        {data.engagements.items.map((engagement: any) => (
-          <li key={engagement.id}>
-            <h2>{engagement.name}</h2>
-            <p>Program: {engagement.programName}</p>
-            <p>Status: {engagement.status}</p>
-            <p>Start Date: {new Date(engagement.startDate).toLocaleDateString()}</p>
-            <p>End Date: {new Date(engagement.endDate).toLocaleDateString()}</p>
-          </li>
-        ))}
-      </ul>
+
       <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
+        <button onClick={ async () => {
+           const response = await callMsGraph(); 
+          console.log("Response from MS Graph:", response);
+        }}>
+          Call MS Graph for testing
         </button>
         <p>
           Edit <code>src/App.tsx</code> and save to test HMR
@@ -61,7 +72,7 @@ function App() {
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
-    </>
+    </MsalAuthenticationTemplate>
   )
 }