`useLogout`

Just like useLogin(), useLogout() returns a callback that you can use to call authProvider.logout(). Use it to build a custom Logout button and use it in a custom UserMenu, like the following:

// in src/MyLayout.js
import * as React from 'react';
import { forwardRef } from 'react';
import { AppBar, Layout, UserMenu, useLogout } from 'react-admin';
import { MenuItem } from '@mui/material';
import ExitIcon from '@mui/icons-material/PowerSettingsNew';

// It's important to pass the ref to allow Material UI to manage the keyboard navigation
const MyLogoutButton = forwardRef((props, ref) => {
    const logout = useLogout();
    const handleClick = () => logout();
    return (
        <MenuItem
            onClick={handleClick}
            ref={ref}
            // It's important to pass the props to allow Material UI to manage the keyboard navigation
            {...props}
        >
            <ExitIcon /> Logout
        </MenuItem>
    );
});

const MyUserMenu = () => (
    <UserMenu>
        <MyLogoutButton />
    </UserMenu>
);

const MyAppBar = () => <AppBar userMenu={<UserMenu />} />;

const MyLayout = (props) => (
    <Layout {...props} appBar={MyAppBar} />
);

export default MyLayout;

Then pass the layout to you admin:

// in src/App.js
import * as React from "react";
import { Admin } from 'react-admin';

import MyLayout from './MyLayout';

const App = () => (
    <Admin layout={MyLayout} authProvider={authProvider}>
    ...
    </Admin>
);