03: clerk authentication

[harshshukla2807]

Summary by CodeRabbit

• New Features

  • Added user authentication with sign-in and sign-up pages
  • User profile button now displays for authenticated users
  • Protected user management features (adding users requires authentication)
  • Added test page

• Chores

  • Updated styling for full-height layout
  • Added authentication dependencies

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This change integrates Clerk authentication into a Next.js application backed by Convex, adding auth middleware, protected routes, user-facing sign-in/sign-up pages, and backend authentication verification. Clerk provider and JWT validation are wired throughout the app stack.

Changes

Cohort / File(s)	Summary
Auth Pages & Routing apps/web/app/(auth)/layout.tsx, apps/web/app/(auth)/sign-in/[[...sign-in]]/page.tsx, apps/web/app/(auth)/sign-up/[[...sign-up]]/page.tsx, apps/web/middleware.ts	Introduces auth route structure with centered layout component, Clerk SignIn/SignUp page components, and middleware that protects routes via auth.protect().
App Root & Providers apps/web/app/layout.tsx, apps/web/components/providers.tsx	Wraps the app root with ClerkProvider and replaces ConvexProvider with ConvexProviderWithClerk, enabling Clerk-Convex integration and adds runtime validation for missing Convex URL.
App Pages & Features apps/web/app/page.tsx, apps/web/app/test/page.tsx	Updates main page to conditionally render authenticated vs. unauthenticated UI with UserButton and SignInButton from Clerk; adds a test page.
Backend Auth & Data packages/backend/convex/auth.config.ts, packages/backend/convex/users.ts	Adds Convex auth config for Clerk JWT validation; protects the add mutation by requiring authenticated identity and rejecting unauthenticated requests.
Dependencies & Configuration apps/web/package.json, packages/backend/package.json, packages/backend/convex/tsconfig.json, packages/ui/src/styles/globals.css	Adds @clerk/nextjs to web app, @types/node to backend devDependencies, Node.js types to Convex tsconfig, and full-height styling for html/body.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• 02: convex package #1: Modifies the same Providers component wiring, Convex backend user endpoints, and auth configuration that this PR extends with Clerk integration.

Poem

🐰 A rabbit hops through auth's new gate,
Clerk and Convex now integrate!
Protected routes and UserButton shine,
JWT tokens in perfect line. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'clerk authentication' directly corresponds to the main objective of this PR, which adds Clerk authentication to the web app.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 03-clerk-authentication

---

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