Nuxt app trying to access express api - two different servers - how to get token for express.js app?

[jumptrnr]

New to auth in general, and auth0 - cannot find in the docs.

1. I have a Nuxt app (Regular Web Application) successfully using Auth0 and get a Bearer token once logged in (using auth-next v5) - all good.

2. That app gets its data from an express app (api) which I’ve also protected as a Custom API. It is fine with the bearer token I provide it from the curl request to get a token in the test section of Auth0.

However, when I try and use the token from my login from the Nuxt app - I get “jwt audience invalid” as it doesn’t match the API understandably.

My API has the “Authorized” toggle on for my App in 1.

Does my Nuxt app need to call the code to get a different Auth0 token so that can be passed in?
When I try that from the Nuxt app - I get a CORS error:

Access to fetch at 'https://dev-4w2d-ujh.us.auth0.com/oauth/token' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

In short, how do I get an access token for a protected api from my authenticated Nuxt app (Nuxt being a wrapper around Vue).

Thank you greatly in advance.

[jumptrnr]

Well - answered my own question for anyone that comes across this.

Using v5 of Nuxt Auth: Auth0 - nuxt auth docs

You need to set the audience to your API in the auth0 config (… .ahem like the documents say…)

strategies: {
  auth0: {
    domain: "<YOURDOMAIN>.auth0.com",
    clientId: process.env.AUTH0_CLIENT_ID,
    audience:  process.env.AUTH0_API_ID,
  },

Then that bearer token is good to log in and hit your protected api & you can see the api in the audience section of the JWT

[konrad.sopala]

Perfect! Thanks for sharing it with the rest of community!