Modernize sample app with React 19, Vite, npm and dependency updates#392
Open
jimmyyan9 wants to merge 7 commits intoauth0-samples:masterfrom
Open
Modernize sample app with React 19, Vite, npm and dependency updates#392jimmyyan9 wants to merge 7 commits intoauth0-samples:masterfrom
jimmyyan9 wants to merge 7 commits intoauth0-samples:masterfrom
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.0react/react-dom:18.2.0→19.2.4@testing-library/react: upgraded to16.0(React 19 compatible)4.x→5.x(Bootstrap 4 reached EOL January 2023)Migrated from yarn v1 to npm
yarn.lock, generatedpackage-lock.jsonMigrated from Create React App (react-scripts) to Vite
react-scriptsbuild commands with Vite equivalentsvite.config.js.jsxjest.config.jsandbabel.config.jsto maintain Jest compatibility with the new build toolingMigrated from reactstrap to react-bootstrap
react-bootstrap/ Bootstrap 5 equivalentsMigrated from React Router v5 to v6
Switched from auth_config.json to environment variables
auth_config.jsonand replaced all reads with environment variables (AUTH0_DOMAIN,AUTH0_CLIENT_ID,AUTH0_AUDIENCE)Dockerfile
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.exampleto.env.localfile.