If possible, how to register front-end and back-end in a single application in Azure AD?

user_5361477 0
Viewed 206

I have an application stack with a React SPA frontend and an Asp.net core web-api backend. Both resources had been successfully registered in AzureAD each with its own app and the authentication and authorization processes are working fine. However, would it be possible to use the same registration for both the front and backend in AD?

When using the AD Application ID from the backend in React:

auth: {
        clientId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
        authority: "https://login.microsoftonline.com/<tenantId>",
        redirectUri: "http://localhost:3000"
    }

I get the following error:

ServerError: invalid_request: AADSTS90009: Application 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'(api://xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx) is requesting a token for itself. This scenario is supported only if resource is specified using the GUID based App Identifier.
  • I am using the MSAL library for the frontend.
msal azure-active-directory reactjs oauth-2.0 asp.net-web-api
1 Answers

Both the applications (front end and back end) need to be registered for sure in Azure AD.

As you are using client id of backend which is api to be secured , the Error is occurring. Update client-id, tenant-id, redirect URI of front end application not backend api in configuration file based on application registration in Azure AD.

Then make sure to expose an API and grant admin consent to the API with required permissions.

user_159975090
Related