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

Get Help
1

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.

2

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

1 Like
3

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

4

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.

5

Hi team!

The first public beta of the Auth0 Nuxt SDK is now available for developers building web apps on the Nuxt framework!

Key Highlights

  • Idiomatic Nuxt 3 Experience: Simple, composable functions (useAuth0) that feel native to Nuxt developers, dramatically reducing time-to-first-login.
  • Advanced Security Out-of-the-Box: We’ve included support for the latest security standards from day one, including Pushed Authorization Requests (PAR), Rich Authorization Requests (RAR), and Backchannel Logout.
  • Powerful API Authentication: Seamlessly obtain tokens for backend APIs using the TokenVault integration.

Resources

Here are the helpful resources to explore the new Nuxt SDK and get started:

This SDK is still in Beta and we need your feedback! Please share any feedback, questions or comments on GitHub.

Thanks!
Dawid