@auth0/nextjs-auth0 tokens and external api help

[jseneris]

Hi,

I am new to auth0 and authentication in general so I’m hoping someone can help me out here.

I have a nextjs site and used the quick start tutorial to hook it up to auth0, so now I can login and get auth0 user info on the front end.

Now that I have an authorized user I want to call an external api (one that I wrote) from a authorized only page to get user specific data. So a wrote a component whose link is only visible on the home page if a user object from useUser exists, then that page calls an endpoint in the nextjs api folder wrapped with withApiAuthRequired(). Within that method I tried to get a jwt token that had some of the auth0 information in (email and id) that I could pass to the api; but all I’m getting from the getAccessToken() method is an opaque token.

I read in the docs that I need to set an audience and that’s where I get completely lost. I don’t know where to set it (in the […auth0].js file?) , how to set it (in my auth0 application setup?) , or what to set it to (do I set it to the api I’m going to call, or from the application that calls it?).

I know this question is all over the place, but I’m that lost…

Thanks.

[Ale]

Welcome to the Auth0 Community @jseneris!

First of all, if you want to protect an external/custom API with Auth0, you need to register your API in your Auth0 tenant as described here: Register APIs

After you’ve done the above, you will be ready to request Access Tokens with the audience of that custom API. You have relevant documentation here: Get Access Tokens

Now, you need to set the audience of your custom API when you make the /authorize call to authorize the user. For example, if you are using an Authorization Code Flow, you will need to make a call like this:

https://YOUR_DOMAIN/authorize?
    response_type=code&
    client_id=YOUR_CLIENT_ID&
    redirect_uri=https://YOUR_APP/callback&
    scope=SCOPE&
    audience=API_AUDIENCE&
    state=STATE

The audience parameter is the one you need to set to your custom API.

I highly suggest you read Call Your API Using the Authorization Code Flow if that’s the flow you are going to implement.

Regarding Next.js Auth0 SDK specifics, I admit I am not experienced with this very SDK, but after some googling, I think I’ve found what you need. You would need to pass the audience directly to the handlelogin method, or use environment variables instead as documented in our GitHub repository: nextjs-auth0/EXAMPLES.md at main · auth0/nextjs-auth0 · GitHub :

// pages/api/auth/[...auth0].js
import { handleAuth, handleLogin } from '@auth0/nextjs-auth0';

export default handleAuth({
  async login(req, res) {
    try {
      await handleLogin(req, res, {
        authorizationParams: {
          audience: 'https://api.example.com/products', // or AUTH0_AUDIENCE
          // Add the `offline_access` scope to also get a Refresh Token
          scope: 'openid profile email read:products' // or AUTH0_SCOPE
        }
      });
    } catch (error) {
      res.status(error.status || 400).end(error.message);
    }
  }
});