How to configure app to support custom API and microsoft graph API

Question

I am currently working on React Native app that uses Azure as backend and I am having trouble to call API in azure LogicApp that requires custom scope. We have this scope in "AppRegistration/Expose an API". (https://i.stack.imgur.com/piZLp.png)

In the mobile app I ask for scopes "openid", "profile", "email", "offline_access". I need to call Microsoft Graph for user information. This is no problem as we added required permissions (User.ReadWrite.All) into AppRegistration/permissions.

• I can call what I need
• I get refresh token which I need
  But I cannot call our API due to invalid token (http 401).

So the question is, how to properly setup permissions and scopes in the AppRegistration?

What I have tried:

• Aadding required scope to mobile application

this cause my other scopes to "disappear". So in my decoded token i can see only this custom scope.
Additionaly I don't receive valid refresh token and I cannot call Microsoft Graph with access token I get.

• Not adding scope to the mobile app but adding permission to custom API into permissions. (https://i.stack.imgur.com/yrTzt.png)

this way I still couldnt call custom API
I really don't understand why the scopes I ask from mobile app are ignored and why permissions from AppRegistration are not working either when I ask for the custom scope from "Expose an API".

Answer 1

Hello @Farkaš, Eduard ml and thanks for reaching out. In order to call an additional API you will need to get an additional access/refresh token set specifically issued for the additional API/resource. I.e. You will need to request and obtain one access token/refresh token pair for MS Graph and one access token for each additional API. You cannot request scopes for multiple API/resources in one single token request.

Let us know if you need additional assistance. If the answer was helpful, please accept it and complete the quality survey so that others can find a solution.