feat(onboarding): onboarding modals + global auth-flow wiring#9
Merged
Conversation
Add the post-signup onboarding modals and wire auth triggers to them.
Modals (src/features/onboarding), responsive (full-screen on mobile for
profile setup and role gate):
- ProfileSetupModal: avatar upload + crop, name/bio/location form.
- RoleGateModal ("Complete Sign up"): role toggle, source select, use-case
multi-select.
- CropPhotoModal: circular cropper with drag-to-reposition and zoom.
- New Textarea primitive for the bio field.
Auth-flow orchestration (src/features/auth), mounted globally via Providers:
- AuthFlowProvider exposes useAuthFlow().requireAuth() so any trigger
(buttons, guarded actions) routes to /sign-in or /sign-up with ?redirect.
- OnboardingGate shows role -> profile for signed-in users missing a profile,
remembered per-user in localStorage.
- GetStartedPopup nudges guests on marketing/discover after ~45s, with a
7-day cooldown; never on auth/app/preview routes.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Warning Review limit reached
More reviews will be available in 35 minutes and 34 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more credits in the billing tab to continue. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughThis PR introduces a complete authentication and onboarding user experience. It adds an auth orchestration layer that triggers either unauthenticated marketing popups or authenticated user onboarding, implements multi-step modal flows for collecting profile data and role information with image cropping support, and includes supporting UI components and provider integration. ChangesAuth & Onboarding User Experience Flow
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 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 `@src/components/ui/textarea.tsx`:
- Around line 36-48: The helper text paragraph rendered by the component
(helperText) is not linked to the textarea for screen readers; update the
textarea element to include aria-describedby when helperText is present and give
the <p> helper element a stable id (for example using textareaId + '-helper');
specifically, in the component that renders <textarea ref={ref} id={textareaId}
... {...props} /> add aria-describedby={helperText ? `${textareaId}-helper` :
undefined} (or merge with existing aria-describedby if props includes one) and
set the helper <p> to id={`${textareaId}-helper`} so assistive tech associates
the helper text with the textarea.
In `@src/features/auth/components/auth-flow-provider.tsx`:
- Around line 46-61: The requireAuth callback currently only checks
isAuthenticated and may redirect while the auth hook is still resolving; update
requireAuth (in auth-flow-provider.tsx) to read the auth loading/status flag
from useAuth (e.g., isLoading or status) and short-circuit before performing any
redirect when auth is still loading — do not call router.push or
options.onAuthed while loading; only call options.onAuthed and return true when
isAuthenticated is true and loading is false, and otherwise return a
pending/false result without redirecting until loading completes.
In `@src/features/onboarding/components/avatar-upload.tsx`:
- Around line 33-38: Replace the hand-rolled <button> with the shared shadcn
Button primitive: import and use Button (e.g., from "ui/button" or your Button
export) in the avatar-upload component and keep the existing
props—type="button", onClick={() => inputRef.current?.click()},
aria-label="Upload profile photo"—and the visual classes (pass className as
before). Ensure the Button is rendered where the old <button> was (referencing
inputRef and the onClick handler) so focus/interaction/default variants come
from the shared primitive while preserving the existing size/rounded styling.
In `@src/features/onboarding/components/profile-setup-modal.tsx`:
- Around line 47-55: The modal retains previous avatar and form values across
open/close cycles; add lifecycle reset logic to clear sensitive state when the
modal is closed or reopened by calling form.reset({ firstName: '', lastName: '',
bio: '', location: '' }) and clearing avatar/pendingImage/cropOpen via
setAvatar(null), setPendingImage(null), setCropOpen(false). Implement this in a
useEffect that watches the modal visibility prop (e.g., isOpen) or in the modal
onClose handler so the ProfileSetupValues form (useForm) and the avatar state
are reset at modal boundaries.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: c25409a8-dc49-48d0-8ac0-0824a3a48782
📒 Files selected for processing (12)
src/app/onboarding-preview/page.tsxsrc/components/ui/textarea.tsxsrc/features/auth/components/auth-flow-provider.tsxsrc/features/auth/components/get-started-popup.tsxsrc/features/auth/components/onboarding-gate.tsxsrc/features/auth/index.tssrc/features/onboarding/components/avatar-upload.tsxsrc/features/onboarding/components/crop-photo-modal.tsxsrc/features/onboarding/components/profile-setup-modal.tsxsrc/features/onboarding/components/role-gate-modal.tsxsrc/features/onboarding/index.tssrc/providers/index.tsx
- Textarea: link helper text to the control via aria-describedby (stable id), merging any consumer-provided value. - requireAuth: short-circuit while the session is still resolving (isPending) so an authed user is never redirected to sign-in on a race. - ProfileSetupModal: reset form values and avatar/crop state on close so reopening never shows a previous session's data. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the hand-rolled <button> in AvatarUpload with the shared Button (intent=secondary, appearance=text) so focus/interaction come from the design system, while preserving the circular avatar layout (size-16, rounded-full, no padding, primary focus ring). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
1 participant
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.
Add the post-signup onboarding modals and wire auth triggers to them.
Modals (src/features/onboarding), responsive (full-screen on mobile for profile setup and role gate):
Auth-flow orchestration (src/features/auth), mounted globally via Providers:
Summary by CodeRabbit
New Features
Improvements