mgt-log in component stopped working

[Banda943224]

Hi Team,

Till yesterday mgt-login component was working fine but today is not working. I am using below cdn

<script src="https://unpkg.com/@Html.Raw("@")microsoft/mgt@1.3.4/dist/bundle/mgt-loader.js">

Can you please help..

[musale]

@Banda943224 we released a new version of mgt v4 that dropped support for mgt-loader https://github.com/microsoftgraph/microsoft-graph-toolkit/releases/tag/v4.0.0 You need to use module syntax.

[Banda943224]

Can you help me with the script which has to be used. I checked the URL you have provided but unable to find the solution.

Also, Can you help me with the script for force login for mgt-login component?

Below is the code I am using but still no luck with component. I have this HTML layout under HEAD tag

 <script type="module">
                import { registerMgtComponents, Providers, Msal2Provider } from 'https://unpkg.com/@Html.Raw("@")microsoft/mgt@4';
                Providers.globalProvider = new Msal2Provider({clientId: @System.Configuration.ConfigurationManager.AppSettings["SPAClientID"]});
                registerMgtComponents();
        </script>

[gavinbarron]

Hi Team,

Till yesterday mgt-login component was working fine but today is not working. I am using below cdn

<script src="https://unpkg.com/@Html.Raw("@")microsoft/mgt@1.3.4/dist/bundle/mgt-loader.js"> Can you please help..

If you were on version 1.3.4 then there's nothing that could have changed with that script, it's locked and immutable. To me that suggests that there's something else that changed, be it in the underlying authentication services that drive the login component, the Entra App registration, or in the browser itself.

Now that you're trying to use mgt v4 in order to help you we'll need more information. How are things not working? What errors are you getting? Is the component rendering at all?

[Banda943224]

I am using below script in script module and trying to find out whether mgt-login component logged in or not. if not logged in, would like to initiate the login process.

    <script type="module">
        import { Providers, ProviderState } from "https://unpkg.com/@Html.Raw("@")microsoft/mgt-element";
        if (Providers.globalProvider.state === ProviderState.SignedIn) {
            alert('Signed In');
        } else {
            alert('Not Signed In');
        };
    </script>

can you help me with script to find out below

1. Login State
2. If not logged in, force login/initiate login through code
3. after logging in, would like to read info about the user

[gavinbarron]

So in the above you haven't instantiated and assigned a provider to the Providers.globalProvider static instance variable that's probably going to hit errors, when you try to read the state.

As a rule of thumb, in a browser application the act of initiating the sign in of the user should be taken by the user. Otherwise it can lead to the browser blocking actions as they don't appear to be triggered by the user.

That said something like this will help give you most of what you're after.

<script type="module">
  import { registerMgtComponents, Providers, Msal2Provider, ProviderState } from 'https://unpkg.com/@microsoft/mgt@4';
  Providers.globalProvider = new Msal2Provider({
    clientId: 'CLIENT_ID'
  });
  registerMgtComponents();
  const emitLoginState = async () => {
    if( Providers.globalProvider.state === ProviderState.SignedIn) {
      console.log('Signed in');
      const user = await Providers.me();
      console.log(user);
    } else if (Providers.globalProvider.state === ProviderState.Loading) {
      console.log('Loading');
    } else {
      console.log('Not signed in');
      Providers.globalProvider.login();
    }
  };
  Providers.globalProvider.onStateChanged(() => {
    emitLoginState();
  });
  emitLoginState();
</script>
<mgt-login></mgt-login>

[Banda943224]

Thanks a ton for the script.. now mgt-Login and mgt-people-picker components are working as expected. Closing the issue.