feat(create): add Descope auth add-on for React#483
Conversation
|
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 (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis PR adds a Descope authentication add-on for the React framework generator. It registers the add-on manifest, provider, header user menu, demo route, dependency, local environment placeholder, setup documentation, and changeset entry. ChangesDescope Add-on Implementation
Estimated code review effort: 2 (Simple) | ~15 minutes Suggested reviewers: 🚥 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 |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Warning Review the following alerts detected in dependencies. According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.
|
![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
🧹 Nitpick comments (3)
packages/create/src/frameworks/react/add-ons/descope/assets/src/routes/demo/descope.tsx (2)
44-55: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueDuplicated "Built with DESCOPE" link markup.
The same anchor block appears in both
SignedOut(lines 44-55) andSignedInGreeting(lines 93-104). Extract a small shared component to keep them in sync.♻️ Suggested extraction
+function DescopeAttribution() { + return ( + <p className="demo-muted text-center text-xs"> + Built with{' '} + <a + href="https://descope.com" + target="_blank" + rel="noopener noreferrer" + className="font-medium" + > + DESCOPE + </a> + . + </p> + ) +}Then replace both occurrences with
<DescopeAttribution />(prepending "Sign out from the avatar in the header. " before it inSignedInGreeting).Also applies to: 93-104
🤖 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/create/src/frameworks/react/add-ons/descope/assets/src/routes/demo/descope.tsx` around lines 44 - 55, The “Built with DESCOPE” anchor markup is duplicated in both SignedOut and SignedInGreeting, so extract it into a shared DescopeAttribution component in descope.tsx and replace both inline blocks with that component. Keep the shared link markup identical in both places, and in SignedInGreeting prepend the existing “Sign out from the avatar in the header.” text before DescopeAttribution so both views stay consistent.
38-42: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low valueHardcoded
theme="light"ignores dark mode.The rest of the add-on (header-user, SignedInGreeting) uses
dark:Tailwind variants, indicating the app supports dark mode. The<Descope>widget is fixed totheme="light"and won't adapt. Consider detecting the user's color scheme and passing it dynamically, or at minimum documenting this limitation.// If the SDK supports a "theme" prop that accepts "auto" or a dynamic value: <Descope flowId="sign-up-or-in" theme={document.documentElement.classList.contains('dark') ? 'dark' : 'light'} onError={(err) => console.error('Descope flow error', err)} />🤖 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/create/src/frameworks/react/add-ons/descope/assets/src/routes/demo/descope.tsx` around lines 38 - 42, The Descope widget is hardcoded to a light theme, so it won’t follow the app’s dark-mode support. Update the <Descope> usage in the demo route to pass a dynamic theme value based on the current color scheme (or the SDK’s auto mode if available), and keep the existing onError handling unchanged. Use the <Descope> component and its theme prop as the main touchpoints when making the change.packages/create/src/frameworks/react/add-ons/descope/README.md (1)
26-33: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
RedirectToSignInis illustrative pseudocode.The
RedirectToSignIncomponent in the route-protection example doesn't exist in the codebase. Consider adding a comment noting this is a placeholder the user must implement, or replace it with a TanStack Router redirect for accuracy.- if (!isAuthenticated) return <RedirectToSignIn /> + // Replace with your own redirect, e.g. `navigate({ to: '/demo/descope' })` + if (!isAuthenticated) return <Navigate to="/demo/descope" />🤖 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/create/src/frameworks/react/add-ons/descope/README.md` around lines 26 - 33, The route-protection example in the Descope README uses a non-existent RedirectToSignIn component, so update the example to avoid implying it is available. In the ProtectedPage snippet, either add an inline note that RedirectToSignIn is placeholder pseudocode the user must implement, or replace it with the actual TanStack Router redirect pattern. Keep the guidance tied to ProtectedPage and RedirectToSignIn so readers understand what must be changed.
🤖 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/create/src/frameworks/react/add-ons/descope/assets/src/integrations/descope/header-user.tsx`:
- Around line 24-30: The Sign out click handler in header-user.tsx ignores the
Promise returned by sdk.logout(), so logout failures can become unhandled
rejections. Update the onClick path around sdk.logout() to await it or attach a
catch, and surface a visible fallback or error state from this component so
failures are handled cleanly.
- Around line 8-11: The avatar initial in header-user.tsx is rendered before the
user profile has finished loading, which can show the fallback too early. Update
the HeaderUser component to also guard on isUserLoading alongside
isSessionLoading and isAuthenticated, and only compute/render the initial after
user loading completes so the `useUser()` data is available before using
`user?.name` or `user?.email`.
In `@packages/create/src/frameworks/react/add-ons/descope/README.md`:
- Line 16: The README description for the Descope header user menu is inaccurate
because `header-user.tsx` does not render a “Sign in” link when unauthenticated.
Update the documentation text for the `header-user` integration so it matches
the actual `HeaderUser` behavior: it returns nothing when `!isAuthenticated` and
only shows the avatar and “Sign out” state when signed in.
---
Nitpick comments:
In
`@packages/create/src/frameworks/react/add-ons/descope/assets/src/routes/demo/descope.tsx`:
- Around line 44-55: The “Built with DESCOPE” anchor markup is duplicated in
both SignedOut and SignedInGreeting, so extract it into a shared
DescopeAttribution component in descope.tsx and replace both inline blocks with
that component. Keep the shared link markup identical in both places, and in
SignedInGreeting prepend the existing “Sign out from the avatar in the header.”
text before DescopeAttribution so both views stay consistent.
- Around line 38-42: The Descope widget is hardcoded to a light theme, so it
won’t follow the app’s dark-mode support. Update the <Descope> usage in the demo
route to pass a dynamic theme value based on the current color scheme (or the
SDK’s auto mode if available), and keep the existing onError handling unchanged.
Use the <Descope> component and its theme prop as the main touchpoints when
making the change.
In `@packages/create/src/frameworks/react/add-ons/descope/README.md`:
- Around line 26-33: The route-protection example in the Descope README uses a
non-existent RedirectToSignIn component, so update the example to avoid implying
it is available. In the ProtectedPage snippet, either add an inline note that
RedirectToSignIn is placeholder pseudocode the user must implement, or replace
it with the actual TanStack Router redirect pattern. Keep the guidance tied to
ProtectedPage and RedirectToSignIn so readers understand what must be changed.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 6579b9d0-eeb2-449f-9297-ccc8b61e9a68
⛔ Files ignored due to path filters (2)
packages/create/src/frameworks/react/add-ons/descope/logo.svgis excluded by!**/*.svgpackages/create/src/frameworks/react/add-ons/descope/small-logo.svgis excluded by!**/*.svg
📒 Files selected for processing (8)
.changeset/descope-auth-addon.mdpackages/create/src/frameworks/react/add-ons/descope/README.mdpackages/create/src/frameworks/react/add-ons/descope/assets/_dot_env.local.appendpackages/create/src/frameworks/react/add-ons/descope/assets/src/integrations/descope/header-user.tsxpackages/create/src/frameworks/react/add-ons/descope/assets/src/integrations/descope/provider.tsxpackages/create/src/frameworks/react/add-ons/descope/assets/src/routes/demo/descope.tsxpackages/create/src/frameworks/react/add-ons/descope/info.jsonpackages/create/src/frameworks/react/add-ons/descope/package.json
- Gate header avatar on isUserLoading to avoid initial fallback flash - Handle sdk.logout() promise rejection - Fix README to match header-user behavior (no sign-in link) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 participant
Adds Descope as a managed authentication add-on for the React framework, alongside the existing Clerk and WorkOS options. Selecting it wires Descope auth into a generated TanStack Start app end-to-end.
What's included
<AuthProvider>(@descope/react-sdk) wrapped at the app root viaVITE_DESCOPE_PROJECT_IDuseSession/useUser/useDescope); renders nothing when signed out/demo/descoperendering thesign-up-or-inflow plus a signed-in greetingcategory: "auth"andexclusive: ["auth"]README.md(setup, route protection, production checklist) and.env.localentry@tanstack/create, minor)Summary by CodeRabbit
/demo/descopedemo route showing the sign-up/sign-in flow and a signed-in welcome state.