Fix Hide <Logout /> button if irrelevant.

packages/ra-ui-materialui/src/auth/Logout.spec.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { UserAuthenticated, UserUnauthenticated } from './Logout.stories';
+
+it('should display logout button if the auth succeeds', async () => {
+    render(<UserAuthenticated />);
+
+    await waitFor(() => {
+        const logoutButton = screen.queryByText(
+            'ra.auth.logout'
+        ) as HTMLInputElement;
+        expect(logoutButton).not.toBeNull();
+    });
+});
+
+it('should not display logout button if the auth fails', async () => {
+    render(<UserUnauthenticated />);
+
+    await waitFor(() => {
+        const logoutButton = screen.queryByText(
+            'ra.auth.logout'
+        ) as HTMLInputElement;
+        expect(logoutButton).toBeNull();
+    });
+});

packages/ra-ui-materialui/src/auth/Logout.stories.tsx

@@ -0,0 +1,29 @@
+import { Typography } from '@mui/material';
+import * as React from 'react';
+import { AdminContext } from '../AdminContext';
+import { Logout } from './Logout';
+
+export default { title: 'ra-ui-materialui/auth/Logout' };
+
+const MinimalAdmin = (props: { authenticated: boolean }) => {
+    const authProvider = {
+        login: () => Promise.resolve(),
+        logout: () => Promise.resolve(),
+        checkAuth: () =>
+            props.authenticated ? Promise.resolve() : Promise.reject(),
+        checkError: () => Promise.resolve(),
+        getPermissions: () => Promise.resolve(),
+    };
+    return (
+        <AdminContext authProvider={authProvider}>
+            <Typography variant="h6">
+                Should {props.authenticated ? '' : 'not '}display logout button
+            </Typography>
+            <Logout />
+        </AdminContext>
+    );
+};
+
+export const UserAuthenticated = () => <MinimalAdmin authenticated={true} />;
+
+export const UserUnauthenticated = () => <MinimalAdmin authenticated={false} />;

packages/ra-ui-materialui/src/auth/Logout.tsx

@@ -12,7 +12,7 @@ import { MenuItemProps } from '@mui/material/MenuItem';
 
 import ExitIcon from '@mui/icons-material/PowerSettingsNew';
 import clsx from 'clsx';
-import { useTranslate, useLogout } from 'ra-core';
+import { useTranslate, useLogout, useAuthState } from 'ra-core';
 
 /**
  * Logout button component, to be passed to the Admin component
@@ -24,6 +24,7 @@ export const Logout: FunctionComponent<
 > = React.forwardRef(function Logout(props, ref) {
     const { className, redirectTo, icon, ...rest } = props;
 
+    const { authenticated } = useAuthState();
     const isXSmall = useMediaQuery((theme: Theme) =>
         theme.breakpoints.down('sm')
     );
@@ -34,6 +35,9 @@ export const Logout: FunctionComponent<
         redirectTo,
         logout,
     ]);
+
+    if (!authenticated) return null;
+
     return (
         <StyledMenuItem
             className={clsx('logout', className)}