Express API Authorization for backend with React Frontend-code 404

[coderbee]

I followed the quickstart tutorial for “Node (Express) API: Authorization” as well as " React: Call an API". The profile page rendered correctly with the access token. However, when I used implemented the code (with useEffect hook) for my own APIs, I kept getting 404. I suspected I did something wrong in the backend. In the network console, I saw CORS error with provisional header. Upon checking the header on jwt, it seems missing the secret key. But I’m not sure how I can debug this kind of issue. I’m also confused about when to use audience api for API management vs API. For the frontend where I used the API management URL, it worked for the profile page but it didn’t work for the backend api as the audience URL. However, it didn’t work either when I switched it to the API audience URL. I got the same 404 error.

[stephanie.chamblee]

Hi @coderbee,

Welcome to the Community!

Based on your screenshot, I think you are correct about it being a CORS issue. It looks like an OPTIONS method might not be implemented for the API, and so the OPTIONS preflight results in a 404. This preflight request is made when an API request does not meet the criteria for a simple request by the browser. Because your API request includes an authorization header to send the Access Token as a bearer to your API, the request is not considered simple.

You could probably use Express cors middleware to resolve this:

const corsOptions = {
    origin: 'http://localhost:3000'
}

app.use(cors(corsOptions));

Please let me know if you have follow up questions!

[coderbee]

Hi Stephanie,

Thanks so much for your reply. I implemented your code but the error changed from 404 to xhr failed. I still can’t fetch my API using fetch nor axios. I wonder if you could help me find the bug. Below are my code. Right now, my postman says 401 when I tried GET request for (http://localhost:5000/api/vi/games). I do see the token and I tried it on jwt saying “invalid signature”.

Thanks so much!

Screen Shot 2021-03-17 at 4.31.10 PM|690x436

[stephanie.chamblee]

You mentioned that the GET is sent to http://localhost:5000/api/vi/games, but it looks like the request URL is https://nteractbackend.com/api/v1/games. ERR_NAME_NOT_RESOLVED means that chrome can’t resolve the domain. Does it look like the request is making it to your API when you view the API running in the terminal?

Would you mind private messaging me a HAR file so that I can take a look at the token you’ve mentioned?

Generate and Analyze HAR Files

Also, would you mind sharing your API code where you are validating the JWT? It should look something like this:

const express = require('express');
const app = express();
const jwt = require('express-jwt');
const jwtAuthz = require('express-jwt-authz');
const jwksRsa = require('jwks-rsa');

// Authorization middleware. When used, the
// Access Token must exist and be verified against
// the Auth0 JSON Web Key Set
const checkJwt = jwt({
  // Dynamically provide a signing key
  // based on the kid in the header and 
  // the signing keys provided by the JWKS endpoint.
  secret: jwksRsa.expressJwtSecret({
    cache: true,
    rateLimit: true,
    jwksRequestsPerMinute: 5,
    jwksUri: `https://YOUR_DOMAIN/.well-known/jwks.json`
  }),

  // Validate the audience and the issuer.
  audience: 'YOUR_API_IDENTIFIER',
  issuer: `https://YOUR_DOMAIN/`,
  algorithms: ['RS256']
});

Thanks!

[stephanie.chamblee]

Also, has your API been registered with Auth0 so that your frontend can use its identifier as the audience?

Register APIs

You’ll want to add the audience param in the Auth0Provider:

ReactDOM.render(
  <Auth0Provider
    domain={config.domain}
    clientId={config.clientId}
    audience={config.audience} // <-- the config obj should contain the audience property with the value set to your registered API identifier
    redirectUri={window.location.origin}
    onRedirectCallback={onRedirectCallback}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

[coderbee]

Yes, that’s what I did in my index. js for frontend.The audience is https://nteractbackend.com

[coderbee]

[stephanie.chamblee]

Update: tweaking the origin in the cors middleware resolved this issue!