Modernize sample app with React 19, Vite, npm and dependency updates

[jimmyyan9]

This PR modernizes the React sample application by upgrading all major dependencies to their current stable versions and replacing several end-of-life tooling choices. All existing functionality and tests are preserved, with no behavior changes having been introduced.

Changes

SDK and dependency upgrades

• @auth0/auth0-react: 2.2.0 → 2.16.0
• react / react-dom: 18.2.0 → 19.2.4
• @testing-library/react: upgraded to 16.0 (React 19 compatible)
• Bootstrap: 4.x → 5.x (Bootstrap 4 reached EOL January 2023)

Migrated from yarn v1 to npm

• Removed yarn.lock, generated package-lock.json
• Updated all documentation and script references to use npm

Migrated from Create React App (react-scripts) to Vite

• Replaced react-scripts build commands with Vite equivalents
• Added vite.config.js
• Renamed applicable files to .jsx
• Added jest.config.js and babel.config.js to maintain Jest compatibility with the new build tooling

Migrated from reactstrap to react-bootstrap

• Updated component names and class names to their react-bootstrap / Bootstrap 5 equivalents

Migrated from React Router v5 to v6

• Removed custom history object (no longer needed in v6)
• Updated route protection patterns following the auth0-react examples guide

Switched from auth_config.json to environment variables

• Removed auth_config.json and replaced all reads with environment variables (AUTH0_DOMAIN, AUTH0_CLIENT_ID, AUTH0_AUDIENCE)
• Simplified Netlify, Jest, and Docker configurations (fewer imports and config file dependencies)

Dockerfile

• Updated to a newer Alpine base image

Motivation

The last commit to this repository was over a year ago, and in that time several of the core dependencies have fallen significantly out of date. Stale samples accumulate vulnerabilities, break against current Node.js versions, and give developers a poor first experience when evaluating Auth0. The primary goals of this PR are to get the sample to a working state against current tooling and ensure it reflects the practices developers are likely already using in their own projects.

React 19 and auth0-react 2.16.0: Keeping the sample current with the latest SDK and framework versions ensures developers can use it as a reference without immediately running into version mismatch issues.

npm over yarn v1: Yarn v1 is in maintenance-only mode with no active development. It requires a separate installation step, whereas npm ships with Node.js, making the project easier to set up out of the box. The current Auth0 React SDK quickstart also uses npm.

Vite over Create React App: react-scripts has not been updated since 2022 and does not support React 19. Vite is the standard for new React projects (Jest is retained for testing with a small configuration addition).

react-bootstrap over reactstrap: reactstrap does not support React 19 and there are no plans to add it. Migrating to react-bootstrap alongside the Bootstrap 4 to 5 upgrade moves to a library with active maintenance.

React Router v6: React Router v5 with a custom history object is a pattern from 2019. v6 simplifies routing considerably and the custom history workaround is no longer needed.

Environment variables over auth_config.json: Environment variables are the standard configuration mechanism for modern deployment pipelines (Vercel, Netlify, Docker, CI/CD), so the sample now works out of the box with these platforms without any extra steps. Manually setting variables for local development still works with the .env.example to .env.local file.

[yogeshchoudhary147]

Review: Modernize sample app with React 19, Vite, npm and dependency updates

This is a well-motivated and broadly well-executed PR. The dependency upgrade decisions are all sound, the auth0-react integration follows current SDK patterns correctly, and the migration away from CRA is overdue. I have a few issues to address before merging, one of which is a blocker.

---

Blocker

CI Docker build will not inject credentials (circleci/config.yml)

The PR removes auth_config.json and bakes credentials into the Vite bundle via Docker --build-arg at build time, but the CircleCI configuration was not updated to pass those build args to docker build. The old step presumably wrote credentials into auth_config.json before building the image; that step is now effectively dead code but the new build args (AUTH0_DOMAIN, AUTH0_CLIENT_ID, AUTH0_AUDIENCE) are never passed.

The AUTH0_CFG environment variable defined in the job is now an orphaned reference and should be removed. The Docker build step needs something like:

docker build \
  --build-arg AUTH0_DOMAIN=$AUTH0_TEST_DOMAIN \
  --build-arg AUTH0_CLIENT_ID=$AUTH0_TEST_CLIENT_ID \
  --build-arg AUTH0_AUDIENCE=$AUTH0_TEST_AUDIENCE \
  -t auth0-react-01-login .

Without this, integration tests will run against an app with empty Auth0 config baked in.

---

Should fix

Broken link in README

-This sample demonstrates...using [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html).
+This sample demonstrates...using [Vite](https://reactjs.org/docs/create-a-new-react-app.html).

The link text was changed to "Vite" but the URL still points to the create-react-app docs. Should be https://vitejs.dev.

dotenv belongs in devDependencies

dotenv is only called in api-server.js to load .env.local for local development. In the Docker/Netlify/production path, environment variables are injected directly by the platform and dotenv is never needed. Moving it to devDependencies reflects its actual role and avoids it appearing in production installs.

exec.sh: export $() pattern is fragile

export $(grep -v '^#' .env.local | grep -v '^$' | xargs)

This breaks silently for values containing spaces, quotes, or special shell characters. Using a while IFS= read -r line loop or passing values explicitly as --build-arg (already done just below) is safer. Since the build args are passed explicitly in the docker build call anyway, the export line can just be removed.

---

Nits

Missing newline at end of file in .env.example, exec.sh, and exec.ps1. These all end without a trailing newline, which violates POSIX conventions and produces a \ No newline at end of file warning in diffs.

react-router-dom: "^6.3" pins to an old 6.x release from 2022. Nothing in the migration requires 6.3 specifically; bumping the floor to ^6.28 or just ^6 (which npm will resolve to latest 6.x) keeps the lockfile current and avoids pulling in old minor releases.

---

Looks good

• Auth0Provider setup (onRedirectCallback with useNavigate, BrowserRouter wrapping Auth0ProviderWithRedirectCallback) follows the auth0-react EXAMPLES.md exactly.
• logoutParams: { returnTo: window.location.origin } is correct for auth0-react v2+.
• authorizationParams structure in the provider config is correct.
• withAuthenticationRequired usage in views is idiomatic and unchanged in substance.
• Vite define mapping process.env.* to inlined strings is a valid pattern; keeps the naming convention consistent between frontend and backend.
• hljs.highlightBlock → hljs.highlightElement is the correct API for highlight.js v10+.
• text-md-left → text-md-start is the correct Bootstrap 5 logical properties migration.
• Removing the dynamic require in Highlight.jsx and pre-registering JSON is cleaner for a sample app with a single use case.
• Jest/Babel configuration additions are the correct way to run Jest alongside Vite (they use separate transform pipelines).
• Test updates (@testing-library/jest-dom import, MemoryRouter wrapping in App.test.js) are correct for the versions in use.
• TextEncoder/TextDecoder polyfill in setupTests.js is needed for jest-environment-jsdom compatibility with newer Node.js.

Once the CI build arg issue is resolved, this is ready to merge.

Removing review

[yogeshchoudhary147]

Review

Good set of upgrades, all well-justified. A few things to fix:

Blocker — CI does not inject credentials into the Docker build

The "Replace Auth0 test credentials" step still writes to auth_config.json, which the new code never reads. The docker build step has no --build-arg flags, so the Vite bundle will have empty Auth0 config baked in. AUTH0_CFG is now dead. The build step needs:

docker build \
  --build-arg AUTH0_DOMAIN=$AUTH0_TEST_DOMAIN \
  --build-arg AUTH0_CLIENT_ID=$AUTH0_TEST_CLIENT_ID \
  --build-arg AUTH0_AUDIENCE=$AUTH0_TEST_API_IDENTIFIER \
  -t $CIRCLE_JOB ./$SAMPLE_PATH

Should fix

• README: link text says "Vite" but href still points to the CRA docs on reactjs.org — should be https://vitejs.dev

Nits

• .env.example, exec.sh, exec.ps1 all missing trailing newline
• react-router-dom: "^6.3" is a 2022 floor with no reason to pin it that low; ^6 is fine