CODEWITHSUNDEEP
react-admin
dul
dul

Reputation: 21

handleClick() in LogoutButton.js is not working

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

Upvotes: 2

Views: 315

Answers (1)

Raul Jerlach
Raul Jerlach

Reputation: 167

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) => { /* ... */ },
}.

Upvotes: 1

Related Questions