feat(next-csrf): modernize for Next.js 16 and React 19#35
Closed
riceharvest wants to merge 71 commits intomainfrom
Closed
feat(next-csrf): modernize for Next.js 16 and React 19#35riceharvest wants to merge 71 commits intomainfrom
riceharvest wants to merge 71 commits intomainfrom
Conversation
- Upgraded multiple packages to modern standards (Next.js, Next-auth, PWA, SEO). - Added new utility packages: critters, next-circuit-breaker, next-csrf, next-images, next-json-ld. - Integrated Changesets for versioning. - Updated CI/CD workflows and linting configurations. - Fixed numerous linting and type-checking issues across the monorepo.
- Remove legacy NextAuth adapters and resolve workspace version conflicts - Clean up test warning noise and fix tsconfig/jest setups for next-auth - Update Workbox/Terser dependencies in next-pwa to align with workspace - Synchronize root lockfile to reflect nested package resolutions
Fixes `JWT_AUTO_GENERATED_SIGNING_KEY` and `JWT_AUTO_GENERATED_ENCRYPTION_KEY` warnings properly by supplying JWKs directly in the test suite rather than mocking the logger.
Review Summary by QodoModernize monorepo for Next.js 16, React 19, and Web API support with enhanced security and comprehensive testing
WalkthroughsDescription• **Modernized CSRF package for Next.js 16 and React 19**: Added verifyCsrfToken() for App Router with async headers() and cookies() support, enhanced token validation with multiple sources, and separated httpOnly settings for secret and token cookies • **Extended session utilities for Web API support**: Added getWebSession() function for Web API Request/Response objects, refactored decorateSession() with callbacks, enhanced parseTime() with duration units, and improved commitHeader() for both Node.js and Web API • **Enhanced next-connect middleware execution**: Improved error handling for multiple next() calls and proper async/await handling with promise tracking • **Modernized OAuth implementation**: Removed external oauth package dependency, replaced with native fetch API implementation for OAuth 2.x • **Added TypeORM and Prisma legacy adapters**: Comprehensive implementations for next-auth with full CRUD operations and backward compatibility • **Improved security and robustness**: Fixed CSS inlining vulnerabilities, enhanced URL sanitization, improved container detection in critters package • **Extended test coverage**: Added comprehensive tests for CSRF middleware, App Router verification, Web API sessions, MDX functionality, compose plugins, and JWT operations • **Migrated test frameworks**: Transitioned multiple packages from Jest to Vitest and Node.js native test runner • **Added new packages and examples**: Implemented react-query-auth with Vite example, MDX utilities, and Mock Service Worker integration • **Simplified and modernized documentation**: Removed deprecation notices, updated JSDoc comments, cleaned up linting directives Diagramflowchart LR
CSRF["CSRF Package<br/>Modernization"]
Session["Session Package<br/>Web API Support"]
Connect["next-connect<br/>Error Handling"]
Auth["next-auth<br/>OAuth & Adapters"]
Tests["Test Framework<br/>Migrations"]
Security["Security<br/>Improvements"]
CSRF -- "App Router<br/>verification" --> NextJS["Next.js 16<br/>Support"]
Session -- "Web API<br/>Request/Response" --> NextJS
Connect -- "Async<br/>middleware" --> NextJS
Auth -- "Native OAuth<br/>implementation" --> NextJS
Tests -- "Vitest &<br/>Node.js test" --> Quality["Code Quality"]
Security -- "URL sanitization<br/>& validation" --> Quality
File Changes1. packages/next-images/test/index.test.ts
|
Code Review by Qodo
1. tsup externals cleared
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8485cab843
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
packages/next-csrf/package.json
Outdated
| "cookie": "^1.1.1", | ||
| "cookie-signature": "^1.2.2", | ||
| "csrf": "^3.1.0", | ||
| "next": "^16.1.6" |
There was a problem hiding this comment.
Move next out of dependencies, because this line forces every consumer to install a private Next 16 copy even when their app is on another supported peer version (for example Next 13/14). Since this package also declares next as a peer and imports next/headers, the extra nested install can bind runtime resolution to the wrong Next instance and create version-skew build/runtime failures that are very hard to diagnose.
Useful? React with 👍 / 👎.
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
| */`, | ||
| }; | ||
| }, | ||
| external: [], |
There was a problem hiding this comment.
1. tsup externals cleared 📘 Rule violation ⛯ Reliability
packages/next-csrf/tsup.config.ts now sets external: [], which can unintentionally bundle framework/runtime dependencies and change build outputs for consumers. This risks breaking established package-local build behavior.
Agent Prompt
## Issue description
`packages/next-csrf/tsup.config.ts` cleared the `external` list (`external: []`). This can cause bundling of dependencies that were previously externalized, potentially breaking consumer builds or runtime expectations.
## Issue Context
The monorepo compliance rules require preserving package-local tooling configuration compatibility.
## Fix Focus Areas
- packages/next-csrf/tsup.config.ts[3-13]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Comment on lines
+1
to
7
| // @vitest-environment happy-dom | ||
| import React from "react" | ||
| import { http, HttpResponse } from "msw" | ||
| import { useState } from "react" | ||
| import userEvent from "@testing-library/user-event" | ||
| import { render, screen, waitFor } from "@testing-library/react" | ||
| import { server, mockProviders } from "./helpers/mocks" |
There was a problem hiding this comment.
2. providers.test.jsx not formatted 📘 Rule violation ✓ Correctness
Modified code in packages/next-auth/src/client/__tests__/providers.test.jsx uses double quotes and appears to omit semicolons, conflicting with Prettier conventions. This introduces inconsistent formatting in tests.
Agent Prompt
## Issue description
`packages/next-auth/src/client/__tests__/providers.test.jsx` includes formatting that conflicts with the repository’s Prettier conventions.
## Issue Context
Prettier conventions are required across the monorepo for consistency.
## Fix Focus Areas
- packages/next-auth/src/client/__tests__/providers.test.jsx[1-34]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Comment on lines
+76
to
81
| "dependencies": { | ||
| "cookie": "^1.1.1", | ||
| "cookie-signature": "^1.2.2", | ||
| "csrf": "^3.1.0", | ||
| "next": "^16.1.6" | ||
| } |
There was a problem hiding this comment.
3. Next shipped as dependency 🐞 Bug ⛯ Reliability
@opensourceframework/next-csrf now lists next in dependencies (while also in peerDependencies), which can install a nested Next.js copy instead of using the host app’s Next.js. This can create version conflicts and runtime/tooling breakage when the host app uses a different Next version.
Agent Prompt
### Issue description
`@opensourceframework/next-csrf` declares `next` in both `peerDependencies` and `dependencies`. This can lead to a nested Next.js installation and version conflicts in consuming apps.
### Issue Context
The package already targets Next.js consumers via `peerDependencies`; shipping `next` as a runtime dependency is likely unintended and risky.
### Fix Focus Areas
- packages/next-csrf/package.json[59-81]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Comment on lines
39
to
49
| ```typescript | ||
| // lib/csrf.ts | ||
| import { nextCsrf } from '@opensourceframework/next-csrf'; | ||
| // Usage example | ||
| import { createCSRF } from '@opensourceframework/next-csrf'; | ||
|
|
||
| const { csrf, setup } = nextCsrf({ | ||
| // Required: A secret key for signing cookies (use environment variable in production) | ||
| const csrf = createCSRF({ | ||
| secret: process.env.CSRF_SECRET, | ||
|
|
||
| // Optional: Customize the token cookie name (default: 'XSRF-TOKEN') | ||
| tokenKey: 'XSRF-TOKEN', | ||
|
|
||
| // Optional: Custom error message (default: 'Invalid CSRF token') | ||
| csrfErrorMessage: 'Invalid CSRF token', | ||
|
|
||
| // Optional: Methods to ignore (default: ['GET', 'HEAD', 'OPTIONS']) | ||
| ignoredMethods: ['GET', 'HEAD', 'OPTIONS'], | ||
|
|
||
| // Optional: Cookie options | ||
| cookieOptions: { | ||
| httpOnly: true, | ||
| path: '/', | ||
| sameSite: 'lax', | ||
| secure: process.env.NODE_ENV === 'production', | ||
| }, | ||
| }); | ||
|
|
||
| export { csrf, setup }; | ||
| // Use in API routes | ||
| export default csrf.protect(handler); | ||
| ``` |
There was a problem hiding this comment.
4. Readme documents wrong api 🐞 Bug ✓ Correctness
packages/next-csrf/README.md documents createCSRF / csrf.protect and a default tokenKey of _csrf, but the package’s actual public entrypoint exports nextCsrf and defaults tokenKey to XSRF-TOKEN. Users following the README will write imports/calls that fail and configure the wrong cookie/header names.
Agent Prompt
### Issue description
The README documents a `createCSRF` / `csrf.protect` API and `_csrf` defaults that do not match the actual package exports/defaults.
### Issue Context
The package entrypoint exports `nextCsrf` and defaults `tokenKey` to `XSRF-TOKEN`. The README should not instruct users to import symbols that aren’t exported.
### Fix Focus Areas
- packages/next-csrf/README.md[37-103]
- packages/next-csrf/src/index.ts[32-72]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Owner
Author
|
|
3 similar comments
Owner
Author
|
|
Owner
Author
|
|
Owner
Author
|
|
…support - Remove 'next' from dependencies to avoid nested copy (already in peerDependencies) - Add 'csrf-token' header to verifyCsrfToken for consistency with Pages Router middleware
Contributor
Code Review SummaryStatus: No Issues Found | Recommendation: Merge Overview
Files Reviewed (2 files)
|
Owner
Author
|
|
Owner
Author
|
Superseded by #59 (squash merge of all modernization PRs). Changes included in main. |
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
1 participant
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.
Closes #22 (roadmap).
verifyCsrfTokenworks with Next.js 16 asynccookies()andheaders().reactandreact-domaspeerDependencies.nextversion range inpeerDependencies.