Money Mind AI Setup

Dhruv Patel edited this page on Apr 5, 2025 · 1 revision

---

🔧 Getting Started with Money Mind AI on Render with Clerk Authentication

This guide walks you through setting up Clerk authentication, webhook integration, and deploying Money Mind AI (built using Next.js and TypeScript) on Render.com.

---

🚀 Step 1: Create a Clerk Account

1. Visit https://clerk.com.
2. Sign up or log in to your Clerk dashboard.
3. Create a new application for Money Mind AI.
4. Copy your Publishable Key and Secret Key from the app settings.

---

⚙️ Step 2: Integrate Clerk in Your Next.js App

Install Clerk’s Next.js package:

npm install @clerk/nextjs

Create a .env.local file in your project root and add the following:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_key

Create a middleware file at src/middleware.ts:

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware();

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

---

🔧 Getting Started with Money Mind AI on Render with Clerk Authentication

This guide walks you through setting up Clerk authentication, webhook integration, and deploying Money Mind AI (built using Next.js and TypeScript) on Render.com.

---

🔁 Step 3: Add Clerk Webhook Integration

Install required dependencies:

npm install svix @clerk/nextjs

Create the webhook handler route at src/app/api/webhooks/clerk/route.ts:

import { Webhook } from 'svix'
import { headers } from 'next/headers'
import { WebhookEvent } from '@clerk/nextjs/server'

export async function POST(req: Request) {
  const WEBHOOK_SECRET = process.env.WEBHOOK_SECRET

  if (!WEBHOOK_SECRET) {
    throw new Error('Missing WEBHOOK_SECRET in environment')
  }

  const headerPayload = headers();
  const svix_id = headerPayload.get("svix-id");
  const svix_timestamp = headerPayload.get("svix-timestamp");
  const svix_signature = headerPayload.get("svix-signature");

  if (!svix_id || !svix_timestamp || !svix_signature) {
    return new Response('Missing SVIX headers', { status: 400 });
  }

  const body = JSON.stringify(await req.json());
  const wh = new Webhook(WEBHOOK_SECRET);

  let event: WebhookEvent;

  try {
    event = wh.verify(body, {
      "svix-id": svix_id,
      "svix-timestamp": svix_timestamp,
      "svix-signature": svix_signature,
    }) as WebhookEvent;
  } catch (error) {
    console.error('Webhook verification failed:', error);
    return new Response('Invalid signature', { status: 400 });
  }

  if (event.type === 'user.created') {
    console.log('👤 New user registered:', event.data);
    // Add custom logic here
  }

  return new Response('', { status: 200 });
}

🌐 Step 4: Register Webhook on Clerk

1. In the Clerk dashboard, go to the Webhooks tab.

2. Click "Add Endpoint".

3. Enter the following URL:

https://your-moneymind-ai.onrender.com/api/webhooks/clerk

4. Choose relevant events (e.g., user.created).

5. Save the endpoint and copy the WEBHOOK_SECRET.

---

🚀 Step 5: Deploy to Render.com

1. Go to Render.com and create a new Web Service.

2. Link your GitHub repository that contains the Money Mind AI code.

3. Configure the following build settings:

Build Command:

npm run build

Start Command:

npm start

4. Add the following environment variables:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_key
WEBHOOK_SECRET=your_webhook_secret

5. Deploy and monitor your build logs for successful deployment.

---

✅ Step 6: Test Your Webhook

1. In the Clerk Dashboard, go to your Webhook endpoint.

2. Use "Send Example Event" to trigger a test.

3. Open your Render logs and confirm the event was successfully received and processed.

---

💡 You’re all set!

Clerk is now fully integrated with Money Mind AI, and you’re ready to build secure, smart finance features!

--