docs: update authentication-support.md (#1484)

4c0n · web-flow · commit 648990a5305a · 2021-12-15T12:26:51.000+01:00
diff --git a/admin/authentication-support.md b/admin/authentication-support.md
@@ -6,15 +6,16 @@ for more information.
 
 In short, you have to tweak the data provider and the api documentation parser like this:
 
-```javascript
-// admin/src/App.js
+```typescript
+// pwa/pages/admin/index.tsx
 
+import Head from "next/head";
 import { Redirect, Route } from "react-router-dom";
-import { HydraAdmin, hydraDataProvider as baseHydraDataProvider, fetchHydra as baseFetchHydra, useIntrospection } from "@api-platform/admin";
+import { hydraDataProvider as baseHydraDataProvider, fetchHydra as baseFetchHydra, useIntrospection } from "@api-platform/admin";
 import parseHydraDocumentation from "@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation";
-import authProvider from "./authProvider";
+import authProvider from "utils/authProvider";
+import { ENTRYPOINT } from "config/entrypoint";
 
-const entrypoint = process.env.REACT_APP_API_ENTRYPOINT;
 const getHeaders = () => localStorage.getItem("token") ? {
   Authorization: `Bearer ${localStorage.getItem("token")}`,
 } : {};
@@ -32,40 +33,51 @@ const RedirectToLogin = () => {
   }
   return <Redirect to="/login" />;
 };
-const apiDocumentationParser = async (entrypoint) => {
+const apiDocumentationParser = async () => {
   try {
-    const { api } = await parseHydraDocumentation(entrypoint, { headers: getHeaders });
+    const { api } = await parseHydraDocumentation(ENTRYPOINT, { headers: getHeaders });
     return { api };
   } catch (result) {
-    if (result.status === 401) {
-      // Prevent infinite loop if the token is expired
-      localStorage.removeItem("token");
-
-      return {
-        api: result.api,
-        customRoutes: [
-          <Route path="/" component={RedirectToLogin} />
-        ],
-      };
+    if (result.status !== 401) {
+      throw result;
     }
 
-    throw result;
+    // Prevent infinite loop if the token is expired
+    localStorage.removeItem("token");
+
+    return {
+      api: result.api,
+      customRoutes: [
+        <Route key="/" path="/" component={RedirectToLogin} />
+      ],
+    };
   }
 };
 const dataProvider = baseHydraDataProvider({
-  entrypoint,
+  entrypoint: ENTRYPOINT,
   httpClient: fetchHydra,
   apiDocumentationParser,
-  mercure: true, // or false if you don't use Mercure
 });
 
-export default () => (
-  <HydraAdmin
-    dataProvider={ dataProvider }
-    authProvider={ authProvider }
-    entrypoint={ entrypoint }
-  />
+const AdminLoader = () => {
+  if (typeof window !== "undefined") {
+    const { HydraAdmin } = require("@api-platform/admin");
+    return <HydraAdmin dataProvider={dataProvider} authProvider={authProvider} entrypoint={window.origin} />;
+  }
+
+  return <></>;
+};
+
+const Admin = () => (
+  <>
+    <Head>
+      <title>API Platform Admin</title>
+    </Head>
+
+    <AdminLoader />
+  </>
 );
+export default Admin;
 ```
 
 For the implementation of the auth provider, you can find a working example in the [API Platform's demo application](https://github.com/api-platform/demo/blob/main/pwa/utils/authProvider.tsx).
