Support Content-Security-Policy (CSP) nonces in SDKs' injected styles - #59
Merged
Merged
Conversation
|
Warning Review limit reached
Next review available in: 14 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (79)
📝 WalkthroughWalkthroughThe PR adds shared Emotion utilities with CSP nonce support, wires nonce configuration into React and Vue, migrates React styling imports to the shared module, replaces selected inline styles with generated classes, and updates spinner sizing. ChangesShared Emotion and CSP support
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant ReactApp
participant ThunderIDProvider
participant SharedEmotion
participant EmotionStyleTag
ReactApp->>ThunderIDProvider: render with cspNonce
ThunderIDProvider->>SharedEmotion: configureEmotionNonce(cspNonce)
SharedEmotion->>EmotionStyleTag: insert generated CSS with nonce
ReactApp->>SharedEmotion: create component classes
SharedEmotion->>EmotionStyleTag: add component rules
sequenceDiagram
participant VueApp
participant ThunderIDPlugin
participant injectStyles
participant StyleElement
VueApp->>ThunderIDPlugin: install with cspNonce
ThunderIDPlugin->>injectStyles: pass vendor and nonce
injectStyles->>StyleElement: create or reuse injected style
injectStyles->>StyleElement: assign nonce when provided
Possibly related PRs
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 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 |
brionmario
changed the title
![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
🧹 Nitpick comments (1)
packages/react/src/components/primitives/Spinner/Spinner.tsx (1)
41-45: 🗄️ Data Integrity & Integration | 🔵 Trivial | 💤 Low valueDocument the
Spinnerpublic API migration.No repository consumer passes
Spinnerastyleprop, but the prop is removed fromSpinnerPropsand is not forwarded. Document that callers should usewidthOverridefor custom dimensions, sincespinnerCustomSizealready sets both width and height and overrides size-based styles.🤖 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 `@packages/react/src/components/primitives/Spinner/Spinner.tsx` around lines 41 - 45, Update the public API documentation for SpinnerProps to state that callers should use widthOverride instead of the removed style prop for custom dimensions. Clarify that spinnerCustomSize already sets both width and height and takes precedence over size-based styles, anchoring the change to SpinnerProps and the widthOverride documentation.
🤖 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 `@packages/react/src/styles/emotion.ts`:
- Line 27: Update the Emotion cache setup around EMOTION_CACHE_KEY to derive the
key with getVendorPrefix(vendor) from the configured ThunderIDReactConfig
instead of hardcoding “thunderid”. Pass the vendor into the module as needed,
while ensuring Emotion re-initialization remains triggered only by nonce
changes.
---
Nitpick comments:
In `@packages/react/src/components/primitives/Spinner/Spinner.tsx`:
- Around line 41-45: Update the public API documentation for SpinnerProps to
state that callers should use widthOverride instead of the removed style prop
for custom dimensions. Clarify that spinnerCustomSize already sets both width
and height and takes precedence over size-based styles, anchoring the change to
SpinnerProps and the widthOverride documentation.
🪄 Autofix
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: d08ee384-f24a-4718-b0d2-c4ca6d238a62
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (79)
packages/react/src/components/actions/SignInButton/BaseSignInButton.tsxpackages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsxpackages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsxpackages/react/src/components/adapters/Consent.tsxpackages/react/src/components/adapters/ConsentCheckboxList.styles.tspackages/react/src/components/adapters/ConsentCheckboxList.tsxpackages/react/src/components/adapters/ImageComponent.tsxpackages/react/src/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.styles.tspackages/react/src/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.tsxpackages/react/src/components/presentation/UserDropdown/BaseUserDropdown.styles.tspackages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsxpackages/react/src/components/presentation/UserProfile/BaseUserProfile.styles.tspackages/react/src/components/presentation/UserProfile/BaseUserProfile.tsxpackages/react/src/components/presentation/auth/AcceptInvite/BaseAcceptInvite.styles.tspackages/react/src/components/presentation/auth/AcceptInvite/BaseAcceptInvite.tsxpackages/react/src/components/presentation/auth/AuthOptionFactory.tsxpackages/react/src/components/presentation/auth/InviteUser/BaseInviteUser.styles.tspackages/react/src/components/presentation/auth/InviteUser/BaseInviteUser.tsxpackages/react/src/components/presentation/auth/Recovery/BaseRecovery.tsxpackages/react/src/components/presentation/auth/SignIn/BaseSignIn.styles.tspackages/react/src/components/presentation/auth/SignIn/BaseSignIn.tsxpackages/react/src/components/presentation/auth/SignUp/BaseSignUp.styles.tspackages/react/src/components/presentation/auth/SignUp/BaseSignUp.tsxpackages/react/src/components/presentation/auth/__tests__/AuthOptionFactory.test.tsxpackages/react/src/components/primitives/AffixedField/AffixedField.styles.tspackages/react/src/components/primitives/AffixedField/AffixedField.tsxpackages/react/src/components/primitives/Alert/Alert.styles.tspackages/react/src/components/primitives/Alert/Alert.tsxpackages/react/src/components/primitives/Avatar/Avatar.styles.tspackages/react/src/components/primitives/Avatar/Avatar.tsxpackages/react/src/components/primitives/Button/Button.styles.tspackages/react/src/components/primitives/Button/Button.tsxpackages/react/src/components/primitives/Card/Card.styles.tspackages/react/src/components/primitives/Card/Card.tsxpackages/react/src/components/primitives/Checkbox/Checkbox.styles.tspackages/react/src/components/primitives/Checkbox/Checkbox.tsxpackages/react/src/components/primitives/CopyableText/CopyableText.styles.tspackages/react/src/components/primitives/DatePicker/DatePicker.styles.tspackages/react/src/components/primitives/DatePicker/DatePicker.tsxpackages/react/src/components/primitives/Dialog/Dialog.styles.tspackages/react/src/components/primitives/Dialog/Dialog.tsxpackages/react/src/components/primitives/Divider/Divider.styles.tspackages/react/src/components/primitives/Divider/Divider.tsxpackages/react/src/components/primitives/FormControl/FormControl.styles.tspackages/react/src/components/primitives/FormControl/FormControl.tsxpackages/react/src/components/primitives/InputLabel/InputLabel.styles.tspackages/react/src/components/primitives/InputLabel/InputLabel.tsxpackages/react/src/components/primitives/KeyValueInput/KeyValueInput.styles.tspackages/react/src/components/primitives/KeyValueInput/KeyValueInput.tsxpackages/react/src/components/primitives/Logo/Logo.styles.tspackages/react/src/components/primitives/Logo/Logo.tsxpackages/react/src/components/primitives/MultiInput/MultiInput.styles.tspackages/react/src/components/primitives/MultiInput/MultiInput.tsxpackages/react/src/components/primitives/OtpField/OtpField.styles.tspackages/react/src/components/primitives/OtpField/OtpField.tsxpackages/react/src/components/primitives/PasswordField/PasswordField.styles.tspackages/react/src/components/primitives/PasswordField/PasswordField.tsxpackages/react/src/components/primitives/Select/Select.styles.tspackages/react/src/components/primitives/Select/Select.tsxpackages/react/src/components/primitives/Spinner/Spinner.styles.tspackages/react/src/components/primitives/Spinner/Spinner.tsxpackages/react/src/components/primitives/TextField/TextField.styles.tspackages/react/src/components/primitives/TextField/TextField.tsxpackages/react/src/components/primitives/Toggle/Toggle.styles.tspackages/react/src/components/primitives/Toggle/Toggle.tsxpackages/react/src/components/primitives/Tooltip/Tooltip.styles.tspackages/react/src/components/primitives/Tooltip/Tooltip.tsxpackages/react/src/components/primitives/Typography/Typography.styles.tspackages/react/src/components/primitives/Typography/Typography.tsxpackages/react/src/contexts/ThunderID/ThunderIDProvider.tsxpackages/react/src/contexts/ThunderID/__tests__/ThunderIDProvider.test.tsxpackages/react/src/models/config.tspackages/react/src/styles/__tests__/emotion.test.tspackages/react/src/styles/emotion.tspackages/vue/package.jsonpackages/vue/src/__tests__/plugins/ThunderIDPlugin.test.tspackages/vue/src/plugins/ThunderIDPlugin.tspackages/vue/src/styles/__tests__/injectStyles.test.tspackages/vue/src/styles/injectStyles.ts
rajithacharith
previously approved these changes
Aug 6, 2026
brionmario
force-pushed
the
flexible-vendor-config
branch
2 times, most recently
from
August 6, 2026 18:15
d7e76ba to
21acbc3
Compare
- Updated emotion styles imports across multiple components to use a centralized emotion module. - Introduced `configureEmotionNonce` function to set CSP nonce for injected styles, ensuring compliance with strict Content-Security-Policy. - Modified `ThunderIDProvider` and `ThunderIDPlugin` to accept and forward `cspNonce` option. - Enhanced tests to verify correct behavior of nonce configuration and style injection. - Added new tests for emotion utilities to ensure proper functionality with and without nonce.
brionmario
force-pushed
the
flexible-vendor-config
branch
from
August 6, 2026 18:26
21acbc3 to
85a036f
Compare
rajithacharith
approved these changes
Aug 6, 2026
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
2 participants
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.
Purpose
configureEmotionNoncefunction to set CSP nonce for injected styles, ensuring compliance with strict Content-Security-Policy.ThunderIDProviderandThunderIDPluginto accept and forwardcspNonceoption.Approach
Related Issues
Related PRs
Checklist
breaking changelabel added.Security checks
Summary by CodeRabbit
New Features
Style
Tests