BrowserAuthError when using mgt-login webcomponent for SSO

Question

I have created a React Application to test Single Sign-On for a MS Azure Active Directory registered app. The app uses the Microsoft Graph Toolkit's login webcomponent. It expects the user to login from the "/login" directory and be redirected to "/endeavor/dashboard", if login is succesful. I was able to enter my login credentials once, however, the app never redirected to "/endeavor/dashboard", nor did the icon change to indicate a logged in status. Now I am receiving the error below, when attempting to signin again. Does the webcomponent require a redirect property, or is there something else I have missed? Note: I am using Ngrok to make my local port 3000 available to MSAL.

Screenshot:

Code Snippet:

export default function Home() {  
  
  return (  
    <div>  
      <h1>Home Page</h1>  
      <mgt-msal2-provider   
        client-id="AppClientId"  
      />  
    <mgt-login />  
    </div>  
  );  
};  

Answer 1

Hi onyLockhart-6243

First of all I would like to know have you followed the steps mentioned in mgt-reactdocs to install required package?

if yes then follow the below steps

As mentioned in doc for component people , the mgt-person component is available as Person , you need to import people - ]3

In the same way if you want to use login , you need to import login in the page you want to use
import { login } from '@microsoft/mgt-react';