auth0-react-samples icon indicating copy to clipboard operation
auth0-react-samples copied to clipboard

Expose errors from the API endpoint in the UI

Open ewanharris opened this issue 2 years ago • 0 comments

  • 704acabcf5e23591184f4923dab6587e94cacd58 - While working on this change I realised that the highlighted text would not change on a re-render and it appeared to be down to passing HTML elements, so this commit refactors the Highlight component to a functional component and to also take the contents as a string rather than a children of HTML elements.
  • 462808c4e255cf4564e18fce658f5fadcd3ba7e0 - Adds an error handler to the api-server that will massage the errors returned from express-oauth2-jwt-bearer into a JSON response for the UI. This is then handled in the frontend to try and pull the JSON (it's possible this could also be a raw HTML response) and then display it in an codeblock similar to the response

We could potentially extend this to also include examples of how to fix these issues.

For example:

The audience is different between the frontend and backend Screenshot of the UI surfacing an invalid_token error

A developer extends this sample to include requiredScopes but does not update the frontend/update their token Screenshot of the UI surfacing a insufficient_scope error

ewanharris avatar Mar 29 '23 14:03 ewanharris