1

I'm developing a React app for MS Teams where I want to read data about users from Azure AD.

To test the app I use Teams toolkit for VS Code which opens MS Teams in browser, where I'm already signed in via the account which is signed in the Team toolkit. At first I thought, that would be enough to somehow access the data, but couldn't find a solution. So I found MSAL and I'm trying to configure it.

I followed this guide and I'm stuck on useMsal hook, specifically the loginPopup(). A login window opens, asking for consent to read user data. After accepting, this error appears:

The redirect URI 'https://localhost:53000/index.html' specified in the request does not match the redirect URIs configured for the application

And that's where I got lost. I don't even know, what the redirect URI should be, considering the fact, that running the teams toolkit local debug opens a browser with teams environment, where the URL look like this: https://teams.microsoft.com/_#/apps/a9ed67de-51c7-4264-a62a-86dd48f93205/sections/timesheet?intent=2&category=16&autoNavigationOnDone=true&skipInstalledSuccess=false&filterByPersonal=false&storeLaunchFromChat=false

Thanks for any help or explanation of what the next steps should be.

By the way, my goal is only fetching the most basic data (name, email) about user logged in to MS Teams while using the app. If there's other, more simple solution than MSAL, please let me know.

Update: screenshot of redirect URIs from AAD Authentication tab. I just want to note, that I haven't added URIs manually. My guess is that these were generated automatically by TeamsToolkit or TeamsFX: enter image description here

Also I've found this file in the project... adding screenshot, because it looks like it could be useful: enter image description here

miso1655
  • 35
  • 4

1 Answers1

0

The cause of the error is the redirect uri specified in your source code is different from the uris set in Azure AD app. You can find detail info here. Your redirect uri should be set when you call msal.loginRedirect() or msal.loginPopup().

As you are using TeamsFx for developing, you can refer to sample code and guide here.

Bowen Song
  • 169
  • 2