RISHII7 · RISHII7 · Jun 30, 2026 · Jun 30, 2026
@@ -87,6 +87,7 @@ jobs:
         run: pnpm build
         env:
           NEXT_PUBLIC_CONVEX_URL: https://terrific-llama-923.convex.cloud
+          NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ vars.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
 
       - name: Upload build artifacts
         uses: actions/upload-artifact@v4

@@ -55,6 +55,7 @@ jobs:
         run: pnpm build
         env:
           NEXT_PUBLIC_CONVEX_URL: https://terrific-llama-923.convex.cloud
+          NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ vars.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
 
       - name: Perform CodeQL Analysis
         uses: github/codeql-action/analyze@v3

@@ -79,6 +79,7 @@ jobs:
         run: pnpm build
         env:
           NEXT_PUBLIC_CONVEX_URL: https://terrific-llama-923.convex.cloud
+          NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ vars.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
 
   release:
     name: Create GitHub Release

@@ -0,0 +1,9 @@
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="flex h-full min-h-screen min-w-screen flex-col items-center justify-center">
+      {children}
+    </div>
+  )
+}
+
+export default Layout
@@ -0,0 +1,7 @@
+import { SignIn } from "@clerk/nextjs"
+
+const Page = () => {
+  return <SignIn />
+}
+
+export default Page
@@ -0,0 +1,7 @@
+import { SignUp } from "@clerk/nextjs"
+
+const Page = () => {
+  return <SignUp />
+}
+
+export default Page
@@ -1,9 +1,12 @@
+import { ClerkProvider } from "@clerk/nextjs"
 import { Geist, Geist_Mono } from "next/font/google"
 
-import "@workspace/ui/globals.css"
-import { ThemeProvider } from "@/components/theme-provider"
 import { cn } from "@workspace/ui/lib/utils"
 
+import { ThemeProvider } from "@/components/theme-provider"
+
+import "@workspace/ui/globals.css"
+
 const geist = Geist({ subsets: ["latin"], variable: "--font-sans" })
 
 const fontMono = Geist_Mono({
@@ -28,7 +31,9 @@ export default function RootLayout({
       )}
     >
       <body>
-        <ThemeProvider>{children}</ThemeProvider>
+        <ClerkProvider>
+          <ThemeProvider>{children}</ThemeProvider>
+        </ClerkProvider>
       </body>
     </html>
   )

@@ -1,19 +1,34 @@
 "use client"
 
-import { useMutation, useQuery } from "convex/react"
+import {
+  useMutation,
+  useQuery,
+  Authenticated,
+  Unauthenticated,
+} from "convex/react"
 import { api } from "@workspace/backend/_generated/api"
 import { Button } from "@workspace/ui/components/button"
+import { SignInButton, UserButton } from "@clerk/nextjs"
 
 export default function Page() {
   const users = useQuery(api.users.getMany)
   const addUser = useMutation(api.users.add)
   return (
-    <div className="flex min-h-svh flex-col items-center justify-center">
-      <p> apps/web</p>
-      <Button onClick={() => addUser()}>Add</Button>
-      <div className="mx-auto w-full max-w-sm">
-        {JSON.stringify(users, null, 2)}
-      </div>
-    </div>
+    <>
+      <Authenticated>
+        <div className="flex min-h-svh flex-col items-center justify-center">
+          <p> apps/web</p>
+          <UserButton />
+          <Button onClick={() => addUser()}>Add</Button>
+          <div className="mx-auto w-full max-w-sm">
+            {JSON.stringify(users, null, 2)}
+          </div>
+        </div>
+      </Authenticated>
+      <Unauthenticated>
+        <p>Must be signed In</p>
+        <SignInButton>Sign In!</SignInButton>
+      </Unauthenticated>
+    </>
   )
 }
@@ -1,63 +1,22 @@
 "use client"
 
-import * as React from "react"
-import { ConvexProvider, ConvexReactClient } from "convex/react"
-import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"
+import { ConvexReactClient } from "convex/react"
+import { ConvexProviderWithClerk } from "convex/react-clerk"
 
-const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL || "")
+import { useAuth } from "@clerk/nextjs"
 
-function ThemeProvider({
-  children,
-  ...props
-}: React.ComponentProps<typeof NextThemesProvider>) {
-  return <ConvexProvider client={convex}>{children}</ConvexProvider>
+if (!process.env.NEXT_PUBLIC_CONVEX_URL) {
+  throw new Error("Missing NEXT_PUBLIC_CONVEX_URL in your .env file")
 }
 
-function isTypingTarget(target: EventTarget | null) {
-  if (!(target instanceof HTMLElement)) {
-    return false
-  }
+const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL)
 
+function ThemeProvider({ children }: { children: React.ReactNode }) {
   return (
-    target.isContentEditable ||
-    target.tagName === "INPUT" ||
-    target.tagName === "TEXTAREA" ||
-    target.tagName === "SELECT"
+    <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+      {children}
+    </ConvexProviderWithClerk>
   )
 }
 
-function ThemeHotkey() {
-  const { resolvedTheme, setTheme } = useTheme()
-
-  React.useEffect(() => {
-    function onKeyDown(event: KeyboardEvent) {
-      if (event.defaultPrevented || event.repeat) {
-        return
-      }
-
-      if (event.metaKey || event.ctrlKey || event.altKey) {
-        return
-      }
-
-      if (event.key.toLowerCase() !== "d") {
-        return
-      }
-
-      if (isTypingTarget(event.target)) {
-        return
-      }
-
-      setTheme(resolvedTheme === "dark" ? "light" : "dark")
-    }
-
-    window.addEventListener("keydown", onKeyDown)
-
-    return () => {
-      window.removeEventListener("keydown", onKeyDown)
-    }
-  }, [resolvedTheme, setTheme])
-
-  return null
-}
-
 export { ThemeProvider }
@@ -12,6 +12,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@clerk/nextjs": "^7.5.9",
     "@workspace/backend": "workspace:*",
     "@workspace/math": "workspace:*",
     "@workspace/ui": "workspace:*",

@@ -0,0 +1,18 @@
+import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server"
+
+const isPublicRoute = createRouteMatcher(["/sign-in(.*)", "/sign-up(.*)"])
+
+export default clerkMiddleware(async (auth, req) => {
+  if (!isPublicRoute(req)) {
+    await auth.protect()
+  }
+})
+
+export const config = {
+  matcher: [
+    // Skip Next.js internals and all static files, unless found in search params
+    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
+    // Always run for API routes
+    "/(api|trpc)(.*)",
+  ],
+}
@@ -1,63 +1,11 @@
 "use client"
 
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"
 import { ConvexReactClient, ConvexProvider } from "convex/react"
 
 const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL || "")
 
-function ThemeProvider({
-  children,
-  ...props
-}: React.ComponentProps<typeof NextThemesProvider>) {
+function ThemeProvider({ children }: { children: React.ReactNode }) {
   return <ConvexProvider client={convex}>{children}</ConvexProvider>
 }
 
-function isTypingTarget(target: EventTarget | null) {
-  if (!(target instanceof HTMLElement)) {
-    return false
-  }
-
-  return (
-    target.isContentEditable ||
-    target.tagName === "INPUT" ||
-    target.tagName === "TEXTAREA" ||
-    target.tagName === "SELECT"
-  )
-}
-
-function ThemeHotkey() {
-  const { resolvedTheme, setTheme } = useTheme()
-
-  React.useEffect(() => {
-    function onKeyDown(event: KeyboardEvent) {
-      if (event.defaultPrevented || event.repeat) {
-        return
-      }
-
-      if (event.metaKey || event.ctrlKey || event.altKey) {
-        return
-      }
-
-      if (event.key.toLowerCase() !== "d") {
-        return
-      }
-
-      if (isTypingTarget(event.target)) {
-        return
-      }
-
-      setTheme(resolvedTheme === "dark" ? "light" : "dark")
-    }
-
-    window.addEventListener("keydown", onKeyDown)
-
-    return () => {
-      window.removeEventListener("keydown", onKeyDown)
-    }
-  }, [resolvedTheme, setTheme])
-
-  return null
-}
-
 export { ThemeProvider }
@@ -0,0 +1,14 @@
+/// <reference types="node" />
+
+export default {
+  providers: [
+    {
+      // Replace with your own Clerk Issuer URL from your "convex" JWT template
+      // 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",
+    },
+  ],
+}
@@ -12,6 +12,10 @@ export const getMany = query({
 export const add = mutation({
   args: {},
   handler: async (ctx) => {
+    const identity = await ctx.auth.getUserIdentity()
+    if (identity === null) {
+      throw new Error("Not Authenticated")
+    }
     const userId = await ctx.db.insert("users", {
       name: "RISHII",
     })

@@ -9,6 +9,7 @@
     "./convex": "./convex/*.ts"
   },
   "devDependencies": {
+    "@types/node": "^20.19.41",
     "@workspace/typescript-config": "workspace:*",
     "typescript": "latest"
   },

@@ -1,7 +1,6 @@
 {
   "extends": "@workspace/typescript-config/base.json",
   "compilerOptions": {
-    "baseUrl": ".",
     "paths": {
       "@workspace/backend/*": ["./convex/*"]
     }