feat: create an utility component to render content only for authenti…

…cated users

Refs: SHELL-265

api-extractor/carbonio-shell-ui.api.md

@@ -24,6 +24,7 @@ import type { LinkProps } from 'react-router-dom';
 import type { ModalProps } from '@zextras/carbonio-design-system';
 import type { Properties } from 'posthog-js';
 import { default as React_2 } from 'react';
+import type { ReactNode } from 'react';
 import type { TFunction } from 'i18next';
 import type { To } from 'history';
 
@@ -326,6 +327,14 @@ export type AudioNotificationConfig = {
     sound?: string;
 };
 
+// @public (undocumented)
+export const AuthGuard: ({ children }: AuthGuardProps) => ReactNode;
+
+// @public (undocumented)
+export type AuthGuardProps = {
+    children: ReactNode;
+};
+
 // @public (undocumented)
 export type BadgeInfo = {
     show: boolean;

src/boot/app/app-direct-exports.ts

@@ -112,3 +112,6 @@ export type { AccountMenuAction } from '../../utility-bar/bar';
 export { useTracker } from '../../tracker/tracker';
 
 export { AppContextProvider } from './app-context-provider';
+
+export type { AuthGuardProps } from '../../ui-extras/auth-guard';
+export { AuthGuard } from '../../ui-extras/auth-guard';

src/ui-extras/auth-guard.test.tsx

@@ -0,0 +1,38 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react';
+
+import { AuthGuard } from './auth-guard';
+import * as accountStoreHooks from '../store/account/hooks';
+import { setup, screen } from '../tests/utils';
+
+describe('AuthGuard', () => {
+	it('should render the child component when the user is authenticated', () => {
+		const useAuthenticated = jest.spyOn(accountStoreHooks, 'useAuthenticated');
+		useAuthenticated.mockReturnValue(true);
+
+		setup(
+			<AuthGuard>
+				<p>Authenticated</p>
+			</AuthGuard>
+		);
+
+		expect(screen.getByText('Authenticated')).toBeInTheDocument();
+	});
+
+	it('should not render the child component when the user is authenticated', () => {
+		const useAuthenticated = jest.spyOn(accountStoreHooks, 'useAuthenticated');
+		useAuthenticated.mockReturnValue(false);
+
+		setup(
+			<AuthGuard>
+				<p>Authenticated</p>
+			</AuthGuard>
+		);
+
+		expect(screen.queryByText('Authenticated')).not.toBeInTheDocument();
+	});
+});

src/ui-extras/auth-guard.tsx

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import type { ReactNode } from 'react';
+import React from 'react';
+
+import { useAuthenticated } from '../store/account';
+
+export type AuthGuardProps = {
+	children: ReactNode;
+};
+
+export const AuthGuard = ({ children }: AuthGuardProps): ReactNode => {
+	const isAuthenticated = useAuthenticated();
+
+	return isAuthenticated ? <>{children}</> : null;
+};