docs(start): add dynamic middleware section with authorization example#6815
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds a "Middleware Factories" section to the React middleware guide that documents static vs. dynamic middleware factories, a parameterized middleware-factory pattern, authentication (static base middleware) and authorization (factory) examples, middleware composition, and per-function server usage snippets. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit e251ac8
☁️ Nx Cloud last updated this comment at |
Bundle Size Benchmarks
Trend sparkline is historical gzip bytes ending with this PR measurement; lower is better. |
| - On the server, nothing is tree-shaken, so all code used in middleware will be included in the server bundle. | ||
| - On the client, all server-specific code is removed from the client bundle. This means any code used in the `server` method is always removed from the client bundle. `data` validation code will also be removed. | ||
|
|
||
| ## Dynamic Middleware |
There was a problem hiding this comment.
rather call it middleware factories
There was a problem hiding this comment.
Done, renamed throughout the section.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/start/framework/react/guide/middleware.md`:
- Around line 799-802: The example shows invalid syntax by splitting the method
name from its call (the `.server` token is separated from `()` by a comment);
update the `authMiddleware` example so `createMiddleware().server()` is written
as a single call (or remove the redundant declaration and leave a comment
referring to the earlier `authMiddleware` definition) — ensure you update the
`authMiddleware` and `createMiddleware` usage to use valid call syntax
(`.server()` together) rather than inserting a comment between the method name
and its parentheses.
…r middleware factories
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/start/framework/react/guide/middleware.md`:
- Around line 799-802: Remove the redundant authMiddleware declaration block
(the createMiddleware()... .server async ({ next, request }) stub) since
authMiddleware is already fully defined earlier; locate the authMiddleware
symbol and delete this abbreviated redeclaration, or if you intend it as a
self-contained reference instead of deletion, replace the stub with a clear
comment stating "Reference only — full implementation shown above" so readers
aren’t confused.
| export const authMiddleware = createMiddleware() | ||
| .server(async ({ next, request }) => { | ||
| // ... (implementation from authentication example above) | ||
| }) |
There was a problem hiding this comment.
Remove the redundant authMiddleware declaration.
The authMiddleware is already fully defined in the authentication example above (lines 775-787). Redeclaring it here with an abbreviated comment creates unnecessary redundancy and may confuse readers.
📝 Suggested improvement
Option 1 (recommended): Remove the redundant declaration entirely since readers can reference the earlier complete example:
-export const authMiddleware = createMiddleware()
- .server(async ({ next, request }) => {
- // ... (implementation from authentication example above)
- })
-
type Permissions = Record<string, string[]>Option 2: If showing the full structure is intentional for a self-contained example, add a comment clarifying this is a reference:
+// Using authMiddleware from the authentication example above
export const authMiddleware = createMiddleware()
.server(async ({ next, request }) => {
- // ... (implementation from authentication example above)
+ const session = await auth.getSession({ headers: request.headers })
+ if (!session) {
+ throw new Error('Unauthorized')
+ }
+ return await next({
+ context: { session },
+ })
})📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const authMiddleware = createMiddleware() | |
| .server(async ({ next, request }) => { | |
| // ... (implementation from authentication example above) | |
| }) |
| export const authMiddleware = createMiddleware() | |
| .server(async ({ next, request }) => { | |
| // ... (implementation from authentication example above) | |
| }) | |
| // Using authMiddleware from the authentication example above | |
| export const authMiddleware = createMiddleware() | |
| .server(async ({ next, request }) => { | |
| const session = await auth.getSession({ headers: request.headers }) | |
| if (!session) { | |
| throw new Error('Unauthorized') | |
| } | |
| return await next({ | |
| context: { session }, | |
| }) | |
| }) |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/start/framework/react/guide/middleware.md` around lines 799 - 802,
Remove the redundant authMiddleware declaration block (the createMiddleware()...
.server async ({ next, request }) stub) since authMiddleware is already fully
defined earlier; locate the authMiddleware symbol and delete this abbreviated
redeclaration, or if you intend it as a self-contained reference instead of
deletion, replace the stub with a clear comment stating "Reference only — full
implementation shown above" so readers aren’t confused.
2 participants
Add Dynamic Middleware Documentation
This PR adds an example to the middleware docs covering the dynamic middleware pattern.
What is dynamic middleware?
Unlike static middlewares, which are created once and reused across routes, dynamic middleware is a function that returns a middleware instance. This allows it to accept parameters at call time and behave differently depending on the context.
What's covered
authMiddlewareas a base, which validates the session and injects it intocontextauthorizationMiddlewarethat accepts apermissionsparameter and validates access against itcreateServerFn, showing how to pass a dynamic middleware instance in the.middleware([])arrayWhy authorization?
Authorization is a common use case for this pattern, as the required permissions vary per server function.
Summary by CodeRabbit