AAD Login in ASPNET Core 2.2 Web Api + React js

[bobo8488]

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [X] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

The issue was found for the following scenario:

Please add an 'x' for the scenario(s) where you found an issue

1. Web app that signs in users
   1. [x] with a work and school account in your organization: 1-WebApp-OIDC/1-1-MyOrg
   2. [ ] with any work and school account: /1-WebApp-OIDC/1-2-AnyOrg
   3. [ ] with any work or school account or Microsoft personal account: 1-WebApp-OIDC/1-3-AnyOrgOrPersonal
   4. [ ] with users in National or sovereign clouds 1-WebApp-OIDC/1-4-Sovereign
   5. [ ] with B2C users 1-WebApp-OIDC/1-5-B2C
2. Web app that calls Microsoft Graph
   1. [X] Calling graph with the Microsoft Graph SDK: 2-WebApp-graph-user/2-1-Call-MSGraph
   2. [ ] With specific token caches: 2-WebApp-graph-user/2-2-TokenCache
   3. [ ] Calling Microsoft Graph in national clouds: 2-WebApp-graph-user/2-4-Sovereign-Call-MSGraph
3. [ ] Web app calling several APIs 3-WebApp-multi-APIs
4. [ ] Web app calling your own Web API 4-WebApp-your-API
5. Web app restricting users
   1. [ ] by Roles: 5-WebApp-AuthZ/5-1-Roles
   2. [ ] by Groups: 5-WebApp-AuthZ/5-2-Groups
6. [ ] Deployment to Azure
7. [ ] Other (please describe)

Repro-ing the issue

Repro steps

1. Create a scratch reactjs + .net core 2.2 web app from visual studio scaffolding template
2. Create you own logic without authentication
3. Follow the instructions provided by the Azure Samples of this repository and implement them inside your project
4. The routing of the application is done in the react js application, so basically try to click an object in the DOM and this click will call an API secured in my backend

Expected behavior With the [Authorize] secured API, I think that after the call, the microsoft login has to appear and then, after I authenticate myself, the API must return to me the result of the call

Actual behavior Check the developer tools of chrome and you will see 2 calls to the same API with a response cookies in the tab "Cookies" but in the console there is a "CORS policy" error.

Possible Solution No

Additional context/ Error codes / Screenshots

OS and Version?

Windows 10

Versions

ASP.NET Core 2.2 + React JS MSAL 4.6

[bobo8488]

Hi all. Could we know if this enhancement will be deployed soon? Only because I have a deploy in prod on the 3rd of december and I would like to know if I have to solve this problem in a different way. Thank you so much.

[hbermani]

Hi bobo, I have the same issue here. I have been trying to apply CORS policy including to the oidc configuration controller but having no luck with it at all. Will let you know if I find an answer.

[bobo8488]

Thank you!

Il giorno ven 13 dic 2019 alle ore 16:21 hbermani [email protected] ha scritto:

Hi bobo, I have the same issue here. I have been trying to apply CORS policy including to the oidc configuration controller but having no luck with it at all. Will let you know if I find an answer.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2/issues/208?email_source=notifications&email_token=AEHXQMJXPLJUT23L4Y3TDGLQYOSA5A5CNFSM4JOZSAYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEG2IX2Q#issuecomment-565480426, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEHXQMIRPEJZKNFTHJ5MO7TQYOSA5ANCNFSM4JOZSAYA .

[bobo8488]

Is it possibile to know something about this? I think that this is a huge problem for all the developers that have routing on SPA pages and after that they call protected apis. Please, let us know. Thank you

[hbermani]

hi bobo, I ended up implementing Azure AD B2C with this library https://github.com/syncweek-react-aad/react-aad#readme, and leverage JWT to authorise with the backend.

[bobo8488]

Hi hbermani, with your solution, if you are also protecting the .net core backend, this won't work....because the cookie that is saved is not verifiable by the backend because is issued from the MSAL. The problem here is that in the "Authorized" backend the CORS error prevent us to login correctly and then consume the api that is called. In my opinion the error to handle is the cors error... Don't you think I'm right? Thank you for your kind feedback

[hbermani]

That's the thing, you don't trust the MSAL token, your backend will need to verify the token against Azure AD B2C.

[bobo8488]

Ok. Is it possible to see the code of your .net core 2.2 server side? Thank you

[hbermani]

Here is the detailed docs for verifying the token https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-tokens#validation

[bobo8488]

It's not working. I'm always get signature error when I'm verifying the token. I think that the token is a microsoft graph token. I'm not using the active directory b2c. The question is, how is possible to verify a microsoft graph access token inside my .net core protected web api? Thank you

[TiagoBrenck]

@bobo8488 you simply dont. Think about access token as a country visa. You have gotten yourself a visa to US, but asking how can you use your US visa to enter in Japan?

If you get an access token for Graph, you must only use it to access MS Graph. If you need to access your .NET core web api, then the API must expose a scope, and your front-end app should acquire a token to this .NET api scope and send it as Bearer.

[bobo8488]

Yes, you are right, but no documentation has been released to authenticate with azure Active directory and validating that token in a protected web api... So I follow the documentation, but maybe I'm following the wrong documentation... Any ideas? Thank you!

[hbermani]

Hi bobo, so as I understand it, you authenticate / verify identity with id token and look what permissions have been granted with access token (which I am assuming you are fetching on server side).

See if this helps https://docs.microsoft.com/en-us/azure/active-directory/develop/id-tokens#validating-an-id_token

[bobo8488]

I'm authenticating the user with React-AAD. After that I have to call a protected web API. I call a function of React AAD that give me the access token. After that I put that token in the header of the rest api request. When the api is called, the authentication fails. How can I obtain a valid azure active directory token and how is possible to validate that token in the .net core 2.2 backend? Thank you.

[bobo8488]

@bobo8488 you simply dont. Think about access token as a country visa. You have gotten yourself a visa to US, but asking how can you use your US visa to enter in Japan?

If you get an access token for Graph, you must only use it to access MS Graph. If you need to access your .NET core web api, then the API must expose a scope, and your front-end app should acquire a token to this .NET api scope and send it as Bearer.

@TiagoBrenck Thank you for your response...but there is any documentation about this? I have a frontend in react that use MSAL library for authentication... I don't know how to solve this problem with my backend...

[TiagoBrenck]

@bobo8488 my suggestion to protect a web api would be this sample: https://github.com/Azure-Samples/active-directory-dotnet-native-aspnetcore-v2/tree/master/1.%20Desktop%20app%20calls%20Web%20API

It shows you how to configure the web api in Azure Portal, set its values in dot net core project and how to set the [Authorize] attribute that will accept a token from your front-end client. This particular sample uses a WPF as a front-end, but this doesn't matter for the web api perspective.

Let me know if you need more help. I am more than happy to give you more guidance if needed.

[kleepMan]

I had the same problem when I tried this library but I didn't solve the the problem. But for a "workaround" I found this good repo and got it working https://github.com/vfabing/simple-aspnetcore-azuread-react . Still trying to find out how I could solve this using this new library

edit. And I'm using netcore 3.1 in the backend

[faizankhan1995]

I am also unable to verify the token on backend.

[derisen]

@bobo8488 @mufraver2 @faizankhan1995 I suggest to take a look at these two samples:

• Angular SPA & .NET Core Web API
• React SPA & .NET Core Web API (on-behalf-of)

With respect to CORS issue, you might want to check this thread.

[abarpetia]

@TiagoBrenck Thanks for the link, I got my React Webapp working with asp.net API.

@bobo8488 @mufraver2 @faizankhan1995 For me the issue was the MSAL scope while getting token from the Azure Application. Try adding a "Expose an API" scope in your app registration and use that scope to get a token.

[kalyankrishna1]

closing