Angular 4 - API Authentication - 401 Unauthorized for URL

I downloaded the Quickstart for Angular 2 - 03 Calling An API.

I can run it and login and when I click the “Call Public” I get:

Hello from a public endpoint! You don’t need to be authenticated to see this.

So the Angular Controller is connecting to the Node app, but when I click “Call Private” I get:

Response with status: 401 Unauthorized for URL: http://localhost:3001/api/private

I download the quickstart and created a client application and API as documented and I was not able to reproduce the situation.

The only changes I made was to set the correct information in .env for the server-side and in auth0-variables.ts for the client-side.

However, if I then accessed the settings of the API that I created, selected the Scopes section, removed the read:messages scope and repeated the whole process of user authentication I did indeed receive a 401 when calling the private endpoint. This may not be a definitive answer, but I would suggest for you to ensure that you configured the correct scope in the API as even a typo would mean the read messages scopes that the private endpoint requires would not be included in the issued access token.

Given that currently issued access tokens for your own API’s are JWT’s, you can retrieve the access token from the SPA using the browser tools and check in jwt.io if the expected scope is there.

Thank you João @jmangelo.

I had: scope: ‘openid profile read:message’

Which needed to be ‘openid profile read:messages’

In the auth.service.ts file.

Thank you João @jmangelo.

I had: scope: ‘openid profile read:message’

Which needed to be ‘openid profile read:messages’

In the auth.service.ts file.