getting "Status Code: 401 Unauthorized" from /hello

[armyofda12mnkeys]

Issue

getting "Status Code: 401 Unauthorized" from /hello in Chrome In the API console, i see:

{"name":"AzureAD: Bearer Strategy","hostname":"US-LT-10272","pid":1
5812,"level":30,"msg":"authentication failed due to: token is not found","time":"2022-08-23T23:57:02.462Z","v":0}
GET /hello 401 1.355 ms - -

I do see right before /hello is called, i see /token is called and it does return a token like:

{
    "id_token": "eyJ0eX....",
    "token_type": "Bearer",
    "not_before": 1661293983,
    "client_info": "eyJ1aW...",
    "scope": "",
    "refresh_token": "eyJraW...",
    "refresh_token_expires_in": 86400
}

So why isn't it passing it along to /hello?

like /hello has a authorization token like so: authorization: Bearer and im guessing it should have a value like: authorization: Bearer eyJ0eX

Believe I setup everything according to spec in the Azure AD B2C settings for the App/Registration/UserFlows, and configured the config.js and authConfig.js with the simple updates mentioned in the tutorial as well.

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [x] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [ ] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Any log messages given by the failure

Request URL: http://localhost:5000/hello, Request Method: GET, Status Code: 401 Unauthorized

Expected/desired behavior

Request URL: http://localhost:5000/hello, Request Method: GET, Status Code: 200

Browser and version

Chrome 104.0.5112.81 (Official Build) (32-bit) Node v14.18.0

Thanks! We'll be in touch soon.

[salman90]

Hi @armyofda12mnkeys, I am unable to reproduce your error. Can you please share your app configuration files?

[armyofda12mnkeys]

I guess I shouldn't share my exact client_id/tenant_name, so i blanked those out.

Here are my userflows:

and the files attached is my config, (minus the real client_id/tenant_name). config.json.txt authConfig.js.txt.

I tested again locally on my personal computer to rule out firewall issues at work and still get that issue: first i login via the popup: then i click the HelloAPI link which gives:

you can see the /token call gives a id_token and refresh_token as well:

Any idea what could be wrong by just looking at configuration?, Thanks!, Ari

[salman90]

@armyofda12mnkeys The issue is that you're not passing the correct scope to your authConfig.js file. Please copy the exact value of the scope exposed in the API, as shown below in the image.

Then past that value to apiHello.scopes object in the authConfig.js, the scope should look like https://yourtentant.onmicrosoft.com/<your-api-application-id>/<scope-name>.

[armyofda12mnkeys]

Hey, The value I have in the 'Expose an API' scope area, is the same as what i have in the authConfig.js. I just double-checked now my pasting the url from the Azure portal into Notepad++ to check. Note: The React tutorial recommended replacing the your-api-application-id part with some value like 'tasks-api' so I did that.

authconfig.js is in the middle part of the pic. I also put my config.js file at the bottom (which won't have the full url and just 'tasks.read' per git repo).

Any ideas?, Thanks!, Ari

[Pmr-precure]

Im sorry to use this thread to ask this question, but im using this implementation with the AppRoles, but is there a way i dont have to add People app roles in both for the Webapp and API under "Enterprise applications"

[salman90]

Hey, The value I have in the 'Expose an API' scope area, is the same as what i have in the authConfig.js. I just double-checked now my pasting the url from the Azure portal into Notepad++ to check. Note: The React tutorial recommended replacing the your-api-application-id part with some value like 'tasks-api' so I did that.

authconfig.js is in the middle part of the pic. I also put my config.js file at the bottom (which won't have the full url and just 'tasks.read' per git repo).

Any ideas?, Thanks!, Ari

@armyofda12mnkeys Your application configuration files look fine to me. The issue is that you're not receiving an access token by azure to send to the API. Your request need to have an access token as shown below:

Can you please ensure that you're adding the scopes in the SPA application registration and giving the scopes an admin consent?

[salman90]

Im sorry to use this thread to ask this question, but im using this implementation with the AppRoles, but is there a way i dont have to add People app roles in both for the Webapp and API under "Enterprise applications"

@Pmr-precure I am not sure which sample you're referring to, but I assume you're referring to React single-page application calling Node.js & Express web API using App Roles. You can create one application registration for both the API and the SPA and declare the App Roles once for both applications. We are currently working on updating the sample to do so. You can look at the following PR's readme and implement it in your scenario.

Please open a new thread so we can track your issue. Thanks

[armyofda12mnkeys]

Hey @salman90, I think you got it! I now see the /hello call send the token and the page loads correctly now. I probably rushed too fast through the tutorial and did not add the custom 'expose an api' scopes to the API Permissions area. I think maybe I saw "My APIs" in the tutorial and got confused because my api scopes weren't in there, but now I see they are in this other "APIs my organization uses" tab, maybe because of organization settings/permissions or something.

Thanks so much @salman90!, Ari

[armyofda12mnkeys]

If I may ask a side question before closing the ticket. Now that my app 'works', should it turn green on the main registration listing page: Thought it was kinda weird its just grey (some inactive status?) and other apps there are green (active status?).

[salman90]

@armyofda12mnkeys No worries, I am happy to help. The colors are randomly generated if you do not upload a logo image for the app.