@databiosphere/findable-ui 21.3.0 → 21.4.0

package/lib/providers/loginGuard/common/types.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+/**
+ * A callback function to be stored and then executed upon successful login.
+ */
+export type LoginGuardCallback = () => void;
+/**
+ * The shape of the LoginGuard context, provides a function to trigger the
+ * login process.
+ */
+export interface LoginGuardContextProps {
+    requireLogin: (callback?: LoginGuardCallback) => void;
+}
+/**
+ * The properties for the LoginGuardProvider component.
+ */
+export interface LoginGuardProviderProps {
+    children: ReactNode;
+}

package/lib/providers/loginGuard/common/types.js

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

package/lib/providers/loginGuard/context.d.ts

@@ -0,0 +1,6 @@
+import { LoginGuardContextProps } from "./common/types";
+/**
+ * LoginGuardContext provides a way to trigger a login process. Default value is to
+ * call the callback immediately, if specified.
+ */
+export declare const LoginGuardContext: import("react").Context<LoginGuardContextProps>;

package/lib/providers/loginGuard/context.js

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+/**
+ * LoginGuardContext provides a way to trigger a login process. Default value is to
+ * call the callback immediately, if specified.
+ */
+export const LoginGuardContext = createContext({
+    requireLogin: (callback) => {
+        callback?.();
+    },
+});

package/lib/providers/loginGuard/hook.d.ts

@@ -0,0 +1,9 @@
+import { LoginGuardContextProps } from "./common/types";
+/**
+ * Custom hook to access the LoginGuard context. This hook returns an object
+ * containing the "requireLogin" function, which allows triggering the application's
+ * login process.
+ *
+ * @returns The current LoginGuard context value.
+ */
+export declare function useLoginGuard(): LoginGuardContextProps;

package/lib/providers/loginGuard/hook.js

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { LoginGuardContext } from "./context";
+/**
+ * Custom hook to access the LoginGuard context. This hook returns an object
+ * containing the "requireLogin" function, which allows triggering the application's
+ * login process.
+ *
+ * @returns The current LoginGuard context value.
+ */
+export function useLoginGuard() {
+    return useContext(LoginGuardContext);
+}

package/lib/providers/loginGuard/provider.d.ts

@@ -0,0 +1,11 @@
+import { LoginGuardProviderProps } from "./common/types";
+/**
+ * LoginGuardProvider is responsible for intercepting actions that require user authentication.
+ * It provides a "requireLogin" function via context. When a protected action is triggered while the
+ * user is unauthenticated, the LoginDialog is displayed. Upon successful authentication, the saved
+ * callback is invoked.
+ *
+ * @param {LoginGuardProviderProps} props - The provider props that include children.
+ * @returns The provider component.
+ */
+export declare function LoginGuardProvider({ children, }: LoginGuardProviderProps): JSX.Element;

package/lib/providers/loginGuard/provider.js

@@ -0,0 +1,55 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { LoginDialog } from "../../components/common/LoginDialog/loginDialog";
+import { useAuthenticationConfig } from "../../hooks/authentication/config/useAuthenticationConfig";
+import { useConfig } from "../../hooks/useConfig";
+import { useAuth } from "../authentication/auth/hook";
+import { LoginGuardContext } from "./context";
+/**
+ * LoginGuardProvider is responsible for intercepting actions that require user authentication.
+ * It provides a "requireLogin" function via context. When a protected action is triggered while the
+ * user is unauthenticated, the LoginDialog is displayed. Upon successful authentication, the saved
+ * callback is invoked.
+ *
+ * @param {LoginGuardProviderProps} props - The provider props that include children.
+ * @returns The provider component.
+ */
+export function LoginGuardProvider({ children, }) {
+    // Dialog open state.
+    const [open, setOpen] = useState(false);
+    // Use ref to store the callback without triggering re-render.
+    const callbackRef = useRef(undefined);
+    // Determine if authentication is enabled.
+    const authConfig = useAuthenticationConfig();
+    // Determine if authentication is required for downloads and exports.
+    const { config: { exportsRequireAuth }, } = useConfig();
+    // Get the user's authenticated state.
+    const { authState: { isAuthenticated }, } = useAuth();
+    // If the user authenticates, close dialog then fire and clear callback.
+    useEffect(() => {
+        if (isAuthenticated) {
+            setOpen(false);
+            callbackRef.current?.();
+            // Clear callback after firing.
+            callbackRef.current = undefined;
+        }
+    }, [isAuthenticated]);
+    // Handler to close the dialog.
+    const onClose = useCallback(() => {
+        setOpen(false);
+        // Clear any stored callback.
+        callbackRef.current = undefined;
+    }, []);
+    // Block actions that require authentication, or fire callback if already authenticated.
+    const requireLogin = useCallback((cb) => {
+        if (authConfig && exportsRequireAuth && !isAuthenticated) {
+            callbackRef.current = cb;
+            setOpen(true);
+        }
+        else {
+            cb?.();
+        }
+    }, [authConfig, exportsRequireAuth, isAuthenticated]);
+    return (React.createElement(LoginGuardContext.Provider, { value: { requireLogin } },
+        children,
+        React.createElement(LoginDialog, { open: open, onClose: onClose })));
+}

package/lib/styles/common/mui/typography.d.ts

@@ -1,2 +1,3 @@
 import { TypographyOwnProps } from "@mui/material";
+export declare const COLOR: Record<string, TypographyOwnProps["color"]>;
 export declare const VARIANT: Record<string, TypographyOwnProps["variant"]>;

package/lib/styles/common/mui/typography.js

@@ -1,3 +1,10 @@
+export const COLOR = {
+    INHERIT: "inherit",
+    INK_LIGHT: "ink.light",
+    INK_MAIN: "ink.main",
+};
 export const VARIANT = {
     INHERIT: "inherit",
+    TEXT_BODY_400: "text-body-400",
+    TEXT_HEADING_SMALL: "text-heading-small",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "21.3.0",
+  "version": "21.4.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/Export/components/ExportForm/components/ExportButton/exportButton.tsx

@@ -2,6 +2,7 @@ import { Tooltip } from "@mui/material";
 import React, { ElementType, ReactNode } from "react";
 import { useDownloadStatus } from "../../../../../../hooks/useDownloadStatus";
 import { useFileManifestState } from "../../../../../../hooks/useFileManifestState";
+import { useLoginGuard } from "../../../../../../providers/loginGuard/hook";
 import { ButtonPrimary } from "../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 
 export interface ExportButtonProps {
@@ -19,6 +20,10 @@ export const ExportButton = ({
   const {
     fileManifestState: { isLoading },
   } = useFileManifestState();
+
+  // Prompt user for login before export, if required.
+  const { requireLogin } = useLoginGuard();
+
   return (
     <Tooltip arrow title={isLoading ? null : downloadStatus.message}>
       <span>
@@ -26,7 +31,9 @@ export const ExportButton = ({
           disabled={
             isLoading || downloadStatus.disabled || downloadStatus.isLoading
           }
-          onClick={onClick}
+          onClick={() => {
+            requireLogin(onClick);
+          }}
         >
           <span>{children}</span>
         </Button>

package/src/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestDownload/fileManifestDownload.tsx

@@ -10,6 +10,7 @@ import React, { useRef } from "react";
 import { Filters } from "../../../../../../../../common/entities";
 import { useDownloadStatus } from "../../../../../../../../hooks/useDownloadStatus";
 import { useFileManifestDownload } from "../../../../../../../../hooks/useFileManifest/useFileManifestDownload";
+import { useLoginGuard } from "../../../../../../../../providers/loginGuard/hook";
 import { ButtonGroup } from "../../../../../../../common/ButtonGroup/buttonGroup";
 import { ButtonGroupButton } from "../../../../../../../common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton";
 import {
@@ -46,6 +47,9 @@ export const FileManifestDownload = ({
   const isInProgress = (isIdle || isLoading) && !disabled;
   const isReady = Boolean(manifestURL) || disabled;
 
+  // Prompt user for login before download and copy, if required.
+  const { requireLogin } = useLoginGuard();
+
   // Copies file manifest.
   const copyManifestURL = (url?: string): void => {
     if (!url) return;
@@ -89,15 +93,19 @@ export const FileManifestDownload = ({
                                 action="Download file manifest"
                                 disabled={disabled}
                                 label={<DownloadIconSmall />}
-                                onClick={downloadManifestURL}
+                                onClick={() =>
+                                  requireLogin(downloadManifestURL)
+                                }
                               />,
                               <ButtonGroupButton
                                 key="copy"
                                 action="Copy file manifest"
                                 disabled={disabled}
                                 label={<ContentCopyIconSmall />}
-                                onClick={(): void =>
-                                  copyManifestURL(manifestURL)
+                                onClick={() =>
+                                  requireLogin((): void =>
+                                    copyManifestURL(manifestURL)
+                                  )
                                 }
                               />,
                             ]}

package/src/components/Index/components/AzulFileDownload/azulFileDownload.tsx

@@ -1,6 +1,7 @@
 import { Box } from "@mui/material";
 import React, { Fragment, useEffect, useRef, useState } from "react";
 import { useFileLocation } from "../../../../hooks/useFileLocation";
+import { useLoginGuard } from "../../../../providers/loginGuard/hook";
 import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
 import { LoadingIcon } from "../../../common/CustomIcon/components/LoadingIcon/loadingIcon";
 import { IconButton } from "../../../common/IconButton/iconButton";
@@ -29,6 +30,9 @@ export const AzulFileDownload = ({
   const downloadRef = useRef<HTMLAnchorElement>(null);
   const [isRequestPending, setIsRequestPending] = useState(false);
 
+  // Prompt user for login before download, if required.
+  const { requireLogin } = useLoginGuard();
+
   // Initiates file download when file location request is successful.
   useEffect(() => {
     if (!fileUrl) return;
@@ -39,6 +43,13 @@ export const AzulFileDownload = ({
     setIsRequestPending(false);
   }, [fileUrl]);
 
+  // Initiates file download when download button is clicked.
+  const handleDownloadClick = (): void => {
+    setIsRequestPending(true);
+    trackFileDownloaded(entityName, relatedEntityId, relatedEntityName);
+    run();
+  };
+
   return (
     <Fragment>
       {isRequestPending ? (
@@ -54,11 +65,7 @@ export const AzulFileDownload = ({
           data-testid={AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID}
           disabled={!url}
           Icon={isLoading ? LoadingIcon : DownloadIcon}
-          onClick={(): void => {
-            setIsRequestPending(true);
-            trackFileDownloaded(entityName, relatedEntityId, relatedEntityName);
-            run();
-          }}
+          onClick={() => requireLogin(handleDownloadClick)}
           size="medium"
         />
       )}

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.tsx

@@ -78,7 +78,7 @@ export const NavigationMenu = ({
           >
             <MPaper variant="menu">
               <MClickAwayListener onClickAway={onClose}>
-                <MMenuList>
+                <MMenuList component="div">
                   <NavigationMenuItems
                     closeMenu={(): void => {
                       onClose();

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.tsx

@@ -2,9 +2,10 @@ import {
   Divider,
   ListItemIcon,
   ListItemText,
+  Link as MLink,
   MenuItem as MMenuItem,
 } from "@mui/material";
-import { useRouter } from "next/router";
+import Link from "next/link";
 import React, { Fragment, ReactNode } from "react";
 import {
   TEXT_BODY_400,
@@ -38,7 +39,6 @@ export const NavigationMenuItems = ({
   menuItems,
   pathname,
 }: NavLinkMenuProps): JSX.Element => {
-  const router = useRouter();
   return (
     <>
       {menuItems.map(
@@ -54,8 +54,9 @@ export const NavigationMenuItems = ({
             url,
           },
           i
-        ) =>
-          nestedMenuItems ? (
+        ) => {
+          const isClientSide = isClientSideNavigation(url);
+          return nestedMenuItems ? (
             <NavigationMenu
               key={i}
               closeAncestor={closeMenu}
@@ -69,18 +70,17 @@ export const NavigationMenuItems = ({
           ) : (
             <Fragment key={i}>
               <MMenuItem
+                component={isClientSide ? Link : MLink}
                 disabled={!url}
-                onClick={(): void => {
-                  closeMenu();
-                  isClientSideNavigation(url)
-                    ? router.push(url)
-                    : window.open(
-                        url,
-                        target,
-                        REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
-                      );
-                }}
+                href={url}
+                onClick={(): void => closeMenu()}
+                rel={
+                  isClientSide
+                    ? REL_ATTRIBUTE.NO_OPENER
+                    : REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+                }
                 selected={isNavigationLinkSelected(pathname, selectedPatterns)}
+                target={target}
               >
                 {icon && <ListItemIcon>{icon}</ListItemIcon>}
                 <ListItemText
@@ -100,7 +100,8 @@ export const NavigationMenuItems = ({
               </MMenuItem>
               {divider && <Divider />}
             </Fragment>
-          )
+          );
+        }
       )}
     </>
   );

package/src/components/Layout/components/Header/components/Content/components/Navigation/constants.ts

@@ -0,0 +1 @@
+export const NAVIGATION_TEST_ID = "navigation";

package/src/components/Layout/components/Header/components/Content/components/Navigation/navigation.tsx

@@ -1,5 +1,5 @@
-import { Button, Divider } from "@mui/material";
-import { useRouter } from "next/router";
+import { Button, Divider, Link as MLink } from "@mui/material";
+import Link from "next/link";
 import React, { CSSProperties, forwardRef, Fragment, ReactNode } from "react";
 import { BreakpointKey } from "../../../../../../../../hooks/useBreakpointHelper";
 import {
@@ -7,6 +7,7 @@ import {
   REL_ATTRIBUTE,
 } from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
+import { TestIdProps } from "../../../../../../../types";
 import { SelectedMatch } from "../../../../common/entities";
 import { HeaderProps } from "../../../../header";
 import { isNavigationLinkSelected } from "./common/utils";
@@ -28,7 +29,7 @@ export interface NavLinkItem {
   visible?: Partial<Record<BreakpointKey, boolean>>;
 }
 
-export interface NavigationProps {
+export interface NavigationProps extends TestIdProps {
   className?: string;
   closeAncestor?: () => void;
   headerProps?: HeaderProps;
@@ -48,12 +49,18 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
       links,
       pathname,
       style,
+      testId,
     }: NavigationProps,
     ref
   ): JSX.Element {
-    const router = useRouter();
     return (
-      <Links ref={ref} className={className} isMenuIn={isMenuIn} style={style}>
+      <Links
+        ref={ref}
+        className={className}
+        data-testid={testId}
+        isMenuIn={isMenuIn}
+        style={style}
+      >
         {links.map(
           (
             {
@@ -65,8 +72,9 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
               url,
             },
             i
-          ) =>
-            menuItems ? (
+          ) => {
+            const isClientSide = isClientSideNavigation(url);
+            return menuItems ? (
               <Fragment key={i}>
                 {isMenuIn ? (
                   <NavigationDrawer
@@ -98,17 +106,16 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
             ) : (
               <Fragment key={i}>
                 <Button
+                  component={isClientSide ? Link : MLink}
                   disabled={!url}
-                  onClick={(): void => {
-                    closeAncestor?.();
-                    isClientSideNavigation(url)
-                      ? router.push(url)
-                      : window.open(
-                          url,
-                          target,
-                          REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
-                        );
-                  }}
+                  href={url}
+                  onClick={(): void => closeAncestor?.()}
+                  rel={
+                    isClientSide
+                      ? REL_ATTRIBUTE.NO_OPENER
+                      : REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+                  }
+                  target={target}
                   variant={
                     isNavigationLinkSelected(pathname, selectedPatterns)
                       ? "activeNav"
@@ -119,7 +126,8 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
                 </Button>
                 {divider && <Divider />}
               </Fragment>
-            )
+            );
+          }
         )}
       </Links>
     );

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

@@ -21,6 +21,7 @@ import {
   renderIconButton as renderSearchIconButton,
   Search,
 } from "./components/Content/components/Actions/components/Search/search";
+import { NAVIGATION_TEST_ID } from "./components/Content/components/Navigation/constants";
 import { Navigation as DXNavigation } from "./components/Content/components/Navigation/navigation";
 import { Slogan } from "./components/Content/components/Slogan/slogan";
 import { Divider } from "./components/Content/components/Slogan/slogan.styles";
@@ -92,7 +93,11 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
           <Center>
             {/* Center navigation */}
             {isIn.isCenterNavigationIn && (
-              <DXNavigation {...navigationProps} links={navItemsC} />
+              <DXNavigation
+                {...navigationProps}
+                testId={NAVIGATION_TEST_ID}
+                links={navItemsC}
+              />
             )}
           </Center>
         </Fade>

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

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

package/src/components/Login/components/Buttons/buttons.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Button } from "../Button/button";
+import { Props } from "./types";
+
+export const Buttons = <P,>({
+  className,
+  handleLogin,
+  providers = [],
+  ...props /* Mui ButtonProps */
+}: Props<P>): JSX.Element[] => {
+  return providers?.map((provider) => (
+    <Button
+      key={provider.id}
+      className={className}
+      endIcon={"icon" in provider && provider.icon}
+      onClick={() => handleLogin(provider.id)}
+      {...props}
+    >
+      {provider.name}
+    </Button>
+  ));
+};

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

@@ -0,0 +1,9 @@
+import { ButtonProps } from "@mui/material";
+import { ClientSafeProvider } from "next-auth/react";
+import { OAuthProvider } from "../../../../config/entities";
+import { BaseComponentProps } from "../../../../theme/common/entities";
+
+export interface Props<P> extends BaseComponentProps, ButtonProps {
+  handleLogin: (providerId: string) => void;
+  providers?: ClientSafeProvider[] | OAuthProvider<P>[];
+}

package/src/components/Login/components/Section/components/Consent/consent.styles.ts

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+import { Grid2 } from "@mui/material";
+
+export const StyledGrid2 = styled(Grid2)`
+  align-items: center;
+  align-self: flex-start;
+  display: flex;
+  gap: 12px;
+
+  .MuiTypography-text-body-400 {
+    .MuiLink-root {
+      color: inherit;
+    }
+  }
+`;

package/src/components/Login/components/Section/components/Consent/consent.tsx

@@ -0,0 +1,30 @@
+import { Checkbox, Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
+import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedErrorIcon } from "../../../../../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon";
+import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { BaseComponentProps } from "../../../../../types";
+import { StyledGrid2 } from "./consent.styles";
+import { ConsentProps } from "./types";
+
+export const Consent = ({
+  children,
+  className,
+  handleConsent,
+  isDisabled,
+  isError,
+  ...props /* Mui Grid2Props */
+}: BaseComponentProps & ConsentProps): JSX.Element | null => {
+  if (isDisabled) return null;
+  return (
+    <StyledGrid2 className={className} {...props}>
+      <Checkbox
+        checkedIcon={<CheckedIcon />}
+        icon={isError ? <UncheckedErrorIcon /> : <UncheckedIcon />}
+        onChange={handleConsent}
+      />
+      <Typography variant={TEXT_BODY_400}>{children}</Typography>
+    </StyledGrid2>
+  );
+};

package/src/components/Login/components/Section/components/Consent/types.ts

@@ -0,0 +1,10 @@
+import { Grid2Props } from "@mui/material";
+import { ReactNode } from "react";
+import { UseUserConsent } from "../../../../hooks/useUserConsent/types";
+
+export interface ConsentProps
+  extends Grid2Props,
+    Pick<UseUserConsent, "handleConsent">,
+    Pick<UseUserConsent["state"], "isDisabled" | "isError"> {
+  children: ReactNode;
+}

package/src/components/Login/components/Section/components/Warning/warning.tsx

@@ -0,0 +1,24 @@
+import { Typography, TypographyProps } from "@mui/material";
+import React from "react";
+import { COLOR } from "../../../../../../styles/common/mui/typography";
+import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
+import { BaseComponentProps } from "../../../../../types";
+
+export const Warning = ({
+  children,
+  className,
+  ...props /* Mui TypographyOwnProps */
+}: BaseComponentProps & TypographyProps): JSX.Element | null => {
+  if (!children) return null;
+  return (
+    <Typography
+      className={className}
+      color={COLOR.INK_LIGHT}
+      mt={6}
+      variant={TEXT_BODY_SMALL_400}
+      {...props}
+    >
+      {children}
+    </Typography>
+  );
+};

package/src/components/Login/hooks/useUserConsent/types.ts

@@ -0,0 +1,11 @@
+import { ChangeEvent } from "react";
+
+export interface UseUserConsent {
+  handleConsent: (e: ChangeEvent<HTMLInputElement>) => void;
+  handleError: (error: boolean) => void;
+  state: {
+    isDisabled: boolean;
+    isError: boolean;
+    isValid: boolean;
+  };
+}

package/src/components/Login/hooks/useUserConsent/useUserConsent.ts

@@ -0,0 +1,32 @@
+import { ChangeEvent, useCallback, useState } from "react";
+import { useAuthenticationConfig } from "../../../../hooks/authentication/config/useAuthenticationConfig";
+import { UseUserConsent } from "./types";
+
+export const useUserConsent = (): UseUserConsent => {
+  const authConfig = useAuthenticationConfig();
+  const [isDisabled] = useState<boolean>(Boolean(!authConfig?.termsOfService));
+  const [isError, setIsError] = useState<boolean>(false);
+  const [isValid, setIsValid] = useState<boolean>(false);
+
+  const handleError = useCallback((error: boolean) => {
+    setIsError(error);
+  }, []);
+
+  const handleConsent = useCallback(
+    (changeEvent: ChangeEvent<HTMLInputElement>): void => {
+      handleError(false);
+      setIsValid(changeEvent.target.checked);
+    },
+    [handleError]
+  );
+
+  return {
+    handleConsent,
+    handleError,
+    state: {
+      isDisabled,
+      isError,
+      isValid,
+    },
+  };
+};

package/src/components/Login/hooks/useUserLogin/types.ts

@@ -0,0 +1,8 @@
+import { ProviderId } from "../../../../providers/authentication/common/types";
+import { UseUserConsent } from "../useUserConsent/types";
+
+export interface UseUserLogin
+  extends Omit<UseUserConsent, "handleError" | "state"> {
+  consentState: Pick<UseUserConsent["state"], "isDisabled" | "isError">;
+  handleLogin: (providerId: ProviderId) => void;
+}