How to make the MS Identity SPA example work for organization and personal accounts - asp.net-core

Question

I am following this link to make my own project.
My project has
Reactjs
Asp.Net Core Web Api
to access user's emails from Hotmail.The Reactjs app and WebApi live on different servers.
The example is almost what I need, but it only accepts accounts within same organization, not accepts Personal accounts.
I thought I only need to change the Tenant ID from a specific ID to "common" in related configurations and it will work.
I also registered the Supported account types on Azure for both Web Api and Reactjs to use the
AnyOrg + Personal Account
here is the config for Angular
{
"auth": {
"clientId": "28xxx12",
"authority": "https://login.microsoftonline.com/common",
"validateAuthority": true,
"redirectUri": "http://localhost:4200",
"postLogoutRedirectUri": "https://localhost:44321/signout-oidc",
"navigateToLoginRequestUrl": true
},
"cache": {
"cacheLocation": "localStorage"
},
"scopes": {
"loginRequest": [ "openid", "profile", "Mail.Read", "offline_access", "user.read"]
},
"resources": {
"todoListApi": {
"resourceUri": "https://localhost:44351/api/todolist/",
"resourceScope": "https://papayee008.onmicrosoft.com/papayee008/access_as_user"
}
}
}
here is the config for Web Api:
{
"AzureAd": {
"Instance": "https://login.microsoftonline.com/",
"Domain": "papayee008.onmicrosoft.com",
"TenantId": "common",
"ClientId": "28xxx12"
},
"https_port": 44351,
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},
"AllowedHosts": "*"
}
But when I was trying to log in with my personal account, it throws me this error:

Answer 1

The simplest solution would be the use the same app/client id for both the SPA and the API. That is, instead of making separate app registrations for each component (as is suggested in the readme), simply make one app registration where you combine the steps for Register the service app (TodoListAPI) and Register the client app (TodoListSPA) in the readme of the sample repository.
EDIT: judging by the last screenshot, it might also be the case that your changes on "supported account types" on the AAD portal haven't taken effect yet. There's usually a few seconds delay, and if you tried to login with a personal account during that time, the issue in the screenshot would be expected.