feat: integrate Clerk for authentication and update layout components - #2
Merged
Merged
Conversation
ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Free Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (14)
📝 WalkthroughWalkthroughThis PR integrates Clerk authentication into the AetherLive application. It adds Clerk sign-in and sign-up pages, protects routes via middleware, integrates Clerk identity with Convex on the frontend, and enforces authentication in backend Convex mutations. ChangesClerk Authentication Integration with Convex Backend
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
Note 🎁 Summarized by CodeRabbit FreeYour 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 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces Clerk-based authentication to the apps/web Next.js app and wires it into Convex, alongside related backend Convex auth configuration and TypeScript config updates.
Changes:
- Add Clerk to
apps/web, wrap the app withClerkProvider, and add Sign In/Sign Up routes. - Switch the web client to
ConvexProviderWithClerkand add an auth check in the backendusers.addmutation. - Update workspace lockfile and TypeScript configuration (including Node types) to support the new dependencies.
Reviewed changes
Copilot reviewed 14 out of 15 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Adds Clerk packages and related transitive dependencies to the workspace lockfile. |
| packages/backend/tsconfig.json | Adjusts TS compiler options (incl. ignoreDeprecations) and formatting. |
| packages/backend/package.json | Adds @types/node to backend devDependencies. |
| packages/backend/convex/users.ts | Adds an authentication check before inserting a user. |
| packages/backend/convex/tsconfig.json | Adds Node types for Convex TS compilation. |
| packages/backend/convex/auth.config.ts | Introduces Convex auth provider configuration for Clerk. |
| apps/widget/tsconfig.json | Updates ignoreDeprecations value. |
| apps/web/proxy.ts | Adds Clerk middleware implementation (but currently not in a middleware.ts file). |
| apps/web/package.json | Adds @clerk/nextjs dependency to the web app. |
| apps/web/components/theme-provider.tsx | Switches to ConvexProviderWithClerk and adds env var validation for Convex URL. |
| apps/web/app/page.tsx | Adds authenticated/unauthenticated UI with Clerk components. |
| apps/web/app/layout.tsx | Wraps the app with ClerkProvider. |
| apps/web/app/(auth)/sign-up/[[...sign-up]]/page.tsx | Adds Clerk-hosted sign-up page route. |
| apps/web/app/(auth)/sign-in/[[...sign-in]]/page.tsx | Adds Clerk-hosted sign-in page route. |
| apps/web/app/(auth)/layout.tsx | Adds a centered layout wrapper for auth routes. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+1
to
+3
| import { clerkMiddleware,createRouteMatcher } from '@clerk/nextjs/server' | ||
|
|
||
| const isPublicRoute = createRouteMatcher([ |
Comment on lines
+10
to
+16
| const { userId } = await auth(); | ||
| if (!isPublicRoute(req)) { | ||
| await auth.protect(); | ||
| if (!userId) { | ||
| throw new Error("Not authenticated"); | ||
| } | ||
| } |
Comment on lines
+4
to
+8
| import { ClerkProvider } from "@clerk/nextjs" | ||
| import { ThemeProvider as NextThemesProvider } from "next-themes" | ||
| import { ConvexProvider, ConvexReactClient } from "convex/react" | ||
| import { ConvexReactClient } from "convex/react" | ||
| import { ConvexProviderWithClerk} from "convex/react-clerk" | ||
| import {useAuth} from "@clerk/nextjs" |
Comment on lines
+1
to
+14
| import { AuthConfig } from "convex/server"; | ||
|
|
||
| export default { | ||
| providers: [ | ||
| { | ||
| // Replace with your Clerk Frontend API URL | ||
| // or with `process.env.CLERK_JWT_ISSUER_DOMAIN` | ||
| // and configure CLERK_JWT_ISSUER_DOMAIN on the Convex Dashboard | ||
| // See https://docs.convex.dev/auth/clerk#configuring-dev-and-prod-instances | ||
| domain: process.env.CLERK_JWT_ISSUER_DOMAIN!, | ||
| applicationID: "convex", | ||
| }, | ||
| ] | ||
| } satisfies AuthConfig; |
Comment on lines
+27
to
+30
| // function Content() { | ||
| // const messages = useQuery(api.messages.getForCurrentUser); | ||
| // return <div>Authenticated content: {messages?.length}</div>; | ||
| // } No newline at end of file |
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
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.
Summary by CodeRabbit