ENH: introduce sso in admin side

incubyte · Aug 2, 2023 · 9d0565e · 9d0565e
1 parent 0d92af7
commit 9d0565e
Show file tree

Hide file tree

Showing 7 changed files with 216 additions and 172 deletions.
diff --git a/admin/package-lock.json b/admin/package-lock.json
diff --git a/admin/package.json b/admin/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@azure/msal-browser": "^2.37.1",
+    "@azure/msal-react": "^1.5.8",
     "@headlessui/react": "^1.7.13",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

diff --git a/admin/src/App.test.tsx b/admin/src/App.test.tsx
diff --git a/admin/src/App.tsx b/admin/src/App.tsx
@@ -1,26 +1,137 @@
+import { InteractionType, RedirectRequest } from "@azure/msal-browser";
+import {
+  AuthenticatedTemplate,
+  useMsal,
+  useMsalAuthentication,
+} from "@azure/msal-react";
 import { useEffect, useState } from "react";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet } from "react-router-dom";
+import { toast } from "react-toastify";
 import "./App.css";
-import LoadingScreen from "./components/utilities/LoadingScreen";
 import Footer from "./components/utilities/Footer";
+import LoadingScreen from "./components/utilities/LoadingScreen";
 
 function App() {
-  const navigator = useNavigate();
-
   const [page, setPage] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [isSignInCompleted, setIsSignInCompleted] = useState(false);
+  const { instance, inProgress } = useMsal();
 
-  const authToken = localStorage.getItem("authToken");
-  const fetchPage = async () => {
-    const response = await fetch("https://backend-mu-plum.vercel.app/", {
-      headers: {
-        Authorization: `Bearer ${authToken}`,
-      },
-    });
-    if (response && !response.ok) {
-      navigator("/auth/sign_in");
+  // const handleSignIn = async () => {
+  //   // if (inProgress === InteractionStatus.None) {
+
+  //   const tokenResponse = await instance.handleRedirectPromise();
+  //   console.log(tokenResponse);
+  //   const accounts = instance.getAllAccounts();
+  //   // if (accounts.length === 0) {
+  //   //   console.log(accounts);
+  //   instance
+  //     .loginRedirect({
+  //       scopes: ["user.read"],
+  //     })
+  //     .then(() => {
+  //       console.log("first");
+  //     })
+  //     .catch((e) => {
+  //       console.log(e);
+  //     });
+  //   // }
+  //   console.log(tokenResponse?.accessToken);
+  // try {
+  //   const response = await fetch(
+  //     "https://backend-mu-plum.vercel.app/auth/admin/signin",
+  //     {
+  //       method: "POST",
+  //       headers: {
+  //         Authorization: `Bearer ${tokenResponse?.accessToken}`,
+  //       },
+  //     }
+  //   );
+
+  //   if (response.ok) {
+  //     const authToken = await response.text();
+  //     console.log(authToken);
+  //     await localStorage.setItem("authToken", authToken);
+  //     setIsSignInCompleted(true);
+  //     console.log(isAuthenticated);
+  //   }
+  // } catch (error) {
+  //   toast.error("An error occurred during login" + error, {
+  //     autoClose: 2500,
+  //     closeButton: false,
+  //   });
+  // }
+  //   // }
+  // };
+
+  const makeJWTRequest = async (result: any) => {
+    try {
+      const response = await fetch(
+        "https://backend-mu-plum.vercel.app/auth/admin/signin",
+        {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${result.accessToken}`,
+          },
+        }
+      );
+      if (response.ok) {
+        const authToken = await response.text();
+        console.log(authToken);
+        await localStorage.setItem("authToken", authToken);
+        setIsSignInCompleted(true);
+        // console.log(isAuthenticated);
+      }
+    } catch (error) {
+      toast.error("An error occurred during login" + error, {
+        autoClose: 2500,
+        closeButton: false,
+      });
+    }
+  };
+  // const isAuthenticated = useIsAuthenticated();
+  const loginRequest: RedirectRequest = {
+    scopes: ["User.Read"],
+  };
+  const { login, result, error } = useMsalAuthentication(
+    InteractionType.Redirect,
+    loginRequest
+  );
+
+  if (error) {
+    // handle error...
+  }
+
+  if (result) {
+    console.log(result);
+    makeJWTRequest(result);
+  }
+
+  const handleSignOut = async () => {
+    await localStorage.removeItem("authToken");
+    const accounts = instance.getAllAccounts();
+    if (accounts.length !== 0) {
+      await instance.logoutRedirect({});
     }
   };
+  // const authToken = localStorage.getItem("authToken");
+  const fetchPage = async () => {
+    console.log(result, "");
+    // if (!isAuthenticated) {
+    //   handleSignIn();
+    // } else {
+    // const accessToken = localStorage.getItem("authToken");
+    // const response = await fetch("https://backend-mu-plum.vercel.app/", {
+    //   headers: {
+    //     Authorization: `Bearer ${accessToken}`,
+    //   },
+    // });
+    // console.log(response);
+    // if (response.ok) {
+    //   setIsSignInCompleted(true);
+    // }
+    // }
+  };
   const fetchData = async () => {
     setIsLoading(true);
 
@@ -30,15 +141,27 @@ function App() {
   };
   useEffect(() => {
     fetchData();
-  }, page);
+  }, [page, isSignInCompleted]);
   return isLoading ? (
     <LoadingScreen />
   ) : (
     <>
-      <div className="App" data-testid="App">
-        <Outlet></Outlet>
-        <Footer></Footer>
-      </div>
+      {/* {result ? ( */}
+      <AuthenticatedTemplate>
+        <>
+          <div className="App" data-testid="App">
+            <button onClick={handleSignOut}>Sign Out</button>
+            <Outlet></Outlet>
+            <Footer></Footer>
+          </div>
+        </>
+      </AuthenticatedTemplate>
+      {/* ) : (
+        <div>not</div>
+      )} */}
+      {/* <UnauthenticatedTemplate>
+        <div>hello</div>
+      </UnauthenticatedTemplate> */}
     </>
   );
 }