Add login support to admin panel

api-platform/admin#503 (comment)
stethome · Aug 2, 2023 · 61659bd · 61659bd
1 parent 9f7a6ae
commit 61659bd
Show file tree

Hide file tree

Showing 8 changed files with 231 additions and 44 deletions.
diff --git a/api-platform/pwa/next.config.js b/api-platform/pwa/next.config.js
@@ -3,6 +3,12 @@ const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
   output: 'standalone',
+  webpack: (config) => {
+    config.experiments = {
+      topLevelAwait: true,
+    }
+    return config
+  },
 }
 
 module.exports = nextConfig
diff --git a/api-platform/pwa/package.json b/api-platform/pwa/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@api-platform/admin": "^3.4.3",
+    "@api-platform/api-doc-parser": "^0.16.1",
     "@fontsource/poppins": "^4.5.10",
     "@tailwindcss/forms": "^0.5.3",
     "formik": "^2.2.9",
@@ -18,8 +19,10 @@
     "next": "^13.2.1",
     "postcss": "^8.4.21",
     "react": "^18.2.0",
+    "react-admin": "^4.12.3",
     "react-dom": "^18.2.0",
-    "react-query": "^3.39.3"
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.14.2"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
@@ -36,5 +39,10 @@
   "peerDependencies": {
     "@babel/core": "^7.19.0",
     "@popperjs/core": "^2.11.6"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "@api-platform/[email protected]": "patches/@[email protected]"
+    }
   }
 }
diff --git a/api-platform/pwa/pages/admin/index.tsx b/api-platform/pwa/pages/admin/index.tsx
@@ -1,14 +1,81 @@
 import Head from "next/head";
 import { useEffect, useState } from "react";
+import authProvider, {ADMIN_TOKEN} from "../../utils/admin/authProvider";
+import {ENTRYPOINT} from "../../config/entrypoint";
+import {
+  fetchHydra as baseFetchHydra,
+  hydraDataProvider as baseHydraDataProvider,
+  useIntrospection,
+} from "@api-platform/admin";
+import {parseHydraDocumentation} from "@api-platform/api-doc-parser";
+import { Navigate, Route } from "react-router-dom";
+import { CustomRoutes } from "react-admin";
+
+const getHeaders = (): HeadersInit => (localStorage.getItem(ADMIN_TOKEN) ? {
+  Authorization: `Bearer ${localStorage.getItem(ADMIN_TOKEN)}`,
+} : {});
+
+const fetchHydra = (url: URL, options = {}) =>
+  baseFetchHydra(url, {
+    ...options,
+    headers: getHeaders
+  });
+
+const RedirectToLogin = () => {
+  const introspect = useIntrospection();
+  if (localStorage.getItem(ADMIN_TOKEN)) {
+    introspect();
+    return <></>;
+  }
+  return <Navigate to="/login" />;
+};
+
+const apiDocumentationParser = (setRedirectToLogin: (arg0: boolean) => void) => async () => {
+  try {
+    setRedirectToLogin(false);
+    // @ts-ignore
+    return await parseHydraDocumentation(ENTRYPOINT, { headers: getHeaders });
+  } catch (result) {
+    // @ts-ignore
+    const { api, response, status } = result;
+    if (status !== 401 || !response) {
+      throw result;
+    }
+    // Prevent infinite loop if the token is expired
+    localStorage.removeItem(ADMIN_TOKEN);
+    setRedirectToLogin(true);
+    return {
+      api,
+      response,
+      status,
+    };
+  }
+};
+
+const dataProvider = (setRedirectToLogin: (arg0: boolean) => void) => baseHydraDataProvider({
+  // @ts-ignore
+  entrypoint: ENTRYPOINT,
+  httpClient: fetchHydra,
+  apiDocumentationParser: apiDocumentationParser(setRedirectToLogin),
+});
 
 const Admin = () => {
   // Load the admin client-side
   const [DynamicAdmin, setDynamicAdmin] = useState(<p>Loading...</p>);
+  const [redirectToLogin, setRedirectToLogin] = useState(false);
   useEffect(() => {
     (async () => {
       const HydraAdmin = (await import("@api-platform/admin")).HydraAdmin;
 
-      setDynamicAdmin(<HydraAdmin entrypoint={window.origin}></HydraAdmin>);
+      setDynamicAdmin(<HydraAdmin
+        dataProvider={dataProvider(setRedirectToLogin)}
+        authProvider={authProvider}
+        entrypoint={window.origin}
+      >
+        <CustomRoutes>
+          {redirectToLogin ? <Route path="/" element={<RedirectToLogin />} /> : null}
+        </CustomRoutes>
+      </HydraAdmin>);
     })();
   }, []);
 

diff --git a/api-platform/pwa/patches/@[email protected] b/api-platform/pwa/patches/@[email protected]
@@ -0,0 +1,14 @@
+diff --git a/lib/layout/Error.js b/lib/layout/Error.js
+index ff42479b1eb353c1e3e9fb118f2e340bbd5556fc..70f45adf58814e1d65a085b8a38725bb794e45af 100644
+--- a/lib/layout/Error.js
++++ b/lib/layout/Error.js
+@@ -11,8 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
+ };
+ import React from 'react';
+ import { Title, useTranslate } from 'react-admin';
+-import { Accordion, AccordionDetails, AccordionSummary, Box, Button, Typography, } from '@mui/material';
+-import { styled } from '@mui/material/styles/index.js'; // eslint-disable-line import/extensions
++import { styled, Accordion, AccordionDetails, AccordionSummary, Box, Button, Typography, } from '@mui/material';
+ import ExpandMoreIcon from '@mui/icons-material/ExpandMore.js'; // eslint-disable-line import/extensions
+ import HistoryIcon from '@mui/icons-material/History.js'; // eslint-disable-line import/extensions
+ import RefreshIcon from '@mui/icons-material/Refresh.js'; // eslint-disable-line import/extensions