refactor: Clerk migration

.env.example

@@ -17,8 +17,9 @@ TRACECAT__API_URL=http://api:8000
 TRACECAT__RUNNER_URL=https://your-ngrok-runner-url
 
 # API env vars
-SUPABASE_JWT_SECRET=super-secret-jwt-token-with-at-least-32-characters-long
-SUPABASE_JWT_ALGORITHM=HS256
+## Used for Clerk JWKS endpoint and to verify JWT iss
+CLERK_FRONTEND_API_URL=your-clerk-frontend-api-url
+
 
 # Frontend env vars
 NODE_ENV="development"
@@ -36,6 +37,12 @@ NEXT_PUBLIC_POSTHOG_KEY=
 NEXT_PUBLIC_POSTHOG_INGEST_HOST="https://www.your-domain.com/ingest"
 NEXT_PUBLIC_POSTHOG_HOST="https://app.posthog.com"
 NEXT_PUBLIC_DISABLE_SESSION_RECORDING=true
+# If using Clerk, you need these:
+CLERK_SECRET_KEY=your-clerk-secret-key
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your-clerk-pub-key
+## NOTE: This must be set to use `auth().redirectToSignIn` API.
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
 
 # Integrations env vars (optional)
 OPENAI_API_KEY=your-openai-api-key

docker-compose.yaml

@@ -22,8 +22,8 @@ services:
       TRACECAT__API_URL: ${TRACECAT__API_URL}
       TRACECAT__RUNNER_URL: ${TRACECAT__RUNNER_URL}
       # Auth
-      SUPABASE_JWT_SECRET: ${SUPABASE_JWT_SECRET}
-      SUPABASE_JWT_ALGORITHM: ${SUPABASE_JWT_ALGORITHM}
+      CLERK_FRONTEND_API_URL: ${CLERK_FRONTEND_API_URL}
+      TRACECAT__DISABLE_AUTH: ${TRACECAT__DISABLE_AUTH}
       # Integrations
       OPENAI_API_KEY: ${OPENAI_API_KEY}
     restart: unless-stopped
@@ -103,18 +103,23 @@ services:
       args:
         NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL}
         NEXT_PUBLIC_APP_URL: ${NEXT_PUBLIC_APP_URL}
+        NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
     container_name: frontend
     env_file: .env
     ports:
       - "3000:3000"
     environment:
+      NODE_ENV: ${NODE_ENV}
       NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL}
       NEXT_PUBLIC_APP_ENV: ${NEXT_PUBLIC_APP_ENV}
       NEXT_PUBLIC_APP_URL: ${NEXT_PUBLIC_APP_URL}
       NEXT_PUBLIC_SELF_HOSTED: true
-      NEXT_PUBLIC_SUPABASE_ANON_KEY: ${NEXT_PUBLIC_SUPABASE_ANON_KEY}
-      NEXT_PUBLIC_SUPABASE_URL: ${NEXT_PUBLIC_SUPABASE_URL}
-      NODE_ENV: ${NODE_ENV}
+      # Auth
+      NEXT_PUBLIC_DISABLE_AUTH: ${TRACECAT__DISABLE_AUTH} # Prefix with NEXT_PUBLIC_ to expose to client
+      CLERK_SECRET_KEY: ${CLERK_SECRET_KEY}
+      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
+      NEXT_PUBLIC_CLERK_SIGN_IN_URL: ${NEXT_PUBLIC_CLERK_SIGN_IN_URL}
+      NEXT_PUBLIC_CLERK_SIGN_UP_URL: ${NEXT_PUBLIC_CLERK_SIGN_UP_URL}
     restart: unless-stopped
     depends_on:
       - api

frontend/Dockerfile

@@ -3,11 +3,13 @@ FROM node:21-slim AS base
 # Need these URLs in both build and runtime
 ARG NEXT_PUBLIC_API_URL
 ARG NEXT_PUBLIC_APP_URL
+ARG NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
 
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
 ENV NEXT_PUBLIC_APP_URL=${NEXT_PUBLIC_APP_URL}
+ENV NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=${NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
 
 RUN corepack enable
 COPY . /app

frontend/package.json

@@ -20,6 +20,8 @@
   "dependencies": {
     "@blocknote/core": "^0.12.0",
     "@blocknote/react": "^0.12.0",
+    "@clerk/clerk-js": "^5.1.1",
+    "@clerk/nextjs": "^5.0.1",
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
@@ -61,6 +63,7 @@
     "next-themes": "^0.2.1",
     "posthog-js": "^1.116.2",
     "react": "^18.2.0",
+    "react-confetti-explosion": "^2.1.2",
     "react-day-picker": "8.10.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.0",