MS Graph toolkit components with app-auth?

Question

I am just starting on the MS Graph toolkit and had few questions. I am trying to build a simple page which would do app-auth with Azure and then have the user search component available to the user. I don't want the user to sign in and do any authentication. For this I understand that we can use custom provider (and using MSAL provider would require the user to sign in). I already have an app registered with client creds and was trying to find examples of how to use custom provider in the script so that the page signs as app. Every example I could find was to use the MSAL provider, is there any example on how to use the custom provider? I am able to get the token with User.read.All permissions via the app client creds.

Thanks, B

Have SPA with client creds via app using app auth and not user auth & use the graph toolkit.

Answer 1

Was able to solve this using as below:

 import {
  Providers,
  SimpleProvider,
  ProviderState,
} from "@microsoft/mgt-element";
import Persons from "./components/Persons";
import { Switch } from "antd";
import "./App.css";
import PeoplePickerCmp from "./components/PeoplePickerCmp";
import * as MicrosoftGraph from "@microsoft/microsoft-graph-types";
import { MgtPerson } from "@microsoft/mgt-components";
import {
  Agenda,
  FileList,
  Get,
  MgtTemplateProps,
  Person,
  PersonCard,
  PersonViewType,
  TeamsChannelPicker,
} from "@microsoft/mgt-react";
import { useRef, useState } from "react";

 

Providers.globalProvider = new SimpleProvider(
  (_scopes: string[]): Promise<string> => {
    return new Promise((resolve) => {
      resolve("<Put Token Here>"
      );
    });
  }
);

 

Providers.globalProvider.setState(ProviderState.SignedIn);

 

function App() {
  const [theme, setTheme] = useState(false);

 

  const handleTemplateRendered = (e: Event) => {
    console.log("Event Rendered: ", e);
  };

 

  const MyTemplate = (props: MgtTemplateProps) => {
    const me = props.dataContext as MicrosoftGraph.User;
    return <div>hello {me.displayName}</div>;
  };

 

  const MyEvent = (props: MgtTemplateProps) => {
    const { event } = props.dataContext as { event: MicrosoftGraph.Event };
    return <div>{event.subject}</div>;
  };

 

  const MyMessage = (props: MgtTemplateProps) => {
    const message = props.dataContext as MicrosoftGraph.Message;

 

    const personRef = useRef<MgtPerson>();

 

    const handlePersonClick = () => {
      console.log(personRef.current);
    };

 

    return (
      <div>
        <b>Subject:</b>
        {message.subject}
        <div>
          <b>From:</b>
          <Person
            ref={personRef}
            onClick={handlePersonClick}
            personQuery={message.from?.emailAddress?.address || ""}
            fallbackDetails={{
              mail: message.from?.emailAddress?.address,
              displayName: message.from?.emailAddress?.name,
            }}
            view={PersonViewType.oneline}
          ></Person>
        </div>
      </div>
    );
  };

 

  return (
    <div
      className="rootcls"
      style={{ background: theme ? "#45657d" : "#f7f7f7" }}
    >
      <div style={{ float: "right", margin: "10px" }}>
        <span style={{ marginRight: "10px" }}>{theme ? "Dark" : "Light"}</span>
        <Switch
          defaultChecked
          onChange={() => {
            setTheme(!theme);
          }}
        />
      </div>
      <div className="App">
        <div className="person-cls">
          <Persons />
        </div>

 

        <div className="people-picker-cls">
          <PeoplePickerCmp />
        </div>

 

        <div className="people-picker-cls">
          <PersonCard
            //showPresence={true}
            isExpanded={true}
            userId="[email protected]"
          />
        </div>

 

        <Agenda groupByDay templateRendered={handleTemplateRendered}>
          <MyEvent template="event" />
        </Agenda>

 

        <Get resource="/me">
          <MyTemplate />
        </Get>

 

        <Get resource="/me/messages" scopes={["mail.read"]} maxPages={2}>
          <MyMessage template="value" />
        </Get>

 

        <TeamsChannelPicker />
      </div>
    </div>
  );
}

 

export default App;