Calling an API to a custome created one on the dashboard?

m3.code · June 24, 2022, 3:00pm

Hi everyone,

I was following his tutorial to make an API call with the auth0/react package:

The default here is the Auth0 Management API. IS it possible to make a call to an API I created?
I tried adapting the fields (audience, scope…) and also tried to adapt the field ’ userDetailsByIdUrl’. For this one, should it be the equivalent of
audience/v2/users/${user?.sub}
or leave it as
https://${domain}/api/v2/users/${user?.sub}
?

Because I defined the permissions I needed in the API I created, but everytime, I get an error ‘401 - Bad Audience’ and always the case of ‘No user meta_data found’, although I am sure in the auth0 dashboard to have created some metadata for the logged-in user.

tyf · June 27, 2022, 10:59pm

Hey there @m3.code!

Yes, it is definitely possible to make a call to an API that you’ve created. It will need to be registered in your dashboard. There’s actually an example of this in the sample app - If you run npm run dev the example API will be served at http://localhost:3001 :

github.com

auth0-samples/auth0-react-samples/blob/master/Sample-01/api-server.js

const express = require("express");
const cors = require("cors");
const morgan = require("morgan");
const helmet = require("helmet");
const { auth } = require("express-oauth2-jwt-bearer");
const authConfig = require("./src/auth_config.json");

const app = express();

const port = process.env.API_PORT || 3001;
const appPort = process.env.SERVER_PORT || 3000;
const appOrigin = authConfig.appOrigin || `http://localhost:${appPort}`;

if (
  !authConfig.domain ||
  !authConfig.audience ||
  authConfig.audience === "YOUR_API_IDENTIFIER"
) {
  console.log(
    "Exiting: Please make sure that auth_config.json is in place and populated with valid domain and audience values"

This file has been truncated. show original

And for example your auth_config.json might look like:

{
  "domain": "YOUR_DOMAIN.auth0.com",
  "clientId": "CLIENT_ID",
  "audience": "http://localhost:3001",
  "scope": "read:something"
}

Where http://localhost:3001 has been registered as the Identifier of an API in my Auth0 dashboard.

Hope this helps!

m3.code · June 28, 2022, 5:00am

Hey @tyf Thank you for your answer.

Unless I don’t understand how, which is very well possible, I don’t see the correlation between what I am trying to achieve and your answer?

The article I am referencing adds code in a React component to try to access some user_metadata, that has been manually entered through the dashboard.
They’re using the default Auth0 Management API, while I was thinking to use one that I created for example, because I added some permissions to it, and linked this API to the SPA App I am trying to run.

tyf · June 30, 2022, 11:11pm

No problem, happy to help where I can!

What I shared is just an example of a SPA + API (non Auth0) set up - I recommend checking out the following doc which outlines the SPA + API architectural scenario:

Regarding user metadata, you might want to look into adding this to an access/ID token and going about it that way - Some more on that here:

Let us know if you have any follow up questions!

tyf · July 15, 2022, 11:12pm

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