@databiosphere/findable-ui 19.0.0 → 20.0.0

package/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,
+};

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

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

package/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;
+}

package/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,

package/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 => {

package/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";

package/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>

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

package/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;
 `;

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.tsx

@@ -1,69 +1,45 @@
 import { MenuItem } from "@mui/material";
-import React, { MouseEvent, useState } from "react";
-import { UserProfile } from "../../../../../../../../../../../../hooks/useAuthentication/useFetchGoogleProfile";
+import React, { Fragment } from "react";
+import { useAuth } from "../../../../../../../../../../../../providers/authentication/auth/hook";
+import { UserProfile } from "../../../../../../../../../../../../providers/authentication/authentication/types";
+import { useMenu } from "../../../../../../../../../../../common/Menu/hooks/useMenu";
 import {
-  Avatar,
   AuthenticationMenu as Menu,
+  StyledAvatar,
   UserIcon,
   UserNames,
   UserSummary,
 } from "./authenticationMenu.styles";
+import { MENU_PROPS } from "./constants";
 
 export interface AuthenticationMenuProps {
-  onLogout: () => void;
-  userProfile: UserProfile;
+  profile: UserProfile;
 }
 
 export const AuthenticationMenu = ({
-  onLogout,
-  userProfile,
+  profile,
 }: AuthenticationMenuProps): JSX.Element => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
-  const open = Boolean(anchorEl);
-
-  const onOpenMenu = (event: MouseEvent<HTMLButtonElement>): void => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const onCloseMenu = (): void => {
-    setAnchorEl(null);
-  };
-
+  const { service: { requestLogout } = {} } = useAuth();
+  const { anchorEl, onClose, onOpen, open } = useMenu<HTMLElement>();
   return (
-    <>
-      <UserIcon onClick={onOpenMenu}>
-        <Avatar
-          alt={`${userProfile.given_name} ${userProfile.family_name}`}
-          src={userProfile.picture}
-        />
+    <Fragment>
+      <UserIcon onClick={onOpen}>
+        <StyledAvatar alt={profile.name} src={profile.image} />
       </UserIcon>
-      <Menu
-        anchorEl={anchorEl}
-        anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
-        autoFocus={false}
-        onClose={onCloseMenu}
-        open={open}
-        slotProps={{ paper: { variant: "menu" } }}
-        transformOrigin={{
-          horizontal: "right",
-          vertical: "top",
-        }}
-      >
+      <Menu {...MENU_PROPS} anchorEl={anchorEl} onClose={onClose} open={open}>
         <UserSummary>
           You are signed in as:
-          <UserNames noWrap>
-            {userProfile.given_name} {userProfile.family_name}
-          </UserNames>
+          <UserNames noWrap>{profile.name}</UserNames>
         </UserSummary>
         <MenuItem
           onClick={(): void => {
-            onCloseMenu();
-            onLogout();
+            requestLogout?.();
+            onClose();
           }}
         >
           Logout
         </MenuItem>
       </Menu>
-    </>
+    </Fragment>
   );
 };

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/constants.ts

@@ -0,0 +1,19 @@
+import { MenuProps } from "@mui/material";
+import { VARIANT } from "../../../../../../../../../../../../styles/common/mui/paper";
+import {
+  POPOVER_ORIGIN_HORIZONTAL,
+  POPOVER_ORIGIN_VERTICAL,
+} from "../../../../../../../../../../../../styles/common/mui/popover";
+
+export const MENU_PROPS: Partial<MenuProps> = {
+  anchorOrigin: {
+    horizontal: POPOVER_ORIGIN_HORIZONTAL.RIGHT,
+    vertical: POPOVER_ORIGIN_VERTICAL.BOTTOM,
+  },
+  autoFocus: false,
+  slotProps: { paper: { variant: VARIANT.MENU } },
+  transformOrigin: {
+    horizontal: POPOVER_ORIGIN_HORIZONTAL.RIGHT,
+    vertical: POPOVER_ORIGIN_VERTICAL.TOP,
+  },
+};

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.ts

@@ -1,7 +1,8 @@
 import styled from "@emotion/styled";
-import { Button as MButton } from "@mui/material";
+import { Button } from "@mui/material";
 
-export const StyledButton = styled(MButton)`
+export const StyledButton = styled(Button)`
+  &.MuiButton-activeNav,
   &.MuiButton-nav {
     padding: 6px 12px;
   }

package/src/components/Layout/components/Header/header.tsx

@@ -129,7 +129,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
                   Button={({ ...props }): JSX.Element =>
                     isIn.isMenuIn
                       ? renderAuthenticationIconButton(props)
-                      : renderAuthenticationButton(props)
+                      : renderAuthenticationButton(props, pathname)
                   }
                   authenticationEnabled={authenticationEnabled}
                   closeMenu={onClose}

package/src/components/Login/components/Button/button.styles.ts

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+import { Button } from "@mui/material";
+
+export const StyledButton = styled(Button)`
+  &.MuiButton-root {
+    justify-content: space-between;
+
+    .MuiButton-endIcon {
+      margin: -6px;
+    }
+  }
+`;

package/src/components/Login/components/Button/button.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { StyledButton } from "./button.styles";
+import { BUTTON_PROPS } from "./constants";
+import { Props } from "./types";
+
+export const Button = ({ className, ...props }: Props): JSX.Element => {
+  return <StyledButton className={className} {...BUTTON_PROPS} {...props} />;
+};

package/src/components/Login/components/Button/constants.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from "@mui/material";
+import { COLOR, VARIANT } from "../../../../styles/common/mui/button";
+
+export const BUTTON_PROPS: Partial<ButtonProps> = {
+  color: COLOR.SECONDARY,
+  fullWidth: true,
+  variant: VARIANT.CONTAINED,
+};

package/src/components/Login/components/Button/types.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from "@mui/material/Button/Button";
+import { BaseComponentProps } from "../../../../theme/common/entities";
+
+export type Props = BaseComponentProps & ButtonProps;

package/src/components/Login/login.tsx

@@ -1,13 +1,13 @@
 import { Checkbox, Typography } from "@mui/material";
-import React, { ChangeEvent, ReactNode, useState } from "react";
-import { useAuthentication } from "../../hooks/useAuthentication/useAuthentication";
-import { LoginButton } from "../common/Button/components/LoginButton/loginButton";
+import React, { ChangeEvent, useCallback, useState } from "react";
+import { useAuth } from "../../providers/authentication/auth/hook";
+import { ProviderId } from "../../providers/authentication/common/types";
 import { CheckedIcon } from "../common/CustomIcon/components/CheckedIcon/checkedIcon";
-import { GoogleIcon } from "../common/CustomIcon/components/GoogleIcon/googleIcon";
 import { UncheckedErrorIcon } from "../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon";
 import { UncheckedIcon } from "../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 import { RoundedPaper } from "../common/Paper/paper.styles";
 import { SectionContent } from "../common/Section/section.styles";
+import { Button } from "./components/Button/button";
 import {
   LoginAgreement,
   LoginSection,
@@ -17,35 +17,31 @@ import {
   LoginWrapper,
   TermsOfService,
 } from "./login.styles";
+import { Props } from "./types";
 
-export interface LoginProps {
-  isGoogle?: boolean;
-  termsOfService?: ReactNode;
-  text?: ReactNode;
-  title: string;
-  warning?: ReactNode;
-}
-
-export const Login = ({
-  isGoogle = false,
+export const Login = <P,>({
+  providers = [],
   termsOfService,
   text,
   title,
   warning,
-}: LoginProps): JSX.Element => {
-  const { authenticateUser } = useAuthentication();
+}: Props<P>): JSX.Element => {
+  const { service: { requestLogin } = {} } = useAuth();
   const [isError, setIsError] = useState<boolean>(false);
   const [isInAgreement, setIsInAgreement] = useState<boolean>(!termsOfService);
 
   // Authenticates the user, if the user has agreed to the terms of service.
   // If the terms of service are not accepted, set the terms of service error state to true.
-  const onAuthenticateUser = (): void => {
-    if (!isInAgreement) {
-      setIsError(true);
-      return;
-    }
-    authenticateUser();
-  };
+  const onLogin = useCallback(
+    (providerId: ProviderId): void => {
+      if (!isInAgreement) {
+        setIsError(true);
+        return;
+      }
+      requestLogin?.(providerId);
+    },
+    [isInAgreement, requestLogin]
+  );
 
   // Callback fired when the checkbox value is changed.
   // Clears the terms of service error state and sets state isInAgreement with checkbox selected value.
@@ -75,11 +71,15 @@ export const Login = ({
                 <TermsOfService>{termsOfService}</TermsOfService>
               </LoginAgreement>
             )}
-            {isGoogle && (
-              <LoginButton EndIcon={GoogleIcon} onClick={onAuthenticateUser}>
-                Google
-              </LoginButton>
-            )}
+            {providers?.map((provider) => (
+              <Button
+                key={provider.id}
+                endIcon={"icon" in provider && provider.icon}
+                onClick={() => onLogin(provider.id)}
+              >
+                {provider.name}
+              </Button>
+            ))}
           </LoginSectionActions>
         </LoginSection>
       </RoundedPaper>

package/src/components/Login/types.ts

@@ -0,0 +1,11 @@
+import { ClientSafeProvider } from "next-auth/react";
+import { ReactNode } from "react";
+import { OAuthProvider } from "../../config/entities";
+
+export interface Props<P> {
+  providers?: ClientSafeProvider[] | OAuthProvider<P>[];
+  termsOfService?: ReactNode;
+  text?: ReactNode;
+  title: string;
+  warning?: ReactNode;
+}

package/src/components/common/Banner/components/SessionTimeout/sessionTimeout.tsx

@@ -1,6 +1,6 @@
 import { AlertProps, Fade } from "@mui/material";
 import React from "react";
-import { useSessionTimeout } from "../../../../../hooks/useSessionTimeout";
+import { useSessionTimeout } from "../../../../../hooks/authentication/session/useSessionTimeout";
 import { BaseComponentProps, ContentProps } from "../../../../types";
 import { Banner } from "../../banner";
 

package/src/components/common/CustomIcon/common/entities.ts

@@ -1,6 +1,3 @@
 import { SvgIconProps } from "@mui/material";
 
-export interface CustomSVGIconProps extends SvgIconProps {
-  fontSize?: SvgIconProps["fontSize"];
-  viewBox?: string;
-}
+export type CustomSVGIconProps = SvgIconProps;

package/src/components/common/CustomIcon/components/GoogleIcon/googleIcon.tsx

@@ -1,6 +1,5 @@
-import { SvgIcon } from "@mui/material";
+import { SvgIcon, SvgIconProps } from "@mui/material";
 import React from "react";
-import { CustomSVGIconProps } from "../../common/entities";
 
 /**
  * Custom Google logo icon.
@@ -9,8 +8,8 @@ import { CustomSVGIconProps } from "../../common/entities";
 export const GoogleIcon = ({
   fontSize = "xsmall",
   viewBox = "0 0 20 20",
-  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
-}: CustomSVGIconProps): JSX.Element => {
+  ...props
+}: SvgIconProps): JSX.Element => {
   return (
     <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
       <path