feat: add 'use client' directive to bundles for RSC support - #1179
feat: add 'use client' directive to bundles for RSC support#1179gyaneshgouraw-okta wants to merge 4 commits into
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
📝 WalkthroughWalkthroughRollup adds ChangesClient Directive Support
Estimated code review effort: 3 (Moderate) | ~20 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@__tests__/use-client-directive.test.tsx`:
- Around line 54-60: Replace the generic process.env.CI guard in the
missing-bundle check of use-client-directive.test.tsx with an explicit
directive-verification environment flag. In .github/workflows/test.yml lines
86-87, set that flag only on the rsc-directive npm run test:dist step; leave the
unit job unchanged.
In @.github/workflows/test.yml:
- Around line 74-75: Update the actions/checkout step in the workflow to disable
persisted credentials by setting persist-credentials to false, ensuring the
checkout token is not retained for later project-controlled steps.
In `@EXAMPLES.md`:
- Line 497: Update the Server Components guidance in EXAMPLES.md to specifically
state that useAuth0() must be called from a Client Component because it depends
on Auth0 context and browser APIs. Remove the broad claim that any hook call
requires a Client Component, while preserving the instruction to use 'use
client' for components invoking useAuth0().
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: f68b6605-f252-475a-9691-994e43e04f29
📒 Files selected for processing (6)
.github/workflows/test.ymlEXAMPLES.md__tests__/use-client-directive.test.tsxpackage.jsonrollup.config.mjssrc/auth0-provider.tsx
| - name: Checkout code | ||
| uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 |
There was a problem hiding this comment.
🔒 Security & Privacy | 🟡 Minor | ⚡ Quick win
Do not persist the checkout token.
No later step needs Git credentials, but npm ci can run project-controlled lifecycle scripts. Disable persisted credentials for this new job.
Proposed fix
- name: Checkout code
uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+ with:
+ persist-credentials: false📝 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.
| - name: Checkout code | |
| uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 | |
| - name: Checkout code | |
| uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 | |
| with: | |
| persist-credentials: false |
🧰 Tools
🪛 zizmor (1.26.1)
[warning] 74-75: credential persistence through GitHub Actions artifacts (artipacked): does not set persist-credentials: false
(artipacked)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.github/workflows/test.yml around lines 74 - 75, Update the actions/checkout
step in the workflow to disable persisted credentials by setting
persist-credentials to false, ensuring the checkout token is not retained for
later project-controlled steps.
Source: Linters/SAST tools
| } | ||
| ``` | ||
|
|
||
| Any component that **calls** a hook such as `useAuth0()` runs on the client, so that component must be a Client Component. This is a standard React Server Components rule (hooks cannot execute during server render), not something the SDK can remove: mark the file with `'use client'`. |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "=== Locate EXAMPLES.md ==="
fd -a '^EXAMPLES\.md$' . || true
echo "=== Relevant lines around 497 ==="
if [ -f EXAMPLES.md ]; then
sed -n '470,515p' EXAMPLES.md | nl -ba -v470
else
fd -a '^EXAMPLES\.md$' . -x sh -c 'echo "--- $1"; sed -n "470,515p" "$1" | nl -ba -v470' sh {}
fi
echo "=== Nearby useAuth0/useAuth docs ==="
rg -n "useAuth0|useAuth|Server Components|Client Component|hook|hooks" EXAMPLES.md || trueRepository: auth0/auth0-react
Length of output: 287
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "=== EXAMPLES.md around line 497 ==="
sed -n '485,505p' EXAMPLES.md
echo "=== Hooks/auth-related nearby docs ==="
python3 - <<'PY'
from pathlib import Path
p = Path('EXAMPLES.md')
text = p.read_text()
lines = text.splitlines()
for i, line in enumerate(lines, 1):
low = line.lower()
if any(k in low for k in ('useauth0', 'use auth0', 'server components', 'client component', 'hooks cannot', 'hooks cannot execute')):
print(f"{i:04d}: {line}")
PYRepository: auth0/auth0-react
Length of output: 5236
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "=== Section title and surrounding example ==="
sed -n '458,528p' EXAMPLES.md
echo "=== All occurrences of '(hooks cannot|standard React Server Components rule)' ==="
python3 - <<'PY'
from pathlib import Path
for i, line in enumerate(Path('EXAMPLES.md').read_text().splitlines(), 1):
if 'standard React Server Components rule' in line or 'hooks cannot execute during server render' in line:
print(f'{i}: {line}')
PYRepository: auth0/auth0-react
Length of output: 3200
Narrow the Server Components hook statement.
useAuth0() needs to run in a Client Component because it reads the Auth0 context/browser APIs, but React Server Components can still use certain hooks like useId. Avoid calling hooks generally unsupported during server rendering.
Suggested wording
-This is a standard React Server Components rule (hooks cannot execute during server render), not something the SDK can remove: mark the file with `'use client'`.
+Because `useAuth0()` reads the client-side Auth0 context, the component that calls it must be marked with `'use client'`.📝 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.
| Any component that **calls** a hook such as `useAuth0()` runs on the client, so that component must be a Client Component. This is a standard React Server Components rule (hooks cannot execute during server render), not something the SDK can remove: mark the file with `'use client'`. | |
| Any component that **calls** a hook such as `useAuth0()` runs on the client, so that component must be a Client Component. Because `useAuth0()` reads the client-side Auth0 context, the component that calls it must be marked with `'use client'`. |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@EXAMPLES.md` at line 497, Update the Server Components guidance in
EXAMPLES.md to specifically state that useAuth0() must be called from a Client
Component because it depends on Auth0 context and browser APIs. Remove the broad
claim that any hook call requires a Client Component, while preserving the
instruction to use 'use client' for components invoking useAuth0().
1 participant
Summary
Adds React Server Components support so
@auth0/auth0-reactworks with the Next.js App Router. The published ESM and CommonJS bundles now ship a top-level'use client'directive, letting you importAuth0Providerdirectly into a Server Component (e.g.app/layout.tsx) without writing a custom'use client'wrapper. Components that call hooks likeuseAuth0()are still Client Components, per standard RSC rules.Changes
'use client'directive at the top of the built ESM and CommonJS bundles via Rollup'soutput.banner(the UMD<script>builds intentionally omit it).dist/is not built, so the guarantee can never silently pass.test:distscript that builds then runs the directive test.redirect_urifrom the Server Component instead ofwindow.location.origin.Example
Testing
npm run test:dist— builds the bundles and runs the directive suite (4 passing: 2 RSC bundles carry the directive, 2 UMD bundles don't).bannerfrom the Rollup config and rebuilding makes the corresponding RSC assertion fail.CI=truewith nodist/throws instead of skipping; withoutCIit skips with a warning.npm testfull unit suite passes (147 tests);npm run lintclean.Summary by CodeRabbit
'use client'directive is preserved in supported distribution bundle formats.Auth0Providerin App Router Server Components while keeping hook consumers as Client Components.'use client'placement in built artifacts.