testing auth a bit more

api/index.js

@@ -9,7 +9,7 @@ app.http('getDecks', {
     route: 'deck',
     handler: async (request, context) => {
         context.log("getDecks howdy")
-        const auth_header = request.heaaeders.get('X-MS-CLIENT-PRINCIPAL')
+        const auth_header = request.headers.get('X-MS-CLIENT-PRINCIPAL')
         let token = null
         if (auth_header) {
             token = Buffer.from(auth_header, "base64");

package.json

@@ -18,7 +18,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "web": "npx @azure/static-web-apps-cli start http://localhost:3000 --run 'npm start' --api-location ./api"
+    "web": "npx @azure/static-web-apps-cli start http://localhost:3000 --run \"npm start\" --api-location ./api"
   },
   "eslintConfig": {
     "extends": [

src/routes/App_page.js

@@ -1,26 +1,47 @@
 import logo from '../logo.svg';
 import Card from '../common/Card'
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useLoaderData } from 'react-router-dom';
 import Deck from '../common/Deck';
 
-async function loader({ request }) {
-  const result = await fetch("/api/deck", {
-    signal: request.signal,
-    method: "get",
-  });
-  if (result.ok) {
-    return await result.json()
-  } else {
-    // this is just going to trigger the 404 page, but we can fix that later :|
-    throw new Response("ERROR", { status: result.status });
-  }
-}
+// async function loader({ request }) {
+//   const result = await fetch("/api/deck", {
+//     signal: request.signal,
+//     method: "get",
+//   });
+//   if (result.ok) {
+//     return await result.json()
+//   } else {
+//     // this is just going to trigger the 404 page, but we can fix that later :|
+//     throw new Response("ERROR", { status: result.status });
+//   }
+// }
 
 function App() {
-  const { data } = useLoaderData();
-  const [decks, setDecks] = useState(data);
+  const [decks, setDecks] = useState(null);
   const [name, setName] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(()=>{
+    async function fetchData() {
+      const result = await fetch("/api/deck", {
+            method: "get",
+          });
+      if (result.ok) {
+        const body = await result.json()
+        setDecks(body.data)
+        setLoading(false)
+      } else {
+        console.log(result);
+        // todo, be better.
+      }
+    }
+    const handle = setInterval(fetchData, 10000);
+    return ()=>{
+      clearInterval(handle);
+    }
+  },[])
+
 
   async function newDeck() {
     const result = await fetch("/api/deck", {
@@ -35,7 +56,9 @@ function App() {
       setName("");
     }
   }
-
+  if (loading) {
+    return <span>LOADING</span>
+  } else {
   return (
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
@@ -46,10 +69,11 @@ function App() {
         </div>
       </header>
   );
+  }
 }
 
 export const App_Page = {
   path:"/",
   element:<App></App>,
-  loader:loader
+  // loader:loader
 }

staticwebapp.config.json

@@ -18,7 +18,7 @@
           },
           "login": {
             "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
-            "scopes": ["openid", "email"],
+            "scopes": ["sub", "emails"],
             "loginParameterNames": []
           }
         }