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

Changes recommended to get the CircleCI emblem to go green

Open djbauch opened this issue 7 months ago • 1 comments

This pull request includes updates to the CI configuration, Dockerfile, server and API server files, and several React components within the Sample-01 project. The changes aim to update dependencies, improve code readability, and enhance the UI.

CI and Docker Updates:

  • Updated Node.js version in .circleci/config.yml to 22.4.0 although I don't think I did it in the most efficient way and Docker version to 20.10.24. [1] [2]
  • Modified Sample-01/Dockerfile to use build arguments for Node.js and Alpine versions, and added cleanup for APK cache. [1] [2]

Server and API Server Changes:

  • Improved type coercion and nullish coalescing in Sample-01/api-server.js and Sample-01/server.js. [1] [2]
  • Changed auth middleware configuration in Sample-01/api-server.js to use tokenSigningAlg instead of algorithms.

Dependency Updates:

  • Updated several dependencies in Sample-01/package.json, including @auth0/auth0-react and express-oauth2-jwt-bearer. Added react-json-view and specified Yarn as the package manager. [1] [2]

React Component Improvements:

  • Replaced custom Highlight component with react-json-view for JSON rendering in ExternalApi.js and Profile.js. [1] [2]
  • Fixed class attribute to className in ExternalApi.js for React compatibility. [1] [2]
  • Updated command reference from npm run dev to yarn run dev in ExternalApi.js.

Rationale:

These changes have to do with the CircleCI configuration file and the Dockerfile, not just the code itself. I am able to get CircleCi to run everything except the integration tests. Even without accepting changes to the source that I recommend, you might get a green CircleCI emblem just with the changes to those two configuration files.

I also updated the package.json file to get the newer versions of the Auth0 react and bearer packages. All of that should be sufficient to get up to the Run integration tests stage of the CircleCI pipeline. I don't yet have any familiarity with codecept, so I didn't even attempt to fix that.

2025-03-18_0-31-07

In api_server.js, I just made some simple changes to avoid type confusion with the environment variables and fixed the third argument to the call to auth(). I also made the variables used in server.js always be strings as well. These changes were primarily to support work that isn't reflected here, since I am working on a Vite/TypeScript/Vitetest/ReactRouter7 variation of the example. These changes won't alter the behavior of the application, since the default value for the argument to auth() is being redundantly specified in either case.

The other changes I made were to get rid of the bespoke Highlight component and replace it with a component from npmjs. I did this to eliminate warnings related to the rendering of stringified JSON by the Highlight component.

djbauch avatar Mar 18 '25 05:03 djbauch