@databiosphere/findable-ui 19.0.0 → 20.0.0

package/lib/providers/authentication/token/types.d.ts

@@ -0,0 +1,28 @@
+import { Dispatch } from "react";
+import { ProviderId } from "../common/types";
+export interface ResetStateAction {
+    payload: ResetStatePayload;
+    type: TokenActionKind.ResetState;
+}
+export type ResetStatePayload = undefined;
+export type TokenAction = ResetStateAction | UpdateTokenAction;
+export declare enum TokenActionKind {
+    ResetState = "RESET_TOKEN",
+    UpdateToken = "UPDATE_TOKEN"
+}
+export interface TokenContextProps {
+    tokenDispatch: Dispatch<TokenAction> | null;
+    tokenState: TokenState;
+}
+export interface TokenState {
+    providerId: ProviderId | undefined;
+    token: string | undefined;
+}
+export interface UpdateTokenAction {
+    payload: UpdateTokenPayload;
+    type: TokenActionKind.UpdateToken;
+}
+export interface UpdateTokenPayload {
+    providerId: ProviderId | undefined;
+    token: string | undefined;
+}

package/lib/providers/authentication/token/types.js

@@ -0,0 +1,5 @@
+export var TokenActionKind;
+(function (TokenActionKind) {
+    TokenActionKind["ResetState"] = "RESET_TOKEN";
+    TokenActionKind["UpdateToken"] = "UPDATE_TOKEN";
+})(TokenActionKind || (TokenActionKind = {}));

package/lib/providers/exploreState.js

@@ -1,5 +1,5 @@
 import React, { createContext, useEffect, useMemo, useReducer, useState, } from "react";
-import { useAuthentication } from "../hooks/useAuthentication/useAuthentication";
+import { useToken } from "../hooks/authentication/token/useToken";
 import { buildCategoryViews, buildNextFilterState, } from "../hooks/useCategoryFilter";
 import { useConfig } from "../hooks/useConfig";
 import { useURLFilterParams } from "../hooks/useURLFilterParams";
@@ -32,7 +32,7 @@ export const ExploreStateContext = createContext({
 export function ExploreStateProvider({ children, entityListType, }) {
     const { config, defaultEntityListType } = useConfig();
     const { decodedCatalogParam, decodedFeatureFlagParam, decodedFilterParam } = useURLFilterParams();
-    const { isEnabled: isAuthEnabled, token } = useAuthentication();
+    const { token } = useToken();
     const entityList = entityListType || defaultEntityListType;
     const [initializerArg] = useState(() => initReducerArguments(config, entityList, decodedFilterParam, decodedCatalogParam, decodedFeatureFlagParam));
     const [exploreState, exploreDispatch] = useReducer((s, a) => exploreReducer(s, a, {
@@ -45,13 +45,11 @@ export function ExploreStateProvider({ children, entityListType, }) {
     }, [exploreDispatch, exploreState]);
     // Reset explore response when token changes.
     useEffect(() => {
-        if (!isAuthEnabled)
-            return;
         exploreDispatch({
             payload: undefined,
             type: ExploreActionKind.ResetExploreResponse,
         });
-    }, [exploreDispatch, isAuthEnabled, token]);
+    }, [exploreDispatch, token]);
     return (React.createElement(ExploreStateContext.Provider, { value: exploreContextValue }, children));
 }
 /**

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

@@ -0,0 +1,17 @@
+import { Dispatch } from "react";
+import { AuthAction, AuthContextProps } from "../../authentication/auth/types";
+import { AuthenticationAction, AuthenticationContextProps } from "../../authentication/authentication/types";
+import { CredentialsAction, CredentialsContextProps } from "../../authentication/credentials/types";
+import { TokenAction, TokenContextProps } from "../../authentication/token/types";
+export interface SessionReducer {
+    authenticationReducer: AuthenticationContextProps;
+    authReducer: Omit<AuthContextProps, "service">;
+    credentialsReducer: CredentialsContextProps;
+    tokenReducer: TokenContextProps;
+}
+export interface SessionDispatch {
+    authDispatch: Dispatch<AuthAction> | null;
+    authenticationDispatch: Dispatch<AuthenticationAction> | null;
+    credentialsDispatch: Dispatch<CredentialsAction> | null;
+    tokenDispatch: Dispatch<TokenAction> | null;
+}

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

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

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

@@ -0,0 +1,4 @@
+import { AuthState } from "../authentication/auth/types";
+import { AuthenticationState } from "../authentication/authentication/types";
+export declare const AUTH_STATE: AuthState;
+export declare const AUTHENTICATION_STATE: AuthenticationState;

package/lib/providers/googleSignInAuthentication/constants.js

@@ -0,0 +1,12 @@
+import { DEFAULT_AUTH_STATE } from "../authentication/auth/constants";
+import { AUTH_STATUS } from "../authentication/auth/types";
+import { DEFAULT_AUTHENTICATION_STATE } from "../authentication/authentication/constants";
+import { AUTHENTICATION_STATUS, } from "../authentication/authentication/types";
+export const AUTH_STATE = {
+    ...DEFAULT_AUTH_STATE,
+    status: AUTH_STATUS.SETTLED,
+};
+export const AUTHENTICATION_STATE = {
+    ...DEFAULT_AUTHENTICATION_STATE,
+    status: AUTHENTICATION_STATUS.SETTLED,
+};

package/lib/providers/googleSignInAuthentication/hooks/useGoogleSignInService.d.ts

@@ -0,0 +1,3 @@
+import { Service } from "../../authentication/auth/types";
+import { SessionReducer } from "../common/types";
+export declare const useGoogleSignInService: (reducer: SessionReducer) => Service;

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": "20.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>;
+}