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/components/GoogleSessionController/SessionController.tsx

@@ -0,0 +1,38 @@
+import React, { Fragment, useEffect } from "react";
+import { authComplete } from "../../../../../../providers/authentication/auth/dispatch";
+import { useAuth } from "../../../../../../providers/authentication/auth/hook";
+import { authenticationComplete } from "../../../../../../providers/authentication/authentication/dispatch";
+import { useAuthentication } from "../../../../../../providers/authentication/authentication/hook";
+import { updateCredentials } from "../../../../../../providers/authentication/credentials/dispatch";
+import { useCredentials } from "../../../../../../providers/authentication/credentials/hook";
+import { SessionControllerProps } from "./types";
+
+export function SessionController({
+  children,
+  token,
+}: SessionControllerProps): JSX.Element {
+  const { authDispatch } = useAuth();
+  const {
+    authenticationDispatch,
+    authenticationState: { profile },
+  } = useAuthentication();
+  const { credentialsDispatch } = useCredentials();
+
+  useEffect(() => {
+    // Dispatch only when profile is available:
+    // - Login errors are managed by the login service.
+    // - Logout operations handle resetting credentials, authentication and auth state.
+    if (!profile) return;
+    credentialsDispatch?.(updateCredentials(token)); // Release credentials.
+    authenticationDispatch?.(authenticationComplete()); // Authentication `status` is "SETTLED".
+    authDispatch?.(authComplete({ isAuthenticated: true })); // Auth `status` is "SETTLED", and `isAuthenticated` is "true".
+  }, [
+    authDispatch,
+    authenticationDispatch,
+    credentialsDispatch,
+    profile,
+    token,
+  ]);
+
+  return <Fragment>{children}</Fragment>;
+}

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

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { TokenState } from "../../../../../../providers/authentication/token/types";
+
+export interface SessionControllerProps {
+  children: ReactNode | ReactNode[];
+  token: TokenState["token"];
+}

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

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

src/components/Authentication/components/SessionController/components/NextSessionController/constants.ts

@@ -0,0 +1,21 @@
+import { SessionContextValue } from "next-auth/react";
+import { AUTH_STATUS } from "../../../../../../providers/authentication/auth/types";
+import { AUTHENTICATION_STATUS } from "../../../../../../providers/authentication/authentication/types";
+
+export const AUTH_STATUS_MAP: Record<
+  SessionContextValue["status"],
+  AUTH_STATUS
+> = {
+  authenticated: AUTH_STATUS.SETTLED,
+  loading: AUTH_STATUS.PENDING,
+  unauthenticated: AUTH_STATUS.SETTLED,
+};
+
+export const AUTHENTICATION_STATUS_MAP: Record<
+  SessionContextValue["status"],
+  AUTHENTICATION_STATUS
+> = {
+  authenticated: AUTHENTICATION_STATUS.SETTLED,
+  loading: AUTHENTICATION_STATUS.PENDING,
+  unauthenticated: AUTHENTICATION_STATUS.SETTLED,
+};

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

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

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

@@ -0,0 +1,74 @@
+import { Session } from "next-auth";
+import { SessionContextValue } from "next-auth/react";
+import {
+  AUTH_STATUS,
+  UpdateAuthStatePayload,
+} from "../../../../../../providers/authentication/auth/types";
+import {
+  AUTHENTICATION_STATUS,
+  UpdateAuthenticationPayload,
+  UserProfile,
+} from "../../../../../../providers/authentication/authentication/types";
+import { AUTH_STATUS_MAP, AUTHENTICATION_STATUS_MAP } from "./constants";
+
+/**
+ * Returns the auth state from the session context.
+ * @param session - Session context value.
+ * @returns auth state.
+ */
+export function mapAuth(session: SessionContextValue): UpdateAuthStatePayload {
+  return {
+    isAuthenticated: session.status === "authenticated",
+    status: mapStatus(session.status, AUTH_STATUS_MAP, AUTH_STATUS.SETTLED),
+  };
+}
+
+/**
+ * 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: mapStatus(
+      session.status,
+      AUTHENTICATION_STATUS_MAP,
+      AUTHENTICATION_STATUS.SETTLED
+    ),
+  };
+}
+
+/**
+ * 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 auth or authentication status <S> based on the session status.
+ * @param status - Session status.
+ * @param statusBySessionStatus - Map of session status to auth or authentication status.
+ * @param defaultStatus - Default auth or authentication status.
+ * @returns auth or authentication status.
+ */
+function mapStatus<S>(
+  status: SessionContextValue["status"],
+  statusBySessionStatus: Record<SessionContextValue["status"], S>,
+  defaultStatus: S
+): S {
+  return statusBySessionStatus[status] || defaultStatus;
+}

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 { Alert } from "../../../../../../../common/Alert/alert";
 import { ALERT_PROPS } from "../../../../../../../common/Alert/constants";
 import { FluidPaper } from "../../../../../../../common/Paper/paper.styles";

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>
   );