Microsoft Graph toolkit component mgt-login event is not called in React App with hooks

Question

I have implemented mgt-login component from Microsoft Graph toolkit, it is working fine but it's not calling event I added to mgt-login within useEffect. Duplicate question here - I did follow this question but still its not calling event I added. Here is code for that component

import React, {
  useRef,
  useEffect,
} from 'react';


const Login = () => {
  const loginComponent = useRef(null);

  useEffect(() => {
    loginComponent.current.addEventListener('loginCompleted', () => console.log('Logged in!'));
  }, []);


  return (
    <div className="login">
      <mgt-login ref={loginComponent} />
    </div>
  );
};

Here is how instantiate Provider in main index.jsx file of app

import { Providers, MsalProvider } from '@microsoft/mgt';

Providers.globalProvider = new MsalProvider({
  clientId: process.env.REACT_APP_DEV_AZURE_APP_CLIENT_ID,
});

I don't know what I am missing, not sure if something was updated about this component(BTW, I have not found any change in microsoft graph docs).

Thanks!

Answer 1

To make the use of mgt components in React easier, we created a React wrapper that you can use here, mgt-react.

import React, {
  useRef,
  useEffect,
} from 'react';

import {Login} from '@microsoft/mgt-react';


const Login = () => {

  return (
    <div className="login">
      <Login loginCompleted={(e) => console.log('Logged in')} />
    </div>
  );
};