Feature: Comprehensive User Onboarding Flow, Auth Enhancements, and Documentation Reorganization #137
Conversation
WalkthroughAdds centralized Supabase anon/admin clients and an atomic signup flow with admin.create_user and rollback on profile insert failure; returns onboarding status on login. Adds full creator and brand onboarding UIs, storage helpers, new onboarding components, build/runtime checks, and documentation for DB/storage and testing. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant Frontend as Frontend
participant NextAPI as Next.js API
participant Backend as FastAPI Backend
participant Supabase as Supabase
User->>Frontend: Submit Signup Form
Frontend->>NextAPI: POST /api/auth/signup
NextAPI->>Backend: POST /api/auth/signup
Backend->>Supabase: admin.create_user(...)
rect rgb(200,220,255)
Note over Supabase: Admin API creates auth user
end
alt User Creation Success
Supabase-->>Backend: user object (id)
Backend->>Supabase: Insert profile row
rect rgb(220,255,220)
Note over Supabase: Profile insertion
end
alt Profile Insert Success
Backend-->>NextAPI: 200 { user_id }
NextAPI-->>Frontend: 200 { user_id }
else Profile Insert Fails
Backend->>Supabase: admin.delete_user(user_id)
rect rgb(255,220,220)
Note over Supabase: Rollback: auth user deleted
end
Backend-->>NextAPI: 500 Error
NextAPI-->>Frontend: 500 Error
end
else User Creation Fails
Supabase-->>Backend: Error
Backend-->>NextAPI: 400/500 Error
NextAPI-->>Frontend: 400/500 Error
end
sequenceDiagram
participant User as User
participant Frontend as Frontend (Client)
participant Supabase as Supabase
User->>Frontend: Login (email/password)
Frontend->>Supabase: signInWithPassword(...)
Supabase-->>Frontend: Auth session
Frontend->>Supabase: Fetch profile (role, onboarding_completed)
Supabase-->>Frontend: profile data
rect rgb(200,220,255)
Note over Frontend: Check onboarding_completed
end
alt Onboarding Not Complete
Frontend-->>User: Redirect to /creator/onboarding or /brand/onboarding
else Onboarding Complete
Frontend-->>User: Redirect to /creator/home or /brand/home
end
sequenceDiagram
participant User as User
participant OnboardingUI as Onboarding UI
participant Storage as Supabase Storage
participant DB as Database
User->>OnboardingUI: Fill multi-step form
OnboardingUI->>OnboardingUI: Validate per step
alt Image uploaded
OnboardingUI->>Storage: uploadImage(...)
Storage-->>OnboardingUI: Public URL
end
OnboardingUI->>DB: Insert creators/brands row
OnboardingUI->>DB: Update profiles.onboarding_completed = true
alt Success
DB-->>OnboardingUI: Success
OnboardingUI-->>User: Redirect to home
else Failure
DB-->>OnboardingUI: Error
OnboardingUI-->>User: Show error / retry
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~65 minutes Areas requiring extra attention:
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 |
|
@CodeRabbit review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
🧹 Nitpick comments (2)
frontend/components/onboarding/MultiSelect.tsx (1)
52-80: Consider accessibility enhancements.The button implementation is functional, but could benefit from ARIA attributes for better screen reader support:
- Add
role="checkbox"andaria-checked={checked}to communicate selection state- Add
aria-labeloraria-labelledbyto provide context when options are terseExample enhancement:
<button key={option} type="button" + role="checkbox" + aria-checked={checked} + aria-label={`${checked ? 'Deselect' : 'Select'} ${option}`} onClick={() => !disabled && handleToggle(option)}frontend/app/creator/onboarding/page.tsx (1)
245-249: Improve error handling with specific user feedback.The generic alert doesn't provide actionable feedback. Consider showing specific error messages and allowing retry without losing form data.
Apply this diff to improve error UX:
} catch (error: any) { console.error("Onboarding error:", error); - alert("Failed to complete onboarding. Please try again."); + const message = error.message || "Failed to complete onboarding. Please try again."; + alert(message); setIsSubmitting(false); }Additionally, consider using a toast notification library instead of
alert()for better UX.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (18)
backend/app/api/routes/auth.py(5 hunks)backend/app/core/supabase_clients.py(1 hunks)frontend/app/brand/onboarding/page.tsx(1 hunks)frontend/app/creator/onboarding/page.tsx(1 hunks)frontend/app/globals.css(1 hunks)frontend/app/login/page.tsx(2 hunks)frontend/components/onboarding/ImageUpload.tsx(1 hunks)frontend/components/onboarding/MultiSelect.tsx(1 hunks)frontend/components/onboarding/ProgressBar.tsx(1 hunks)frontend/components/onboarding/TypeformQuestion.tsx(1 hunks)frontend/lib/auth-helpers.ts(2 hunks)frontend/lib/storage-helpers.ts(1 hunks)frontend/package.json(1 hunks)frontend/pages/api/auth/signup.ts(1 hunks)guides/summaries/ATOMIC_SIGNUP_IMPLEMENTATION.md(1 hunks)guides/summaries/DATABASE_STORAGE_SETUP.md(1 hunks)guides/summaries/ONBOARDING_IMPLEMENTATION_SUMMARY.md(1 hunks)guides/summaries/ONBOARDING_TESTING_GUIDE.md(1 hunks)
🧰 Additional context used
🪛 LanguageTool
guides/summaries/ONBOARDING_IMPLEMENTATION_SUMMARY.md
[grammar] ~279-~279: Ensure spelling is correct
Context: ...ld be redirected to home page 7. If you logout and login again, you should go directly...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🪛 markdownlint-cli2 (0.18.1)
guides/summaries/ONBOARDING_IMPLEMENTATION_SUMMARY.md
304-304: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
343-343: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🪛 Ruff (0.14.3)
backend/app/api/routes/auth.py
50-50: Use explicit conversion flag
Replace with conversion flag
(RUF010)
65-65: Abstract raise to an inner function
(TRY301)
69-69: Abstract raise to an inner function
(TRY301)
91-91: Abstract raise to an inner function
(TRY301)
136-136: Do not catch blind exception: Exception
(BLE001)
139-139: Within an except clause, raise exceptions with raise ... from err or raise ... from None to distinguish them from errors in exception handling
(B904)
140-140: Within an except clause, raise exceptions with raise ... from err or raise ... from None to distinguish them from errors in exception handling
(B904)
142-142: Abstract raise to an inner function
(TRY301)
🔇 Additional comments (7)
guides/summaries/ATOMIC_SIGNUP_IMPLEMENTATION.md (1)
77-184: Comprehensive testing and deployment guidance.The testing results, rollback mechanism, and production deployment sections are well-documented with practical examples and clear guidance.
frontend/components/onboarding/MultiSelect.tsx (1)
24-34: LGTM! Solid toggle logic with maxSelection enforcement.The toggle handler correctly enforces the maxSelection constraint by only allowing additions when under the limit, while always allowing removals.
frontend/app/login/page.tsx (1)
67-85: LGTM! Clean onboarding-aware routing logic.The two-branch routing structure properly handles both onboarding-incomplete and onboarding-complete scenarios with explicit error handling for invalid roles in both branches.
frontend/app/creator/onboarding/page.tsx (2)
153-165: LGTM! Proper authentication guard with redirect.The useEffect correctly checks for an authenticated user and redirects to login if absent, setting userId for subsequent operations.
253-282: LGTM! Comprehensive step validation logic.The
canGoNextfunction properly validates each step's requirements, including character minimums, required fields, and minimum selections.guides/summaries/ONBOARDING_IMPLEMENTATION_SUMMARY.md (1)
1-391: Excellent comprehensive onboarding documentation.This summary document provides clear, structured documentation of the entire onboarding system with practical examples, testing instructions, and next steps. The file structure, technology stack, and error handling sections are particularly helpful.
backend/app/core/supabase_clients.py (1)
11-14: ✓ Verification Complete: Service Key Security ConfirmedThe service key is properly secured and not exposed:
- ✓ Loaded securely from environment variable via
pydantic_settings.BaseSettings- ✓ Not logged anywhere in the codebase
- ✓ Exception handling does not leak the service key itself
Optional improvement: Consider using generic error messages in HTTP responses instead of stringifying exceptions (lines 50, 89, 100, 140 in auth.py). While the key isn't exposed, this follows defense-in-depth—expose only user-facing error details to clients, keep exception details for server-side logging.
|
@CodeRabbit review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (6)
frontend/app/creator/onboarding/page.tsx (1)
239-253: Rollback logic properly implemented.The profile update failure now triggers creator row deletion with proper error handling for cleanup failures. This addresses the transactional rollback concern from the previous review.
frontend/pages/api/auth/signup.ts (2)
14-21: LGTM!The NEXT_PUBLIC_API_URL validation with HTTPS enforcement at runtime complements the build-time check in next.config.ts. This resolves the environment validation concern from previous reviews.
31-35: LGTM!Error handling now logs details server-side while returning a generic message to the client, preventing information leakage. This resolves the security concern from previous reviews.
guides/summaries/DATABASE_STORAGE_SETUP.md (1)
56-88: Verify brand table schema matches onboarding implementation.The column names appear updated from the previous review (e.g.,
company_description,company_logo_url,target_audience_age_groups,budget_per_campaign_min,campaign_types_interested). However, the brand onboarding page is not in this review batch.Run this script to confirm the brand onboarding code uses the same column names as this schema:
#!/bin/bash # Verify brand onboarding inserts match the documented schema rg -n "\.insert\(" frontend/app/brand/onboarding/page.tsx -A 20 | head -40guides/summaries/ATOMIC_SIGNUP_IMPLEMENTATION.md (1)
73-73: LGTM!The email verification configuration is now clearly documented. Line 73 explains that
email_confirm: falsedisables verification, and line 158 recommends enabling it in production withemail_confirm: trueor omitting the parameter (defaults to true). This resolves the confusion from the previous review.Also applies to: 158-158
backend/app/api/routes/auth.py (1)
78-95: LGTM!The profile insert is now wrapped in a try-except block that triggers rollback (
delete_user) on any failure, addressing the atomic signup concern from the previous review. Rollback errors are also properly handled and surfaced.
🧹 Nitpick comments (3)
frontend/app/creator/onboarding/page.tsx (1)
206-213: Consider cleanup for orphaned uploads on submission failure.If
uploadProfilePicturesucceeds but subsequent database operations fail (lines 216-253), the uploaded image remains in storage. While this is a minor edge case that self-heals on retry, consider adding a comment documenting this behavior or implementing cleanup in the error handler.frontend/BACKEND_ENV_SETUP.md (1)
22-24: Add language identifier to fenced code block.Specify the code block language for better syntax highlighting and tooling support.
Apply this diff:
-``` +```dockerfile ENV NEXT_PUBLIC_API_URL=https://your-production-backend.example.com</blockquote></details> <details> <summary>backend/app/api/routes/auth.py (1)</summary><blockquote> `149-149`: **Consider using anon client for profile fetch in login.** Line 149 uses `supabase_admin` to fetch the user profile. Since the user is already authenticated at this point and RLS policies should permit them to read their own profile, consider using `supabase_anon` instead to follow the principle of least privilege and ensure RLS policies are exercised. Apply this diff: ```diff - profile_res = supabase_admin.table("profiles").select("id, name, role, onboarding_completed").eq("id", user.id).single().execute() + profile_res = supabase_anon.table("profiles").select("id, name, role, onboarding_completed").eq("id", user.id).single().execute()
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
backend/app/api/routes/auth.py(5 hunks)frontend/BACKEND_ENV_SETUP.md(1 hunks)frontend/app/creator/onboarding/page.tsx(1 hunks)frontend/components/onboarding/ImageUpload.tsx(1 hunks)frontend/lib/storage-helpers.ts(1 hunks)frontend/next.config.ts(1 hunks)frontend/pages/api/auth/signup.ts(1 hunks)frontend/vercel.json(1 hunks)guides/summaries/ATOMIC_SIGNUP_IMPLEMENTATION.md(1 hunks)guides/summaries/DATABASE_STORAGE_SETUP.md(1 hunks)guides/summaries/ONBOARDING_IMPLEMENTATION_SUMMARY.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- frontend/lib/storage-helpers.ts
- frontend/components/onboarding/ImageUpload.tsx
🧰 Additional context used
🪛 LanguageTool
guides/summaries/ONBOARDING_IMPLEMENTATION_SUMMARY.md
[grammar] ~279-~279: Ensure spelling is correct
Context: ...ld be redirected to home page 7. If you logout and login again, you should go directly...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🪛 markdownlint-cli2 (0.18.1)
frontend/BACKEND_ENV_SETUP.md
22-22: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🪛 Ruff (0.14.3)
backend/app/api/routes/auth.py
50-50: Use explicit conversion flag
Replace with conversion flag
(RUF010)
65-65: Abstract raise to an inner function
(TRY301)
69-69: Abstract raise to an inner function
(TRY301)
82-82: Abstract raise to an inner function
(TRY301)
82-82: Create your own exception
(TRY002)
82-82: Avoid specifying long messages outside the exception class
(TRY003)
140-140: Do not catch blind exception: Exception
(BLE001)
143-143: Within an except clause, raise exceptions with raise ... from err or raise ... from None to distinguish them from errors in exception handling
(B904)
144-144: Within an except clause, raise exceptions with raise ... from err or raise ... from None to distinguish them from errors in exception handling
(B904)
146-146: Abstract raise to an inner function
(TRY301)
🔇 Additional comments (5)
frontend/next.config.ts (1)
1-7: LGTM!The build-time validation ensures
NEXT_PUBLIC_API_URLis defined and uses HTTPS, preventing deployment with invalid configuration. This addresses the environment validation concerns raised in previous reviews.frontend/vercel.json (1)
3-3: Replace placeholder URLs before production deployment.The example domain
your-production-backend.example.comwill break API calls if deployed as-is. Ensure this value is overridden with your actual backend URL in Vercel's environment settings before deployment.Also applies to: 8-8
⛔ Skipped due to learnings
Learnt from: Saahi30 Repo: AOSSIE-Org/InPactAI PR: 98 File: Frontend/src/pages/CollaborationDetails.tsx:234-234 Timestamp: 2025-07-14T11:45:01.864Z Learning: In frontend-only PRs, hardcoded URLs (like dummy PDF URLs for contracts) and mock data are acceptable and intentional placeholders for UI development, to be replaced during backend integration phase.guides/summaries/ONBOARDING_IMPLEMENTATION_SUMMARY.md (3)
304-307: Code block language specifier is present and correct.The environment variables code block already includes the
envlanguage specifier at line 304, so no further action is needed.
343-363: Code block language specifier is present and correct.The file structure code block already includes the
plaintextlanguage specifier at line 343, so no further action is needed.
1-369: Comprehensive implementation summary with clear structure and actionable guidance.The document provides a well-organized summary of the complete onboarding system, including backend/frontend changes, database schema, storage setup, testing instructions, and next steps. The structure, technical descriptions, and guidance align well with the PR objectives and implementation scope.
|
@CodeRabbit review |
✅ Actions performedReview triggered.
|
📝 Description
This pull request introduces a robust and user-friendly onboarding flow tailored for both brand and creator users. The onboarding process guides new users through essential setup steps, ensuring they provide all necessary information for a personalized experience. For brands, the flow collects brand details and preferences, while for creators, it gathers profile information and content interests. The authentication system has been enhanced with improved helper functions and secure storage management. Additionally, the backend signup process now uses the Supabase admin API to ensure atomic user creation, with rollback mechanisms to maintain data integrity in case of errors.
The documentation has been reorganized for clarity, moving outdated docs and grouping setup and summary guides under a new structure. Global styles and the login page UI have been refreshed for a more modern and cohesive look. Dependencies have been updated, and new pages have been added to support these features.
🔧 Changes Made
Onboarding Flows:
Authentication Enhancements:
Backend Improvements:
UI/UX Updates:
Documentation Reorganization:
guides/summariesfor easier navigation.Dependency and Page Updates:
✅ Checklist
Summary by CodeRabbit
New Features
Bug Fixes / Reliability
Documentation
Chores