handleClick() in LogoutButton.js is not working - react-admin

Question

I've integrated MSAL.js 2.0 with react-admin in order to use Azure Active Directory as Auth Provider. Based on react-admin Auth providers samples and links (https://github.com/victorp13/react-admin-msal) I've implemented login. Works great, my react-admin frontend is correctly protected.
But I cannot succeeded to implement logout. If I follow react-admin documentation (https://marmelab.com/react-admin/Authentication.html#uselogout-hook), my LogoutButton.js code is ignored.
Index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { PublicClientApplication, InteractionType } from "#azure/msal-browser";
import { MsalProvider, MsalAuthenticationTemplate } from "#azure/msal-react";
import { msalConfig } from "./authConfig";
const msalInstance = new PublicClientApplication(msalConfig);
ReactDOM.render(
<React.StrictMode>
<MsalProvider instance={msalInstance}>
<MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
<App />
</MsalAuthenticationTemplate>
</MsalProvider>
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();
App.js
import * as React from "react";
import { Admin, Resource, ListGuesser, fetchUtils } from "react-admin";
import dataProvider from "./dataProvider";
import LogoutButton from './LogoutButton';
const App = () => (
<Admin dataProvider={dataProvider} logoutButton={LogoutButton}>
<Resource name="users" list={ListGuesser} />
</Admin>
);
export default App;
LogoutButton.js
import * as React from 'react';
import { forwardRef } from 'react';
import { useLogout } from 'react-admin';
import MenuItem from '#material-ui/core/MenuItem';
import ExitIcon from '#material-ui/icons/PowerSettingsNew';
import { PublicClientApplication } from "#azure/msal-browser";
import { msalConfig } from "./authConfig";
const LogoutButton = forwardRef((props, ref) => {
const logout = useLogout();
const handleClick = () => {
console.log('Logout button never clicked!');
const msalInstance = new PublicClientApplication(msalConfig);
msalInstance.logoutRedirect();
logout();
};
return (
<MenuItem
onClick={handleClick}
ref={ref}
>
<ExitIcon /> Disconnect
</MenuItem>
);
});
export default LogoutButton;
Any ideas to help? Thanks!
Regards

Answer 1

You need to use an authProvider in order to properly use the auth functions given by react-admin. If you can share your console errors when clicking, I think I could have more insight. Still, first thing I would do is override the logout function from the authProvider , the following is the interface for writing your own. What you want to do is take out all the logic from your handleClick function, and only leave the logout() callback. Then the msal logic, you want to put it inside logout, something like this.
import { AuthProvider } from 'react-admin';
const authProvider = {
// authentication
login: ({ username, password }) => { /* ... */ },
checkError: (error) => { /* ... */ },
checkAuth: () => { /* ... */ },
logout: () => {
console.log('Logout button never clicked!');
const msalInstance = new PublicClientApplication(msalConfig);
msalInstance.logoutRedirect();
},
getIdentity: () => { /* ... */ },
// authorization
getPermissions: (params) => { /* ... */ },
}.