feat!: remove terra functionality from authprovider into its own provider (#178)

package.json

@@ -75,11 +75,12 @@
     "isomorphic-dompurify": "0.24.0",
     "ky": "^1.7.2",
     "next": "^14.1.0",
+    "next-auth": "^4.24.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-gtm-module": "2.0.11",
-    "react-idle-timer": "^5.6.2",
+    "react-idle-timer": "^5.7.2",
     "react-window": "1.8.9",
     "uuid": "8.3.2",
     "validate.js": "^0.13.1"

src/components/Authentication/components/SessionController/SessionController.tsx

@@ -0,0 +1,19 @@
+import { useSession } from "next-auth/react";
+import React, { Fragment, useEffect } from "react";
+import { updateAuthentication } from "../../../../providers/authentication/authentication/dispatch";
+import { useAuthentication } from "../../../../providers/authentication/authentication/hook";
+import { SessionControllerProps } from "./types";
+import { mapAuthentication } from "./utils";
+
+export function SessionController({
+  children,
+}: SessionControllerProps): JSX.Element {
+  const { authenticationDispatch } = useAuthentication();
+  const session = useSession();
+
+  useEffect(() => {
+    authenticationDispatch?.(updateAuthentication(mapAuthentication(session)));
+  }, [authenticationDispatch, session]);
+
+  return <Fragment>{children}</Fragment>;
+}

src/components/Authentication/components/SessionController/types.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export interface SessionControllerProps {
+  children: ReactNode | ReactNode[];
+}

src/components/Authentication/components/SessionController/utils.ts

@@ -0,0 +1,56 @@
+import { Session } from "next-auth";
+import { SessionContextValue } from "next-auth/react";
+import {
+  AUTHENTICATION_STATUS,
+  UpdateAuthenticationPayload,
+  UserProfile,
+} from "../../../../providers/authentication/authentication/types";
+
+/**
+ * Returns the authentication profile and status from the session context.
+ * @param session - Session context value.
+ * @returns authentication profile and status.
+ */
+export function mapAuthentication(
+  session: SessionContextValue
+): UpdateAuthenticationPayload {
+  return {
+    profile: mapProfile(session.data),
+    status: mapAuthenticationStatus(session.status),
+  };
+}
+
+/**
+ * Maps the session data to a user profile.
+ * @param sessionData - Session data.
+ * @returns user profile.
+ */
+function mapProfile(sessionData: Session | null): UserProfile | undefined {
+  if (!sessionData) return;
+  const { user } = sessionData;
+  if (!user) return;
+  const { email, image, name } = user;
+  return {
+    email: email || "",
+    image: image || "",
+    name: name || "",
+  };
+}
+
+/**
+ * Returns the authentication status based on the session status.
+ * @param status - Session status.
+ * @returns authentication status.
+ */
+function mapAuthenticationStatus(
+  status: SessionContextValue["status"]
+): AUTHENTICATION_STATUS {
+  switch (status) {
+    case "authenticated":
+      return AUTHENTICATION_STATUS.SETTLED;
+    case "loading":
+      return AUTHENTICATION_STATUS.PENDING;
+    default:
+      return AUTHENTICATION_STATUS.SETTLED;
+  }
+}

src/components/ComponentCreator/ComponentCreator.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { ComponentsConfig, ViewContext } from "../../config/entities";
-import { useAuthentication } from "../../hooks/useAuthentication/useAuthentication";
 import { useConfig } from "../../hooks/useConfig";
 import { useExploreState } from "../../hooks/useExploreState";
 import { useFileManifestState } from "../../hooks/useFileManifestState";
 import { useSystemStatus } from "../../hooks/useSystemStatus";
+import { useAuth } from "../../providers/authentication/auth/hook";
 
 export interface ComponentCreatorProps<T> {
   components: ComponentsConfig;
@@ -27,7 +27,9 @@ export const ComponentCreator = <T,>({
   response,
   viewContext,
 }: ComponentCreatorProps<T>): JSX.Element => {
-  const { authenticationStatus, isAuthenticated } = useAuthentication();
+  const {
+    authState: { isAuthenticated },
+  } = useAuth();
   const { config, entityConfig } = useConfig();
   const { exploreState } = useExploreState();
   const { fileManifestState } = useFileManifestState();
@@ -53,7 +55,6 @@ export const ComponentCreator = <T,>({
           ? c.viewBuilder(response, {
               ...viewContext,
               authState: {
-                authenticationStatus,
                 isAuthenticated,
               },
               entityConfig,

src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/components/AcceptTerraTOS/acceptTerraTOS.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode } from "react";
-import { LoginStatus } from "../../../../../../../../../../hooks/useAuthentication/common/entities";
-import { useAuthentication } from "../../../../../../../../../../hooks/useAuthentication/useAuthentication";
-import { TerraResponse } from "../../../../../../../../../../hooks/useAuthentication/useFetchTerraProfile";
 import { useConfig } from "../../../../../../../../../../hooks/useConfig";
+import { useTerraProfile } from "../../../../../../../../../../providers/authentication/terra/hook";
+import { LoginStatus } from "../../../../../../../../../../providers/authentication/terra/hooks/common/entities";
+import { TerraResponse } from "../../../../../../../../../../providers/authentication/terra/hooks/useFetchTerraProfile";
 import { ButtonPrimary } from "../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 import {
   ANCHOR_TARGET,
@@ -23,7 +23,7 @@ export const AcceptTerraTOS = ({
 }: AcceptTerraTOSProps): JSX.Element | null => {
   const { config } = useConfig();
   const { exportToTerraUrl } = config;
-  const { terraProfileLoginStatus } = useAuthentication();
+  const { terraProfileLoginStatus } = useTerraProfile();
   const isTOSAccepted = isTermsOfServiceAccepted(terraProfileLoginStatus);
 
   const onOpenTerra = (): void => {

src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/NIHAccountExpiryWarning/nihAccountExpiryWarning.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {
   expireTimeInSeconds,
   useAuthenticationNIHExpiry,
-} from "../../../../../../../../hooks/useAuthentication/useAuthenticationNIHExpiry";
+} from "../../../../../../../../hooks/authentication/terra/useAuthenticationNIHExpiry";
 import { FluidAlert } from "../../../../../../../common/Alert/alert.styles";
 import { Link } from "../../../../../../../Links/components/Link/link";
 

src/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.tsx

@@ -4,7 +4,9 @@ import {
   ONBOARDING_STEP,
   OnboardingStatus,
   useAuthenticationForm,
-} from "../../../../../../hooks/useAuthentication/useAuthenticationForm";
+} from "../../../../../../hooks/authentication/terra/useAuthenticationForm";
+import { useAuth } from "../../../../../../providers/authentication/auth/hook";
+import { AUTH_STATUS } from "../../../../../../providers/authentication/auth/types";
 import { TEXT_BODY_400_2_LINES } from "../../../../../../theme/common/typography";
 import {
   FluidPaper,
@@ -17,11 +19,12 @@ import { CreateTerraAccount } from "./components/FormStep/components/CreateTerra
 import { Section, SectionContent } from "./terraSetUpForm.styles";
 
 export const TerraSetUpForm = (): JSX.Element | null => {
-  const { isComplete, isReady, onboardingStatusByStep } =
-    useAuthenticationForm();
-
-  if (!isReady) return null;
-
+  const {
+    authState: { isAuthenticated, status },
+  } = useAuth();
+  const { isComplete, onboardingStatusByStep } = useAuthenticationForm();
+  if (!isAuthenticated) return null;
+  if (status === AUTH_STATUS.PENDING) return null;
   return isComplete ? null : (
     <FluidPaper>
       <GridPaper>

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

@@ -3,10 +3,13 @@ import {
   ButtonProps as MButtonProps,
   IconButton as MIconButton,
   IconButtonProps as MIconButtonProps,
+  Skeleton,
 } from "@mui/material";
-import { useRouter } from "next/router";
-import React, { ElementType, useCallback } from "react";
-import { useAuthentication } from "../../../../../../../../../../hooks/useAuthentication/useAuthentication";
+import Router from "next/router";
+import React, { ElementType } from "react";
+import { useProfile } from "../../../../../../../../../../hooks/authentication/profile/useProfile";
+import { ROUTE } from "../../../../../../../../../../routes/constants";
+import { isNavigationLinkSelected } from "../../../Navigation/common/utils";
 import { AuthenticationMenu } from "./components/AuthenticationMenu/authenticationMenu";
 import { StyledButton } from "./components/Button/button.styles";
 
@@ -21,39 +24,38 @@ export const Authentication = ({
   Button,
   closeMenu,
 }: AuthenticationProps): JSX.Element | null => {
-  const { isAuthenticated, requestAuthentication, userProfile } =
-    useAuthentication();
-  const router = useRouter();
-  const onLogout = useCallback((): void => {
-    location.href = router.basePath;
-  }, [router]);
-
+  const { isLoading, profile } = useProfile();
   if (!authenticationEnabled) return null;
-
+  if (isLoading) return <Skeleton height={32} variant="circular" width={32} />;
+  if (profile) return <AuthenticationMenu profile={profile} />;
   return (
-    <>
-      {isAuthenticated && userProfile ? (
-        <AuthenticationMenu onLogout={onLogout} userProfile={userProfile} />
-      ) : (
-        <Button
-          onClick={(): void => {
-            requestAuthentication();
-            closeMenu();
-          }}
-        />
-      )}
-    </>
+    <Button
+      onClick={async (): Promise<void> => {
+        await Router.push(ROUTE.LOGIN);
+        closeMenu();
+      }}
+    />
   );
 };
 
 /**
  * Renders authentication button.
  * @param props - Button props.
+ * @param pathname - Pathname.
  * @returns button.
  */
-export function renderButton(props: MButtonProps): JSX.Element {
+export function renderButton(
+  props: MButtonProps,
+  pathname: string
+): JSX.Element {
   return (
-    <StyledButton startIcon={<LoginRoundedIcon />} variant="nav" {...props}>
+    <StyledButton
+      startIcon={<LoginRoundedIcon />}
+      variant={
+        isNavigationLinkSelected(pathname, [ROUTE.LOGIN]) ? "activeNav" : "nav"
+      }
+      {...props}
+    >
       Sign in
     </StyledButton>
   );

src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import {
-  Avatar as MAvatar,
+  Avatar,
   IconButton as MIconButton,
   Menu as MMenu,
   MenuItem,
@@ -33,7 +33,7 @@ export const UserNames = styled(Typography)`
   max-width: 200px;
 `;
 
-export const Avatar = styled(MAvatar)`
+export const StyledAvatar = styled(Avatar)`
   height: 32px;
   width: 32px;
 `;