@databiosphere/findable-ui 19.0.0 → 20.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "19.0.0"
+  ".": "20.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [20.0.0](https://github.com/DataBiosphere/findable-ui/compare/v19.0.0...v20.0.0) (2025-01-06)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove terra functionality from authprovider into its own provider ([#178](https://github.com/DataBiosphere/findable-ui/issues/178)) (#240)
+
+### Features
+
+* remove terra functionality from authprovider into its own provider ([#178](https://github.com/DataBiosphere/findable-ui/issues/178)) ([#240](https://github.com/DataBiosphere/findable-ui/issues/240)) ([18b0ea8](https://github.com/DataBiosphere/findable-ui/commit/18b0ea875b0096a76e968f8578769f62fbab8804))
+
 ## [19.0.0](https://github.com/DataBiosphere/findable-ui/compare/v18.0.0...v19.0.0) (2025-01-03)
 
 

package/lib/components/Authentication/components/SessionController/components/GoogleSessionController/SessionController.d.ts

@@ -0,0 +1,2 @@
+import { SessionControllerProps } from "./types";
+export declare function SessionController({ children, token, }: SessionControllerProps): JSX.Element;

package/lib/components/Authentication/components/SessionController/components/GoogleSessionController/SessionController.js

@@ -0,0 +1,29 @@
+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";
+export function SessionController({ children, token, }) {
+    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 React.createElement(Fragment, null, children);
+}

package/lib/components/Authentication/components/SessionController/components/GoogleSessionController/types.d.ts

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

package/lib/components/Authentication/components/SessionController/components/GoogleSessionController/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Authentication/components/SessionController/components/NextSessionController/SessionController.d.ts

@@ -0,0 +1,2 @@
+import { SessionControllerProps } from "./types";
+export declare function SessionController({ children, }: SessionControllerProps): JSX.Element;

package/lib/components/Authentication/components/SessionController/components/NextSessionController/SessionController.js

@@ -0,0 +1,17 @@
+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 { mapAuth, mapAuthentication } from "./utils";
+export function SessionController({ children, }) {
+    const { authDispatch } = useAuth();
+    const { authenticationDispatch } = useAuthentication();
+    const session = useSession();
+    useEffect(() => {
+        authDispatch?.(updateAuthState(mapAuth(session)));
+        authenticationDispatch?.(updateAuthentication(mapAuthentication(session)));
+    }, [authDispatch, authenticationDispatch, session]);
+    return React.createElement(Fragment, null, children);
+}

package/lib/components/Authentication/components/SessionController/components/NextSessionController/constants.d.ts

@@ -0,0 +1,5 @@
+import { SessionContextValue } from "next-auth/react";
+import { AUTH_STATUS } from "../../../../../../providers/authentication/auth/types";
+import { AUTHENTICATION_STATUS } from "../../../../../../providers/authentication/authentication/types";
+export declare const AUTH_STATUS_MAP: Record<SessionContextValue["status"], AUTH_STATUS>;
+export declare const AUTHENTICATION_STATUS_MAP: Record<SessionContextValue["status"], AUTHENTICATION_STATUS>;

package/lib/components/Authentication/components/SessionController/components/NextSessionController/constants.js

@@ -0,0 +1,12 @@
+import { AUTH_STATUS } from "../../../../../../providers/authentication/auth/types";
+import { AUTHENTICATION_STATUS } from "../../../../../../providers/authentication/authentication/types";
+export const AUTH_STATUS_MAP = {
+    authenticated: AUTH_STATUS.SETTLED,
+    loading: AUTH_STATUS.PENDING,
+    unauthenticated: AUTH_STATUS.SETTLED,
+};
+export const AUTHENTICATION_STATUS_MAP = {
+    authenticated: AUTHENTICATION_STATUS.SETTLED,
+    loading: AUTHENTICATION_STATUS.PENDING,
+    unauthenticated: AUTHENTICATION_STATUS.SETTLED,
+};

package/lib/components/Authentication/components/SessionController/components/NextSessionController/types.d.ts

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

package/lib/components/Authentication/components/SessionController/components/NextSessionController/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Authentication/components/SessionController/components/NextSessionController/utils.d.ts

@@ -0,0 +1,15 @@
+import { SessionContextValue } from "next-auth/react";
+import { UpdateAuthStatePayload } from "../../../../../../providers/authentication/auth/types";
+import { UpdateAuthenticationPayload } from "../../../../../../providers/authentication/authentication/types";
+/**
+ * Returns the auth state from the session context.
+ * @param session - Session context value.
+ * @returns auth state.
+ */
+export declare function mapAuth(session: SessionContextValue): UpdateAuthStatePayload;
+/**
+ * Returns the authentication profile and status from the session context.
+ * @param session - Session context value.
+ * @returns authentication profile and status.
+ */
+export declare function mapAuthentication(session: SessionContextValue): UpdateAuthenticationPayload;

package/lib/components/Authentication/components/SessionController/components/NextSessionController/utils.js

@@ -0,0 +1,53 @@
+import { AUTH_STATUS, } from "../../../../../../providers/authentication/auth/types";
+import { AUTHENTICATION_STATUS, } 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) {
+    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) {
+    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) {
+    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(status, statusBySessionStatus, defaultStatus) {
+    return statusBySessionStatus[status] || defaultStatus;
+}

package/lib/components/ComponentCreator/ComponentCreator.js

@@ -1,9 +1,9 @@
 import React from "react";
-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";
 /**
  * ComponentCreator uses React API to create components based on the component configs, instead of using JSX.
  * That way we can continue to create UI components without having to worry about if they should be able to transform model data into props.
@@ -15,7 +15,7 @@ import { useSystemStatus } from "../../hooks/useSystemStatus";
  * @returns A set of React components.
  */
 export const ComponentCreator = ({ components, response, viewContext, }) => {
-    const { authenticationStatus, isAuthenticated } = useAuthentication();
+    const { authState: { isAuthenticated }, } = useAuth();
     const { config, entityConfig } = useConfig();
     const { exploreState } = useExploreState();
     const { fileManifestState } = useFileManifestState();
@@ -30,7 +30,6 @@ export const ComponentCreator = ({ components, response, viewContext, }) => {
             ? c.viewBuilder(response, {
                 ...viewContext,
                 authState: {
-                    authenticationStatus,
                     isAuthenticated,
                 },
                 entityConfig,

package/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/components/AcceptTerraTOS/acceptTerraTOS.js

@@ -1,13 +1,13 @@
 import React from "react";
-import { useAuthentication } from "../../../../../../../../../../hooks/useAuthentication/useAuthentication";
 import { useConfig } from "../../../../../../../../../../hooks/useConfig";
+import { useTerraProfile } from "../../../../../../../../../../providers/authentication/terra/hook";
 import { ButtonPrimary } from "../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../../../../../Links/common/entities";
 import { FormStep } from "../../formStep";
 export const AcceptTerraTOS = ({ active, completed, step, }) => {
     const { config } = useConfig();
     const { exportToTerraUrl } = config;
-    const { terraProfileLoginStatus } = useAuthentication();
+    const { terraProfileLoginStatus } = useTerraProfile();
     const isTOSAccepted = isTermsOfServiceAccepted(terraProfileLoginStatus);
     const onOpenTerra = () => {
         if (exportToTerraUrl) {

package/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/NIHAccountExpiryWarning/nihAccountExpiryWarning.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { expireTimeInSeconds, useAuthenticationNIHExpiry, } from "../../../../../../../../hooks/useAuthentication/useAuthenticationNIHExpiry";
+import { expireTimeInSeconds, 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/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.js

@@ -1,6 +1,8 @@
 import { Typography } from "@mui/material";
 import React from "react";
-import { ONBOARDING_STEP, useAuthenticationForm, } from "../../../../../../hooks/useAuthentication/useAuthenticationForm";
+import { ONBOARDING_STEP, 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, GridPaper, } from "../../../../../common/Paper/paper.styles";
 import { SectionTitle } from "../../../../../common/Section/components/SectionTitle/sectionTitle";
@@ -9,8 +11,11 @@ import { ConnectTerraToNIHAccount } from "./components/FormStep/components/Conne
 import { CreateTerraAccount } from "./components/FormStep/components/CreateTerraAccount/createTerraAccount";
 import { Section, SectionContent } from "./terraSetUpForm.styles";
 export const TerraSetUpForm = () => {
-    const { isComplete, isReady, onboardingStatusByStep } = useAuthenticationForm();
-    if (!isReady)
+    const { authState: { isAuthenticated, status }, } = useAuth();
+    const { isComplete, onboardingStatusByStep } = useAuthenticationForm();
+    if (!isAuthenticated)
+        return null;
+    if (status === AUTH_STATUS.PENDING)
         return null;
     return isComplete ? null : (React.createElement(FluidPaper, null,
         React.createElement(GridPaper, null,

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.d.ts

@@ -9,9 +9,10 @@ export declare const Authentication: ({ authenticationEnabled, Button, closeMenu
 /**
  * Renders authentication button.
  * @param props - Button props.
+ * @param pathname - Pathname.
  * @returns button.
  */
-export declare function renderButton(props: MButtonProps): JSX.Element;
+export declare function renderButton(props: MButtonProps, pathname: string): JSX.Element;
 /**
  * Renders authentication icon button.
  * @param props - Button props.

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.js

@@ -1,30 +1,33 @@
 import LoginRoundedIcon from "@mui/icons-material/LoginRounded";
-import { IconButton as MIconButton, } from "@mui/material";
-import { useRouter } from "next/router";
-import React, { useCallback } from "react";
-import { useAuthentication } from "../../../../../../../../../../hooks/useAuthentication/useAuthentication";
+import { IconButton as MIconButton, Skeleton, } from "@mui/material";
+import Router from "next/router";
+import React 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";
 export const Authentication = ({ authenticationEnabled, Button, closeMenu, }) => {
-    const { isAuthenticated, requestAuthentication, userProfile } = useAuthentication();
-    const router = useRouter();
-    const onLogout = useCallback(() => {
-        location.href = router.basePath;
-    }, [router]);
+    const { isLoading, profile } = useProfile();
     if (!authenticationEnabled)
         return null;
-    return (React.createElement(React.Fragment, null, isAuthenticated && userProfile ? (React.createElement(AuthenticationMenu, { onLogout: onLogout, userProfile: userProfile })) : (React.createElement(Button, { onClick: () => {
-            requestAuthentication();
+    if (isLoading)
+        return React.createElement(Skeleton, { height: 32, variant: "circular", width: 32 });
+    if (profile)
+        return React.createElement(AuthenticationMenu, { profile: profile });
+    return (React.createElement(Button, { onClick: async () => {
+            await Router.push(ROUTE.LOGIN);
             closeMenu();
-        } }))));
+        } }));
 };
 /**
  * Renders authentication button.
  * @param props - Button props.
+ * @param pathname - Pathname.
  * @returns button.
  */
-export function renderButton(props) {
-    return (React.createElement(StyledButton, { startIcon: React.createElement(LoginRoundedIcon, null), variant: "nav", ...props }, "Sign in"));
+export function renderButton(props, pathname) {
+    return (React.createElement(StyledButton, { startIcon: React.createElement(LoginRoundedIcon, null), variant: isNavigationLinkSelected(pathname, [ROUTE.LOGIN]) ? "activeNav" : "nav", ...props }, "Sign in"));
 }
 /**
  * Renders authentication icon button.

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.d.ts

@@ -1,6 +1,5 @@
-import { UserProfile } from "../../../../../../../../../../../../hooks/useAuthentication/useFetchGoogleProfile";
+import { UserProfile } from "../../../../../../../../../../../../providers/authentication/authentication/types";
 export interface AuthenticationMenuProps {
-    onLogout: () => void;
-    userProfile: UserProfile;
+    profile: UserProfile;
 }
-export declare const AuthenticationMenu: ({ onLogout, userProfile, }: AuthenticationMenuProps) => JSX.Element;
+export declare const AuthenticationMenu: ({ profile, }: AuthenticationMenuProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.js

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

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.d.ts

@@ -16,7 +16,7 @@ export declare const UserNames: import("@emotion/styled").StyledComponent<import
 }, "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "p" | "style" | "className" | "classes" | "color" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const Avatar: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const StyledAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, "style" | "className" | "classes" | "children" | "sx" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "slotProps" | "slots" | "imgProps"> & {
     theme?: import("@emotion/react").Theme;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.js

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { Avatar as MAvatar, IconButton as MIconButton, Menu as MMenu, MenuItem, Typography, } from "@mui/material";
+import { Avatar, IconButton as MIconButton, Menu as MMenu, MenuItem, Typography, } from "@mui/material";
 export const AuthenticationMenu = styled(MMenu) `
   margin: 4px 0;
 `;
@@ -22,7 +22,7 @@ export const UserNames = styled(Typography) `
   font-weight: 500;
   max-width: 200px;
 `;
-export const Avatar = styled(MAvatar) `
+export const StyledAvatar = styled(Avatar) `
   height: 32px;
   width: 32px;
 `;

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

@@ -0,0 +1,2 @@
+import { MenuProps } from "@mui/material";
+export declare const MENU_PROPS: Partial<MenuProps>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/constants.js

@@ -0,0 +1,14 @@
+import { VARIANT } from "../../../../../../../../../../../../styles/common/mui/paper";
+import { POPOVER_ORIGIN_HORIZONTAL, POPOVER_ORIGIN_VERTICAL, } from "../../../../../../../../../../../../styles/common/mui/popover";
+export const MENU_PROPS = {
+    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/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.js

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

package/lib/components/Layout/components/Header/header.js

@@ -49,7 +49,7 @@ export const Header = ({ ...headerProps }) => {
                                 : renderSearchButton(props), closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
                         React.createElement(Authentication, { Button: ({ ...props }) => isIn.isMenuIn
                                 ? renderAuthenticationIconButton(props)
-                                : renderAuthenticationButton(props), authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
+                                : renderAuthenticationButton(props, pathname), authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
                         actions,
                         React.createElement(Menu, { ...navigationProps, closeMenu: onClose, isMenuIn: isIn.isMenuIn, open: open, openMenu: onOpen }))))))));
 };

package/lib/components/Login/components/Button/button.d.ts

@@ -0,0 +1,2 @@
+import { Props } from "./types";
+export declare const Button: ({ className, ...props }: Props) => JSX.Element;

package/lib/components/Login/components/Button/button.js

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

package/lib/components/Login/components/Button/button.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Login/components/Button/button.styles.js

@@ -0,0 +1,11 @@
+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/lib/components/Login/components/Button/constants.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from "@mui/material";
+export declare const BUTTON_PROPS: Partial<ButtonProps>;

package/lib/components/Login/components/Button/constants.js

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

package/lib/components/Login/components/Button/types.d.ts

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

package/lib/components/Login/components/Button/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Login/login.d.ts

@@ -1,9 +1,2 @@
-import { ReactNode } from "react";
-export interface LoginProps {
-    isGoogle?: boolean;
-    termsOfService?: ReactNode;
-    text?: ReactNode;
-    title: string;
-    warning?: ReactNode;
-}
-export declare const Login: ({ isGoogle, termsOfService, text, title, warning, }: LoginProps) => JSX.Element;
+import { Props } from "./types";
+export declare const Login: <P>({ providers, termsOfService, text, title, warning, }: Props<P>) => JSX.Element;

package/lib/components/Login/login.js

@@ -1,27 +1,26 @@
 import { Checkbox, Typography } from "@mui/material";
-import React, { useState } from "react";
-import { useAuthentication } from "../../hooks/useAuthentication/useAuthentication";
-import { LoginButton } from "../common/Button/components/LoginButton/loginButton";
+import React, { useCallback, useState } from "react";
+import { useAuth } from "../../providers/authentication/auth/hook";
 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, LoginSectionActions, LoginText, LoginWarning, LoginWrapper, TermsOfService, } from "./login.styles";
-export const Login = ({ isGoogle = false, termsOfService, text, title, warning, }) => {
-    const { authenticateUser } = useAuthentication();
+export const Login = ({ providers = [], termsOfService, text, title, warning, }) => {
+    const { service: { requestLogin } = {} } = useAuth();
     const [isError, setIsError] = useState(false);
     const [isInAgreement, setIsInAgreement] = useState(!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 = () => {
+    const onLogin = useCallback((providerId) => {
         if (!isInAgreement) {
             setIsError(true);
             return;
         }
-        authenticateUser();
-    };
+        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.
     const handleChange = (changeEvent) => {
@@ -38,6 +37,6 @@ export const Login = ({ isGoogle = false, termsOfService, text, title, warning,
                     termsOfService && (React.createElement(LoginAgreement, null,
                         React.createElement(Checkbox, { checkedIcon: React.createElement(CheckedIcon, null), icon: isError ? React.createElement(UncheckedErrorIcon, null) : React.createElement(UncheckedIcon, null), onChange: handleChange }),
                         React.createElement(TermsOfService, null, termsOfService))),
-                    isGoogle && (React.createElement(LoginButton, { EndIcon: GoogleIcon, onClick: onAuthenticateUser }, "Google"))))),
+                    providers?.map((provider) => (React.createElement(Button, { key: provider.id, endIcon: "icon" in provider && provider.icon, onClick: () => onLogin(provider.id) }, provider.name)))))),
         warning && React.createElement(LoginWarning, null, warning)));
 };

package/lib/components/Login/types.d.ts

@@ -0,0 +1,10 @@
+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/lib/components/Login/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/common/Banner/components/SessionTimeout/sessionTimeout.js

@@ -1,6 +1,6 @@
 import { Fade } from "@mui/material";
 import React from "react";
-import { useSessionTimeout } from "../../../../../hooks/useSessionTimeout";
+import { useSessionTimeout } from "../../../../../hooks/authentication/session/useSessionTimeout";
 import { Banner } from "../../banner";
 export const SessionTimeout = ({ children, className, content, ...props }) => {
     const { clearSessionTimeout, isSessionTimeout } = useSessionTimeout();