feat: add 'use client' directive to bundles for RSC support by gyaneshgouraw-okta · Pull Request #1179 · auth0/auth0-react

gyaneshgouraw-okta · 2026-07-27T15:12:51Z

Summary

Adds React Server Components support so @auth0/auth0-react works with the Next.js App Router. The published ESM and CommonJS bundles now ship a top-level 'use client' directive, letting you import Auth0Provider directly into a Server Component (e.g. app/layout.tsx) without writing a custom 'use client' wrapper. Components that call hooks like useAuth0() are still Client Components, per standard RSC rules.

Changes

Inject a 'use client' directive at the top of the built ESM and CommonJS bundles via Rollup's output.banner (the UMD <script> builds intentionally omit it).
Add a test that asserts the directive is present on the RSC bundles and absent from the UMD bundles, checking the built output rather than source.
Make that test fail-closed in CI (hard error when bundles are missing) while skipping locally when dist/ is not built, so the guarantee can never silently pass.
Wire a dedicated CI job that builds the bundles and runs the directive assertions on every PR.
Add a test:dist script that builds then runs the directive test.
Document App Router usage, including passing an explicit redirect_uri from the Server Component instead of window.location.origin.

Example

// app/layout.tsx — Server Component, no 'use client' wrapper needed
import { Auth0Provider } from '@auth0/auth0-react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Auth0Provider
          domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN as string}
          clientId={process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID as string}
          authorizationParams={{ redirect_uri: process.env.NEXT_PUBLIC_BASE_URL as string }}
        >
          {children}
        </Auth0Provider>
      </body>
    </html>
  );
}

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).
Negative check: removing a banner from the Rollup config and rebuilding makes the corresponding RSC assertion fail.
Fail-closed check: CI=true with no dist/ throws instead of skipping; without CI it skips with a warning.
npm test full unit suite passes (147 tests); npm run lint clean.

Summary by CodeRabbit

New Features
- Preserved the 'use client' directive in distribution bundles used with React Server Components (CJS/ESM).
Documentation
- Expanded guidance on using Auth0Provider with the Next.js App Router, including example placement and client-only hook constraints.
Tests
- Added a distribution-level test that validates 'use client' placement in built artifacts.
Chores
- Introduced a CI check and npm script (test:dist) to run the directive verification during build validation.

coderabbitai · 2026-07-27T15:13:09Z

Note

Reviews paused

It 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 reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 65c84bd1-3a5b-4476-bb04-c15336048dee

📥 Commits

Reviewing files that changed from the base of the PR and between c8baba2 and 458d004.

📒 Files selected for processing (1)

EXAMPLES.md

🚧 Files skipped from review as they are similar to previous changes (1)

EXAMPLES.md

📝 Walkthrough

Walkthrough

Rollup adds 'use client'; to CJS and ESM bundles, with Jest and CI verification. Provider documentation and examples describe Next.js App Router Server Component configuration and Client Component hook usage.

Changes

Client Directive Support

Layer / File(s)	Summary
Bundle client directive injection `rollup.config.mjs`	CJS and ESM outputs receive a `'use client';` banner, while UMD output remains unchanged.
Bundle directive validation `__tests__/use-client-directive.test.tsx`, `package.json`, `.github/workflows/test.yml`	Built bundle assertions run through `test:dist`, with a dedicated CI job validating directive behavior.
Next.js App Router guidance `src/auth0-provider.tsx`, `EXAMPLES.md`	Provider documentation and examples describe Server Component configuration and Client Component hook usage.

Estimated code review effort: 3 (Moderate) | ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: adding a 'use client' directive to bundles for React Server Components support.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch rsc-support-pr

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

coderabbitai

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

📥 Commits

Reviewing files that changed from the base of the PR and between 2a2e930 and 7688362.

📒 Files selected for processing (6)

.github/workflows/test.yml
EXAMPLES.md
__tests__/use-client-directive.test.tsx
package.json
rollup.config.mjs
src/auth0-provider.tsx

… tests

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Gyanesh Gouraw <160731216+gyaneshgouraw-okta@users.noreply.github.com>

feat: add 'use client' directive to bundles for RSC support

c985e9c

gyaneshgouraw-okta requested a review from a team as a code owner July 27, 2026 15:12

Merge branch 'main' into rsc-support-pr

7688362

coderabbitai Bot reviewed Jul 27, 2026

View reviewed changes

Comment thread __tests__/use-client-directive.test.tsx

Comment thread .github/workflows/test.yml

Comment thread EXAMPLES.md Outdated

gyaneshgouraw-okta and others added 4 commits July 27, 2026 21:01

feat: add environment variable to assert 'use client' directive in CI…

82b5c08

… tests

ci: drop needs:build from rsc-directive job

6006a02

Merge branch 'main' into rsc-support-pr

c8baba2

Update EXAMPLES.md

458d004

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Gyanesh Gouraw <160731216+gyaneshgouraw-okta@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add 'use client' directive to bundles for RSC support - #1179

feat: add 'use client' directive to bundles for RSC support#1179
gyaneshgouraw-okta wants to merge 6 commits into
mainfrom
rsc-support-pr

gyaneshgouraw-okta commented Jul 27, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 27, 2026 •

edited

Loading

Reviews paused

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

gyaneshgouraw-okta commented Jul 27, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Example

Testing

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

gyaneshgouraw-okta commented Jul 27, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 27, 2026 •

edited

Loading