0

I am using msal authentication same as this example microsoft-authentication-library-for-js on login page. Once you are logged in I am redirecting to page where I have People picker component. That component code is something like down below. My front end client is React. I am using NPM package "@microsoft/mgt": "^1.3.0-preview.2" for people picker and "msal": "^1.3.0" for logging in user

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


import '@microsoft/mgt';

const PeoplePicker = props => {

      // reference to access mgt-people-picker on DOM
      const peoplePicker = useRef();

      return (
         <div>
            <mgt-msal-provider client-id={process.env.REACT_APP_DEV_AZURE_APP_CLIENT_ID} />
            <mgt-people-picker ref={peoplePicker} />
         </div>
      )

}

As I start typing People Picker is not getting any list of people from our organization AD. I checked Network tab in console, there is no network calls made as you type in this input. It's not throwing error so I assume Provider is working but it could be issue of having session or token attached to people picker though I am not completely sure How would I do that.

enter image description here

I browsed microsoft docs, github issues etc. but it didn't help either

parag patel
  • 2,933
  • 1
  • 10
  • 22

1 Answers1

0

Similar to the answer here: https://stackoverflow.com/a/62024758/13040450

Due to how react handles custom elements, they must be referenced differently. Alternatively you can use our wrapper here:

https://github.com/nmetulev/mgt-react

which will allow you to reference the component in the following way:

import { PeoplePicker } from 'mgt-react';
<PeoplePicker ></PeoplePicker >

quick note: The names of the React components are in PascalCase and do not include the Mgt prefix

Another note: mgt-react is in preview and hasn't been fully tested or documented.Check it out and keep an eye out for V1 in the future: https://github.com/nmetulev/mgt-react

Shane Weaver
  • 11
  • 2
  • If I use the people picker I mentioned, with mgt-login it works fine. Perhaps using with mgt-login gives token or session credentials to people picker behind the scene. However if I use people picker with provider and have msal login functionality, it does not work so I assume people picker is not getting token or session credentials from msal logged in user . – parag patel May 29 '20 at 17:29
  • You are correct that the people picker needs to get the access token somehow. The login component helps you authenticate, but if you are already using your own authentication, then you need to tell the people picker how to get an access token. To do that, you can use a [simple provider](https://learn.microsoft.com/en-us/graph/toolkit/providers/custom#simpleprovider) and pass a function for fetching access tokens. Make sure to also call [setState](https://learn.microsoft.com/en-us/graph/toolkit/providers/custom#manage-state) to let the component know the user is signed in. – Nikola Metulev Jun 01 '20 at 15:40