How to use Microsoft Graph Toolkit with Blazor Server

Question

There are some tutorials out there for using MGT in various other types of web app, but not for Blazor.

I have previously gotten my Blazor Server app to work correctly using AzureAD authentication and successfully retrieved data via GraphServiceClient. I would like to offer a people-picker UI component, and then discovered that Microsoft Graph Toolkit exists and includes pre-cooked UI component for people-picker and other things.

I added this code to my project based on tutorials:

// In _Host.cshtml
<script src="https://unpkg.com/@@microsoft/mgt@@3/dist/bundle/mgt-loader.js"></script>

// In Test.razor
<mgt-msal2-provider
     client-id="[redacted]"
     authority="https://login.microsoftonline.com/[redacted]"
>
<mgt-login></mgt-login>
<mgt-person class="person" person-query="me" view="fourlines" id="online" show-presence></mgt_person>
<mgt-people-picker></mgt-people-picker>

The "authority" parameter is needed as I am in a single-tenant application.

The page renders correctly and the mgt-login tag generates a button "Sign In". However:

• nothing appears for the mgt-person
• the mgt-people-picker shows an input box, but typing anything in it says "We didn't find any matches"
• the "Sign In" button goes to the standard AAD user login UI . I log in with the same user that I logged in initially to the app (as above - using AAD authentication). On first run this gave an AAD error that redirect-uri mismatched, so I added this page to the list of redirect-URIs in the application registration. After that, no errors are generated and control returns to the same page after completing the sign-in.

My question is:

• what am I missing here -- why does mgt-person show nothing, and the mgt-people-picker not reveal anything? No errors appear on the output console or on the page otherwise.
• is this a good way to include UI components for GraphAPI functionality in my app?

I am also unclear on why the mgt-login is actually necessary given that the user already logged in when they first enter the app; is it possible for these UI components to pick up the authenticated user that has already occurred via the Blazor authentication code?