ms-identity-javascript-angular-spa-dotnetcore-webapi-roles-groups | Angular single-page application | Identity Management library

You can do that if you wish so, but in general it is not recommended. There are a number of reasons why, but here's a quick example: when granting permissions to an application (either via app permissions or delegated permissions), you should follow the "principle of least privilege" i.e. give just enough permissions to an application and not more. It is quite possible that a client app and a web API will require different scopes/permissions to do the work they need to do, but using the same app registration means that you won't be able to separate the scopes required for each.

A similar case would be where you care more about the protection of your web API than your client app. Say, you use certificates for your web API but only a client secret would do for your client app. Again, in that case, having separate app registrations would allow you to customize each according to their security needs.

Last but not least, say you have multiple client apps (a SPA, a mobile, a desktop app etc.), and a single web API, all in the same app registration. For your business logic, perhaps you need to be able to distinguish from which client app the request comes from. Although there are ways to achieve this with a single app registration, again it is much more hassle free to have separate registrations.