fix: use nextauth-based authentication in header (#395)

app/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.tsx

@@ -0,0 +1,42 @@
+import { AuthenticationMenu } from "@databiosphere/findable-ui/lib/components/LAyout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu";
+import { RequestAuthentication } from "@databiosphere/findable-ui/lib/components/LAyout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication";
+import { signOut } from "next-auth/react";
+import { useRouter } from "next/router";
+import { useCallback } from "react";
+import { useAuthentication } from "../../../../../../../../../../hooks/useAuthentication/useAuthentication";
+
+export interface AuthenticationProps {
+  authenticationEnabled?: boolean;
+  closeMenu: () => void;
+}
+
+export const Authentication = ({
+  authenticationEnabled,
+  closeMenu,
+}: AuthenticationProps): JSX.Element => {
+  const { isAuthenticated, requestAuthentication, userProfile } =
+    useAuthentication();
+  const router = useRouter();
+  const onLogout = useCallback((): void => {
+    signOut({ callbackUrl: window.location.origin + router.basePath });
+  }, [router]);
+  return (
+    <>
+      {authenticationEnabled &&
+        (isAuthenticated && userProfile ? (
+          <AuthenticationMenu
+            onLogout={onLogout}
+            userProfile={{
+              name: userProfile.name ?? "",
+              picture: userProfile.image ?? "",
+            }}
+          />
+        ) : (
+          <RequestAuthentication
+            closeMenu={closeMenu}
+            requestAuthorization={requestAuthentication}
+          />
+        ))}
+    </>
+  );
+};

package.json

@@ -37,6 +37,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.2",
+    "react-idle-timer": "^5.7.2",
     "react-window": "1.8.9",
     "string-strip-html": "^13.4.8",
     "uuid": "8.3.2",

site-config/hca-atlas-tracker/local/config.ts

@@ -8,6 +8,7 @@ import {
   TEXT_HEADING_XLARGE,
 } from "@databiosphere/findable-ui/lib/theme/common/typography";
 import * as C from "../../../app/components/index";
+import { Authentication } from "../../../app/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication";
 import { ROUTE } from "../../../app/routes/constants";
 import { SiteConfig } from "../../common/entities";
 import { announcementsConfig } from "./announcements/announcementsConfig";
@@ -46,6 +47,7 @@ export function makeConfig(browserUrl: string, portalUrl: string): SiteConfig {
       },
       header: {
         announcements: announcementsConfig,
+        authenticationComponent: Authentication,
         authenticationEnabled: true,
         logo: C.Logo({
           alt: APP_TITLE,