I’m trying to connect a VueJS SPA app to an ASP.NET Core WebAPI 2.2 back end. However, I’m getting 401 errors trying to authenticate. I have added the authentication pieces to WebApi per the Auth0 instructions and I have created the API entries in my dashboard. Further, I am using the VueJS starter app that Auth0 provides and have added that as an app in my Auth0 dashboard.
I have added the correct domain and audience to the entries both in WebApi Startup class and the VueJS auth_config.json file. I have also added the VueJs app clientId to the VueJS .json file. The VueJS app correctly calls the Auth0 login page and retrieves the JWT token.
The only clues I have are an error message in the browser dev tools that states “the audience is invalid” and that when I take that token and view it in the jwt.io test page, the audience that shows up in the token is the VueJS app’s client ID and not the API’s ID as it should be, despite having the audience entry in the .json file. I’m sure I’m missing something, but having gone through the docs several times I’m not seeing it.
UPDATE 1:
Well, I’m making progress. I figured out that the quickstart for the VueJs only uses the id_token value to pass to the API. In file authService.js, I changed the responseType to “id_token token” and I changed line:
this.idToken = authResult.idToken
to instead be
this.idToken = authResult.accessToken
After these changes, I could now authenticate against the API. Now I’m stuck on the policies. I created the roles and permissions in Auth0 dashboard on the API service and I assigned the user to a role that has all permissions. However, when I implement the directions here:
https://auth0.com/docs/quickstart/backend/aspnet-core-webapi/01-authorization
for implementing endpoint security. It works fine when I just have
[Authorize]
but when I add an
Authorize(policy:PolicyName)
to an endpoint, I’m getting 403 errors, regardless of what role/permissions the user has or what policyname I add to the Authorize header.