16: authentication

[Subham62]

No description provided.

[coderabbitai]

Walkthrough

This PR integrates Clerk authentication into a Next.js application, adds TRPC protected procedures with user-scoped data access, creates authentication UI components (sign-in, sign-up, navbar), updates database migrations to track project ownership via userId, and establishes middleware-based route protection.

Changes

Cohort / File(s)	Change Summary
Dependency Updates & Configuration package.json	Added Clerk packages (@clerk/nextjs, @clerk/themes) and dotenv. Bumped @prisma/client, prisma, and tsx to latest patch versions.
Prisma Configuration & Schema prisma.config.ts, prisma/schema.prisma	Added new prisma.config.ts with environment-driven configuration. Updated schema.prisma: changed generator provider and added userId field to Project model.
Database Migrations prisma/migrations/20250920125629_message_fragment/migration.sql, prisma/migrations/20250923132510_projects/migration.sql, prisma/migrations/20251031061907_user_id/migration.sql	Removed two previous migrations. Added new migration establishing hierarchical schema: Project (with userId), Message, and Fragment tables with cascading foreign keys and enum types.
TRPC Authentication & Context src/trpc/init.ts	Integrated Clerk auth into TRPC context. Added Context type, isAuthed middleware for authentication checks, and protectedProcedure for auth-scoped access.
Protected Data Access Procedures src/modules/projects/server/procedures.ts, src/modules/messages/server/procedures.ts	Converted getOne, getMany, and create procedures to protectedProcedure. Added ctx parameter and user-scoped filtering via userId and ctx.auth.userId. Added ownership validation and error handling.
Authentication Pages src/app/(home)/sign-in/[[...sign-in]]/page.tsx, src/app/(home)/sign-up/[[...sign-up]]/page.tsx	Added client-side Clerk sign-in and sign-up pages with theme-aware appearance and custom styling (border, rounded corners).
Authentication UI Components src/components/user-control.tsx, src/hooks/use-current-theme.ts, src/modules/home/ui/components/navbar.tsx	Added UserControl component for authenticated users, useCurrentTheme hook for theme detection, and Navbar with conditional auth state rendering (sign up/sign in when logged out, UserControl when logged in).
Route Protection & Middleware src/middleware.ts	Added Clerk-based middleware protecting all non-public routes. Public routes: "/", "/sign-in(.)", "/sign-up(.)", "/api(.*)". Applies auth.protect() to remaining routes.
Layout & Page Updates src/app/layout.tsx, src/app/(home)/layout.tsx, src/app/(home)/page.tsx, src/modules/home/ui/components/project-form.tsx, src/modules/home/ui/components/projects-list.tsx, src/modules/projects/ui/views/project-view.tsx	Wrapped RootLayout with ClerkProvider. Added Navbar to home layout. Refactored home page to simplified ProjectForm/ProjectList composition. Updated ProjectForm with Clerk sign-in fallback on UNAUTHORIZED errors. Updated ProjectsList to guard against unauthenticated users and display user's first name. Added UserControl to project view header.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Middleware
    participant Clerk
    participant TRPC Server
    participant Database

    User->>Middleware: Request to protected route
    Middleware->>Clerk: Verify auth token (Clerk middleware)
    alt Authenticated
        Clerk-->>Middleware: User context (auth.userId)
        Middleware->>TRPC Server: Route to TRPC procedure with ctx.auth
        TRPC Server->>TRPC Server: isAuthed middleware checks ctx.auth.userId
        alt Valid user
            TRPC Server->>Database: Query/mutate with userId filter
            Database-->>TRPC Server: User-scoped data
            TRPC Server-->>User: Response
        else No userId
            TRPC Server-->>User: UNAUTHORIZED error
        end
    else Unauthenticated
        Clerk-->>Middleware: No valid session
        Middleware-->>User: Redirect to /sign-in
    end

Loading

sequenceDiagram
    participant User
    participant SignIn/SignUp Page
    participant Clerk
    participant App State
    participant Protected Routes

    User->>SignIn/SignUp Page: Visit /sign-in or /sign-up
    SignIn/SignUp Page->>Clerk: Load Clerk UI component
    User->>Clerk: Enter credentials
    Clerk-->>Clerk: Validate & create session
    Clerk->>App State: Set auth context
    App State->>Protected Routes: Auth context available
    Protected Routes-->>User: Redirect to home or previous page

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

• High-complexity areas requiring careful attention:
  • src/trpc/init.ts: New authentication middleware architecture and Context type integration; verify isAuthed logic and procedure application
  • src/modules/projects/server/procedures.ts & src/modules/messages/server/procedures.ts: User-scoped data access patterns; verify userId filtering is applied consistently across all queries/mutations and that error handling is correct
  • Database migrations (prisma/migrations/20251031061907_user_id/migration.sql): Schema changes establishing new relationships; verify cascading constraints and data integrity assumptions
  • src/middleware.ts: Route protection configuration; verify public route matchers are correct and no unintended routes are exposed or blocked
  • src/app/(home)/page.tsx: Significant refactor removing prior state logic; verify simplified implementation meets all original requirements

Poem

🐰 Clerk and auth now guide the way,
Protected routes keep trolls at bay,
userId tracks each project's own,
Sign-in flows make homes our own!
With hopping code, we've sealed the gate,
Authentication feels so great! ✨

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Free

📥 Commits

Reviewing files that changed from the base of the PR and between 4dce7ce and 4c68d18.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (21)

• package.json (3 hunks)
• prisma.config.ts (1 hunks)
• prisma/migrations/20250920125629_message_fragment/migration.sql (0 hunks)
• prisma/migrations/20250923132510_projects/migration.sql (0 hunks)
• prisma/migrations/20251031061907_user_id/migration.sql (1 hunks)
• prisma/schema.prisma (2 hunks)
• src/app/(home)/layout.tsx (1 hunks)
• src/app/(home)/page.tsx (0 hunks)
• src/app/(home)/sign-in/[[...sign-in]]/page.tsx (1 hunks)
• src/app/(home)/sign-up/[[...sign-up]]/page.tsx (1 hunks)
• src/app/layout.tsx (3 hunks)
• src/components/user-control.tsx (1 hunks)
• src/hooks/use-current-theme.ts (1 hunks)
• src/middleware.ts (1 hunks)
• src/modules/home/ui/components/navbar.tsx (1 hunks)
• src/modules/home/ui/components/project-form.tsx (3 hunks)
• src/modules/home/ui/components/projects-list.tsx (2 hunks)
• src/modules/messages/server/procedures.ts (3 hunks)
• src/modules/projects/server/procedures.ts (1 hunks)
• src/modules/projects/ui/views/project-view.tsx (2 hunks)
• src/trpc/init.ts (1 hunks)

💤 Files with no reviewable changes (3)

• src/app/(home)/page.tsx
• prisma/migrations/20250920125629_message_fragment/migration.sql
• prisma/migrations/20250923132510_projects/migration.sql

---

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

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