I am challenged by a SPFx based solution (WebPart as well as Commandbar-Extension). I have a set of APIs which are secured by OAuth. There is a dedicated authentication server, so I can't just use AAD to grab a token, but instead I have to access this authentication server.

So my challenge is: how can I provide a solution for an unknown amount of customers running not known SharePoint-tenants, while using OAuth? Since SPFx is a single-page-application-style solution I will have to provide a return-uri to the authentication server. And this return-uri has to be known by the authentication-server to be validated. But since I don't know who's going to use the application - I would need to allow all return-uris to *.sharepoint.com?

So my question is: there must be someone out there, who had the same problem. How would be a way to solve this challenge?

  • how are these unknown users going to authenticate to the authentication server? will they have login credentials? or, are you using client credential flow? Dec 2, 2022 at 17:22
  • Currently I'm using a code flow with pkce. I'm using MSAL with "LoginPopup" so the user is prompted to fill in their credentials. But I need to provide a return-uri with in case of MSAL has to be the same host as my sharepoint tenant, because otherwise the browser will prevent communicating from the parent window to the popup window.
    – nyn3x
    Dec 3, 2022 at 19:00

1 Answer 1


You can call third party API protected through Azure Ad using following given approach.

  1. Declare permission requests in SharePoint Framework projects
  • To request a permission when a SharePoint Framework package is deployed to the App Catalog, add it to the webApiPermissionRequests array in the package-solution.json
// package-solution.json
  "solution": {
    "name": "sp-fx-aad-http-client-side-solution",
    "id": "dfb230b7-4f61-431f-9b65-a34e83922663",
    "version": "",
    "includeClientSideAssets": true,
    "isDomainIsolated": false,
    "webApiPermissionRequests": [
        "resource": "Microsoft Graph",
        "scope": "User.ReadBasic.All"
  "paths": {
    "zippedPackage": "solution/sp-fx-aad-http.sppkg"
  1. Grant the permission to app from SharePoint admin portal.

  2. Use the SharePoint Framework Azure AD HTTP client

  • The SharePoint Framework API simplifies the access token acquisition from SharePoint Online and Azure AD. The API uses the token to configure a special instance of the HttpClient, known as the AadHttpClient, you'll use to submit the request.
  1. Use below sample of code to call the third party api.
import {
} from '@microsoft/sp-http';

// Promises
  .then((aadClient: AadHttpClient) => {
    /* submit request to endpoint */

// Async/await
const aadClient: AadHttpClient = await this.context.aadHttpClientFactory

// Promises
const endpoint: string = 'https://your-endpoint-uri/api';
aadClient.get(endpoint, AadHttpClient.configurations.v1)
  .then((rawResponse: HttpClientResponse) => {
    return rawResponse.json();
  .then((jsonResponse: any) => {
    // work with result

// Async/await
const endpoint: string = 'https://your-endpoint-uri/api';
const rawResponse: HttpClientResponse = await aadClient.get(endpoint, AadHttpClient.configurations.v1);

const responseJson = await rawResponse.json();
return responseJson as any;


  • Just be aware if this is not an Isolated SPFx app, when you grant Graph API permissions, you're granting it for all apps, including the potential of user inserted JS on a page that calls the Graph API. So take care when granting an elevated right (such as User.ReadWrite.All). Usually for those solutions I'll have an Az Function as a middle tier where the Function has the appropriate rights, and lock the Function to be called only by the particular SPFx app.
    – user6024
    Dec 3, 2022 at 17:43
  • @rajat: my API is not protected by AAD but instead I have my "own" authentication server which implements the OAuth protocol. But interesseting question: how is for example AAD dealing with this? I mean, I can supply any sharepoint site as a valid return-uri - how are they dealing with this? Do they just allow any uri as the return-uri?
    – nyn3x
    Dec 3, 2022 at 19:02
  • Provide root url of SharePoint in return uri. Dec 4, 2022 at 7:00
  • @RajatSahani: I'm already doing this, but this still leads to https://customera.sharepoint.com as well as https://foo.sharepoint.com and https://bar.sharepoint.com ... So I would need to register all possible tenants. Just if we would consider I would be using AAD to secure my API access ... I would run into the same problem. And I can't use https://*.sharepoint.com as wildcards are not allowed in the return-uri in the app-registration.
    – nyn3x
    Dec 7, 2022 at 6:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.