knokvik · knokvik · Aug 30, 2025
diff --git a/apps/web/app/(auth)/layout.tsx b/apps/web/app/(auth)/layout.tsx
@@ -0,0 +1,10 @@
+const Layout = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <div className="min-h-screen min-w-screen flex flex-col items-center justify-center">
+            {children}
+        </div>
+    );
+};
+
+export default Layout;
+
diff --git a/apps/web/app/(auth)/sign-in/[[...sign-in]]/page.tsx b/apps/web/app/(auth)/sign-in/[[...sign-in]]/page.tsx
@@ -0,0 +1,12 @@
+import { SignIn } from '@clerk/nextjs'
+import React from 'react'
+
+const Page = () => {
+  return (
+    <div>
+      <SignIn/>
+    </div>
+  )
+}
+
+export default Page
diff --git a/apps/web/app/(auth)/sign-up/[[...sgn-up]]/page.tsx b/apps/web/app/(auth)/sign-up/[[...sgn-up]]/page.tsx
@@ -0,0 +1,12 @@
+import { SignUp } from '@clerk/nextjs'
+import React from 'react'
+
+const Page = () => {
+  return (
+    <div>
+      <SignUp/>
+    </div>
+  )
+}
+
+export default Page
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -2,6 +2,7 @@ import { Geist, Geist_Mono } from "next/font/google"
 
 import "@workspace/ui/globals.css"
 import { Providers } from "@/components/providers"
+import { ClerkProvider } from "@clerk/nextjs"
 
 const fontSans = Geist({
   subsets: ["latin"],
@@ -23,7 +24,9 @@ export default function RootLayout({
       <body
         className={`${fontSans.variable} ${fontMono.variable} font-sans antialiased `}
       >
-        <Providers>{children}</Providers>
+        <ClerkProvider>
+           <Providers>{children}</Providers>
+        </ClerkProvider>
       </body>
     </html>
   )

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -1,16 +1,32 @@
 "use client"
 
-import { useQuery } from 'convex/react';
+import { Authenticated, Unauthenticated, useMutation, useQuery } from 'convex/react';
 import { api } from "@workspace/backend/_generated/api";
+import { SignInButton, UserButton } from '@clerk/nextjs';
+import { Button } from "../../../packages/ui/src/components/button"
 
 export default function Page() {
 
   const users = useQuery(api.users.getMany);
+  const addUser = useMutation(api.users.add);
+
   return (
+    <>
+    <Authenticated>
     <div className="flex items-center justify-center min-h-svh">
       <div className="flex flex-col items-center justify-center gap-4">
+        <UserButton/> 
+        <Button onClick={()=>addUser()}>ADD</Button>
+        {JSON.stringify(users)}
         {JSON.stringify(users)}
       </div>
     </div>
+    </Authenticated>
+    <Unauthenticated>
+      <p>Must be signed in!</p>
+      <SignInButton>SignIn!</SignInButton>
+    </Unauthenticated>
+
+    </>
   )
 }
diff --git a/apps/web/app/test/page.tsx b/apps/web/app/test/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Page = () => {
+  return (
+    <div>
+      Test Page
+    </div>
+  )
+}
+
+export default Page
diff --git a/apps/web/components/providers.tsx b/apps/web/components/providers.tsx
@@ -1,8 +1,14 @@
 "use client"
 
 import * as React from "react"
+import { useAuth } 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'
+
+if (!process.env.NEXT_PUBLIC_CONVEX_URL) {
+  throw new Error('Missing NEXT_PUBLIC_CONVEX_URL in your .env file')
+}
 
 export function Providers({ children }: { children: React.ReactNode }) {
   const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL || "");
@@ -14,9 +20,9 @@ export function Providers({ children }: { children: React.ReactNode }) {
       disableTransitionOnChange
       enableColorScheme
     >
-      <ConvexProvider client={convex}>
+      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
           {children}
-      </ConvexProvider>
+      </ConvexProviderWithClerk>
     </NextThemesProvider>
   )
 }
diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts
@@ -0,0 +1,22 @@
+import { clerkMiddleware , createRouteMatcher } from '@clerk/nextjs/server'
+
+const isPublicRoute = createRouteMatcher([
+    "/sign-in(.*)",
+    "/sign-up(.*)",
+    "/test"
+])
+
+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)(.*)',
+  ],
+}
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -12,7 +12,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@workspace/backend" : "workspace:*",
+    "@clerk/nextjs": "^6.31.6",
+    "@workspace/backend": "workspace:*",
     "@workspace/math": "workspace:*",
     "@workspace/ui": "workspace:*",
     "convex": "1.25.4",

diff --git a/apps/widget/app/page.tsx b/apps/widget/app/page.tsx
@@ -14,6 +14,7 @@ export default function Page() {
       <div className="flex flex-col items-center justify-center gap-4">
         <Button onClick={()=>addUser()}>ADD</Button>
         {JSON.stringify(users)}
+        <p>Widget Page</p>
       </div>
     </div>
   )

diff --git a/packages/backend/convex/auth.config.ts b/packages/backend/convex/auth.config.ts
@@ -0,0 +1,8 @@
+export default {
+    providers : [
+        {
+            domain : process.env.CLERK_JWT_ISSUER_DOMAIN,
+            applicationID : 'convex',
+        }
+    ]
+}
diff --git a/packages/backend/convex/users.ts b/packages/backend/convex/users.ts
@@ -11,6 +11,11 @@ export const getMany = query({
 export const add = mutation({
     args : {},
     handler : async(ctx) => {
+        const identity = await ctx.auth.getUserIdentity();
+        console.log(identity);
+        if( identity === null ) {
+            throw new Error('Not Authenticated!')
+        }       
         const userID = await ctx.db.insert("users" , {
             name : "antonio",
         });

diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -9,11 +9,11 @@
     "./react-internal": "./react-internal.js"
   },
   "devDependencies": {
-    "@eslint/js": "^9.34.0",
+    "@eslint/js": "^9.32.0",
     "@next/eslint-plugin-next": "^15.4.5",
     "@typescript-eslint/eslint-plugin": "^8.39.0",
     "@typescript-eslint/parser": "^8.39.0",
-    "eslint": "^9.32.0",
+    "eslint": "^9.32.1",
     "eslint-config-prettier": "^9.1.2",
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-react": "^7.37.5",