@databiosphere/findable-ui 19.0.0 → 21.0.0

package/lib/providers/googleSignInAuthentication/hooks/useGoogleSignInService.js

@@ -0,0 +1,36 @@
+import { useRouter } from "next/router";
+import { useCallback } from "react";
+import { useProviders } from "../../../hooks/authentication/providers/useProviders";
+import { service } from "../service/service";
+export const useGoogleSignInService = (reducer) => {
+    const { findProvider } = useProviders();
+    const { basePath } = useRouter();
+    const { authenticationReducer: { authenticationDispatch }, authReducer: { authDispatch }, credentialsReducer: { credentialsDispatch }, tokenReducer: { tokenDispatch }, } = reducer;
+    const onLogin = useCallback((providerId) => {
+        const provider = findProvider(providerId);
+        if (!provider)
+            return;
+        service.login(provider, {
+            authDispatch,
+            authenticationDispatch,
+            tokenDispatch,
+        });
+    }, [authDispatch, authenticationDispatch, findProvider, tokenDispatch]);
+    const onLogout = useCallback((options) => {
+        service.logout({
+            authDispatch,
+            authenticationDispatch,
+            credentialsDispatch,
+            tokenDispatch,
+        });
+        // Request page reload, ensuring that the entity detail page is re-initialized with the correct state and associated data.
+        location.href = options?.callbackUrl || basePath;
+    }, [
+        authDispatch,
+        authenticationDispatch,
+        basePath,
+        credentialsDispatch,
+        tokenDispatch,
+    ]);
+    return { requestLogin: onLogin, requestLogout: onLogout };
+};

package/lib/providers/googleSignInAuthentication/profile/types.d.ts

@@ -0,0 +1,14 @@
+export interface GoogleProfile {
+    email: string;
+    email_verified: boolean;
+    family_name: string;
+    given_name: string;
+    hd: string;
+    locale: string;
+    name: string;
+    picture: string;
+    sub: string;
+}
+export interface TokenSetParameters {
+    access_token: string;
+}

package/lib/providers/googleSignInAuthentication/profile/types.js

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

package/lib/providers/googleSignInAuthentication/profile/utils.d.ts

@@ -0,0 +1,8 @@
+import { UserProfile } from "../../authentication/authentication/types";
+import { GoogleProfile } from "./types";
+/**
+ * Returns user profile from google response.
+ * @param profile - Google response.
+ * @returns user profile.
+ */
+export declare function mapProfile(profile: GoogleProfile): UserProfile;

package/lib/providers/googleSignInAuthentication/profile/utils.js

@@ -0,0 +1,25 @@
+import { GOOGLE_SIGN_IN_PROVIDER_ID } from "../service/constants";
+/**
+ * Returns full name, from given and family name.
+ * @param profile - Google response.
+ * @returns full name.
+ */
+function getFullName(profile) {
+    const { family_name: lastName = "", given_name: firstName = "" } = profile;
+    return `${firstName} ${lastName}`.trim();
+}
+/**
+ * Returns user profile from google response.
+ * @param profile - Google response.
+ * @returns user profile.
+ */
+export function mapProfile(profile) {
+    const { email, picture: image } = profile;
+    const name = getFullName(profile);
+    return {
+        email,
+        id: GOOGLE_SIGN_IN_PROVIDER_ID,
+        image,
+        name,
+    };
+}

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

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

package/lib/providers/googleSignInAuthentication/provider.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { SessionController as DefaultSessionController } from "../../components/Authentication/components/SessionController/components/GoogleSessionController/SessionController";
+import { useAuthReducer } from "../../hooks/authentication/auth/useAuthReducer";
+import { useAuthenticationReducer } from "../../hooks/authentication/authentication/useAuthenticationReducer";
+import { useCredentialsReducer } from "../../hooks/authentication/credentials/useCredentialsReducer";
+import { useSessionActive } from "../../hooks/authentication/session/useSessionActive";
+import { useSessionCallbackUrl } from "../../hooks/authentication/session/useSessionCallbackUrl";
+import { useSessionIdleTimer } from "../../hooks/authentication/session/useSessionIdleTimer";
+import { useTokenReducer } from "../../hooks/authentication/token/useTokenReducer";
+import { AuthContext } from "../authentication/auth/context";
+import { AuthenticationContext } from "../authentication/authentication/context";
+import { CredentialsContext } from "../authentication/credentials/context";
+import { AUTH_STATE, AUTHENTICATION_STATE } from "./constants";
+import { useGoogleSignInService } from "./hooks/useGoogleSignInService";
+export function GoogleSignInAuthenticationProvider({ children, SessionController = DefaultSessionController, timeout, }) {
+    const authReducer = useAuthReducer(AUTH_STATE);
+    const authenticationReducer = useAuthenticationReducer(AUTHENTICATION_STATE);
+    const credentialsReducer = useCredentialsReducer();
+    const tokenReducer = useTokenReducer(); // Reducer, local to Google Sign-In process only.
+    const service = useGoogleSignInService({
+        authReducer,
+        authenticationReducer,
+        credentialsReducer,
+        tokenReducer,
+    });
+    const { callbackUrl } = useSessionCallbackUrl();
+    const { authDispatch, authState } = authReducer;
+    const { isAuthenticated } = authState;
+    const { authenticationState } = authenticationReducer;
+    useSessionActive(authState, authenticationState);
+    useSessionIdleTimer({
+        disabled: !isAuthenticated,
+        onIdle: () => service.requestLogout({ callbackUrl }),
+        timeout,
+    });
+    return (React.createElement(CredentialsContext.Provider, { value: credentialsReducer },
+        React.createElement(AuthenticationContext.Provider, { value: authenticationReducer },
+            React.createElement(AuthContext.Provider, { value: { authDispatch, authState, service } },
+                React.createElement(SessionController, { token: tokenReducer.tokenState.token }, children)))));
+}

package/lib/providers/googleSignInAuthentication/service/constants.d.ts

@@ -0,0 +1,4 @@
+import { OAuthProvider } from "../../../config/entities";
+import { GoogleProfile } from "../profile/types";
+export declare const GOOGLE_SIGN_IN_PROVIDER_ID = "google";
+export declare const GOOGLE_SIGN_IN_PROVIDER: Pick<OAuthProvider<GoogleProfile>, "icon" | "id" | "name" | "profile">;

package/lib/providers/googleSignInAuthentication/service/constants.js

@@ -0,0 +1,9 @@
+import { GoogleIcon } from "../../../components/common/CustomIcon/components/GoogleIcon/googleIcon";
+import { mapProfile } from "../profile/utils";
+export const GOOGLE_SIGN_IN_PROVIDER_ID = "google";
+export const GOOGLE_SIGN_IN_PROVIDER = {
+    icon: GoogleIcon({}),
+    id: GOOGLE_SIGN_IN_PROVIDER_ID,
+    name: "Google",
+    profile: mapProfile,
+};

package/lib/providers/googleSignInAuthentication/service/service.d.ts

@@ -0,0 +1,6 @@
+import { OAuthProvider } from "../../../config/entities";
+import { SessionDispatch } from "../common/types";
+export declare const service: {
+    login: (provider: OAuthProvider, dispatch: Pick<SessionDispatch, "authDispatch" | "authenticationDispatch" | "tokenDispatch">) => void;
+    logout: (dispatch: SessionDispatch) => void;
+};

package/lib/providers/googleSignInAuthentication/service/service.js

@@ -0,0 +1,43 @@
+import { requestAuth, resetState } from "../../authentication/auth/dispatch";
+import { requestAuthentication, resetState as resetAuthenticationState, updateAuthentication, } from "../../authentication/authentication/dispatch";
+import { AUTHENTICATION_STATUS } from "../../authentication/authentication/types";
+import { fetchProfile } from "../../authentication/authentication/utils";
+import { resetState as resetCredentialsState } from "../../authentication/credentials/dispatch";
+import { getAuthenticationRequestOptions } from "../../authentication/terra/hooks/common/utils";
+import { resetState as resetTokenState, updateToken, } from "../../authentication/token/dispatch";
+export const service = {
+    login: (provider, dispatch) => {
+        const client = google.accounts.oauth2.initTokenClient({
+            callback: (response) => {
+                const { id, profile, userinfo } = provider;
+                const { access_token: token } = response;
+                dispatch.authDispatch?.(requestAuth());
+                dispatch.authenticationDispatch?.(requestAuthentication());
+                dispatch.tokenDispatch?.(updateToken({ providerId: id, token }));
+                fetchProfile(userinfo, getAuthenticationRequestOptions(token), {
+                    onError: () => {
+                        dispatch.authDispatch?.(resetState());
+                        dispatch.authenticationDispatch?.(updateAuthentication({
+                            profile: undefined,
+                            status: AUTHENTICATION_STATUS.SETTLED,
+                        }));
+                        dispatch.tokenDispatch?.(resetTokenState());
+                    },
+                    onSuccess: (r) => dispatch.authenticationDispatch?.(updateAuthentication({
+                        profile: profile(r),
+                        status: AUTHENTICATION_STATUS.PENDING, // Authentication is pending until session controller is resolved.
+                    })),
+                });
+            },
+            client_id: provider.clientId,
+            scope: provider.authorization.params.scope,
+        });
+        client.requestAccessToken();
+    },
+    logout: (dispatch) => {
+        dispatch.authDispatch?.(resetState());
+        dispatch.authenticationDispatch?.(resetAuthenticationState());
+        dispatch.credentialsDispatch?.(resetCredentialsState());
+        dispatch.tokenDispatch?.(resetTokenState());
+    },
+};

package/lib/providers/googleSignInAuthentication/types.d.ts

@@ -0,0 +1,6 @@
+import { ElementType, ReactNode } from "react";
+export interface GoogleSignInAuthenticationProviderProps {
+    children: ReactNode | ReactNode[];
+    SessionController?: ElementType;
+    timeout?: number;
+}

package/lib/providers/googleSignInAuthentication/types.js

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

package/lib/providers/nextAuthAuthentication/hooks/useNextAuthService.d.ts

@@ -0,0 +1,2 @@
+import { Service } from "../../authentication/auth/types";
+export declare const useNextAuthService: () => Service;

package/lib/providers/nextAuthAuthentication/hooks/useNextAuthService.js

@@ -0,0 +1,14 @@
+import { useCallback } from "react";
+import { transformRoute } from "../../../hooks/authentication/session/useSessionActive";
+import { useRouteHistory } from "../../../hooks/useRouteHistory";
+import { service } from "../service/service";
+export const useNextAuthService = () => {
+    const { callbackUrl } = useRouteHistory(2);
+    const onLogin = useCallback((providerId) => {
+        service.login(providerId, { callbackUrl: callbackUrl(transformRoute) });
+    }, [callbackUrl]);
+    const onLogout = useCallback((options) => {
+        service.logout(options);
+    }, []);
+    return { requestLogin: onLogin, requestLogout: onLogout };
+};

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

@@ -0,0 +1,2 @@
+import { NextAuthAuthenticationProviderProps } from "./types";
+export declare function NextAuthAuthenticationProvider({ children, refetchInterval, session, timeout, }: NextAuthAuthenticationProviderProps): JSX.Element;

package/lib/providers/nextAuthAuthentication/provider.js

@@ -0,0 +1,30 @@
+import { SessionProvider } from "next-auth/react";
+import React from "react";
+import { SessionController } from "../../components/Authentication/components/SessionController/components/NextSessionController/SessionController";
+import { useAuthReducer } from "../../hooks/authentication/auth/useAuthReducer";
+import { useAuthenticationReducer } from "../../hooks/authentication/authentication/useAuthenticationReducer";
+import { useSessionCallbackUrl } from "../../hooks/authentication/session/useSessionCallbackUrl";
+import { useSessionIdleTimer } from "../../hooks/authentication/session/useSessionIdleTimer";
+import { AuthContext } from "../authentication/auth/context";
+import { AuthenticationContext } from "../authentication/authentication/context";
+import { useNextAuthService } from "./hooks/useNextAuthService";
+export function NextAuthAuthenticationProvider({ children, refetchInterval = 0, session, timeout, }) {
+    const authReducer = useAuthReducer();
+    const authenticationReducer = useAuthenticationReducer();
+    const service = useNextAuthService();
+    const { authDispatch, authState } = authReducer;
+    const { isAuthenticated } = authState;
+    const { callbackUrl } = useSessionCallbackUrl();
+    useSessionIdleTimer({
+        crossTab: true,
+        disabled: !isAuthenticated,
+        onIdle: () => {
+            service.requestLogout({ callbackUrl, redirect: true });
+        },
+        timeout,
+    });
+    return (React.createElement(SessionProvider, { session: session, refetchInterval: refetchInterval / 1000 },
+        React.createElement(AuthenticationContext.Provider, { value: authenticationReducer },
+            React.createElement(AuthContext.Provider, { value: { authDispatch, authState, service } },
+                React.createElement(SessionController, null, children)))));
+}

package/lib/providers/nextAuthAuthentication/service/service.d.ts

@@ -0,0 +1,6 @@
+import { SignInOptions, SignOutParams } from "next-auth/react";
+import { ProviderId } from "../../authentication/common/types";
+export declare const service: {
+    login: (providerId: ProviderId, options?: SignInOptions) => void;
+    logout: (options?: SignOutParams<boolean>) => void;
+};

package/lib/providers/nextAuthAuthentication/service/service.js

@@ -0,0 +1,12 @@
+import { signIn, signOut } from "next-auth/react";
+export const service = {
+    login: (providerId, options) => {
+        signIn(providerId, options).catch((e) => console.error(e));
+    },
+    logout: (options) => {
+        signOut({
+            callbackUrl: options?.callbackUrl,
+            redirect: options?.redirect || false,
+        }).catch((e) => console.error(e));
+    },
+};

package/lib/providers/nextAuthAuthentication/types.d.ts

@@ -0,0 +1,8 @@
+import { Session } from "next-auth";
+import { ReactNode } from "react";
+export interface NextAuthAuthenticationProviderProps {
+    children: ReactNode | ReactNode[];
+    refetchInterval?: number;
+    session?: Session | null;
+    timeout?: number;
+}

package/lib/providers/nextAuthAuthentication/types.js

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

package/lib/routes/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const ROUTE: {
+    LOGIN: string;
+};

package/lib/routes/constants.js

@@ -0,0 +1,3 @@
+export const ROUTE = {
+    LOGIN: "/login",
+};

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

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

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

@@ -0,0 +1,17 @@
+export const COLOR = {
+    ERROR: "error",
+    INFO: "info",
+    INHERIT: "inherit",
+    PRIMARY: "primary",
+    SECONDARY: "secondary",
+    SUCCESS: "success",
+    WARNING: "warning",
+};
+export const VARIANT = {
+    ACTIVE_NAV: "activeNav",
+    BACK_NAV: "backNav",
+    CONTAINED: "contained",
+    NAV: "nav",
+    OUTLINED: "outlined",
+    TEXT: "text",
+};

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

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

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

@@ -0,0 +1,9 @@
+export const VARIANT = {
+    ELEVATION: "elevation",
+    FOOTER: "footer",
+    MENU: "menu",
+    OUTLINED: "outlined",
+    PANEL: "panel",
+    SEARCH_BAR: "searchbar",
+    TABLE: "table",
+};

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

@@ -0,0 +1,3 @@
+import { PopoverOrigin } from "@mui/material";
+export declare const POPOVER_ORIGIN_HORIZONTAL: Record<string, PopoverOrigin["horizontal"]>;
+export declare const POPOVER_ORIGIN_VERTICAL: Record<string, PopoverOrigin["vertical"]>;

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

@@ -0,0 +1,10 @@
+export const POPOVER_ORIGIN_HORIZONTAL = {
+    CENTER: "center",
+    LEFT: "left",
+    RIGHT: "right",
+};
+export const POPOVER_ORIGIN_VERTICAL = {
+    BOTTOM: "bottom",
+    CENTER: "center",
+    TOP: "top",
+};

package/lib/theme/common/entities.d.ts

@@ -0,0 +1,6 @@
+export interface BaseComponentProps {
+    className?: string;
+}
+export interface TrackingComponentProps {
+    trackingId?: string;
+}

package/lib/theme/common/entities.js

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

package/lib/views/LoginView/loginView.d.ts

@@ -1 +1,5 @@
-export declare const LoginView: () => JSX.Element;
+import { ClientSafeProvider } from "next-auth/react";
+export interface LoginViewProps {
+    providers?: ClientSafeProvider[];
+}
+export declare const LoginView: ({ providers, }: LoginViewProps) => JSX.Element | null;

package/lib/views/LoginView/loginView.js

@@ -1,7 +1,9 @@
 import React from "react";
 import { Login } from "../../components/Login/login";
-import { useAuthenticationConfig } from "../../hooks/useAuthenticationConfig";
-export const LoginView = () => {
-    const { googleGISAuthConfig, termsOfService, text, title, warning } = useAuthenticationConfig();
-    return (React.createElement(Login, { isGoogle: !!googleGISAuthConfig, termsOfService: termsOfService, text: text, title: title, warning: warning }));
+import { useAuthenticationConfig } from "../../hooks/authentication/config/useAuthenticationConfig";
+export const LoginView = ({ providers, }) => {
+    const authConfig = useAuthenticationConfig();
+    if (!authConfig)
+        return null;
+    return (React.createElement(Login, { providers: providers || authConfig.providers, termsOfService: authConfig.termsOfService, text: authConfig.text, title: authConfig.title, warning: authConfig.warning }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "19.0.0",
+  "version": "21.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
@@ -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"

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

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

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

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,