deme4447 Posts - Answer Overflow

deme4447

•Created by deme4447 on 11/10/2024 in #questions

Client Side CTX not being available

Hello, I previously had my T3 project set up with Clerk JS and Stripe. I was able to run a createCheckOutSession from the Client Side, but ever since updating to Next JS 15, Clerk 6, and React 19, my client side related ctx is not availabe. However, my server side is still available. Are there any changes I'm supposed to make to the T3 Stack CTX code when I upgrade?

5 replies

TTCTheo's Typesafe Cult

•Created by deme4447 on 6/17/2024 in #questions

ENV Variable for DATABASE_URL won't update when I run npx prisma db push

I updated my .env variable for the Prisma DB Database URL but when I run the prisma commands I get errors such as p1000 that show it is still trying to connect to my old PlanetScale DB. Any ideas on how I can get it updated? I tried to Google and search GitHub but it has not helped so far.

2 replies

TTCTheo's Typesafe Cult

•Created by deme4447 on 4/2/2024 in #questions

If you SSH onto a machine from another machine, does that use less resources on your local Machine?

I am wondering if I can make my local PC use less resources by SSHing into VSCode using another PC?

3 replies

TTCTheo's Typesafe Cult

•Created by deme4447 on 6/18/2023 in #questions

Syncing Clerk User for Prisma User in the Next Pages Directory

Hey there, I am trying to sync my user object with my User model in Prisma DB. I followed the steps in this video: https://www.youtube.com/watch?v=NgBxrIC1eHM&t=1293s But then I realized that the headers only work with server components in the app directory. I am using t3 stack so I have tRPC and the server folder. How can I go about converting this code I have currently to a tRPC call, or something else entirely since it has to be a endpoint for webhooks.

import { headers } from "next/headers";
// svix is used to verify the webhook signature from Clerk
import { Webhook, WebhookRequiredHeaders } from "svix";
import { Water_Brush } from "next/font/google";
import { IncomingHttpHeaders } from "http";
import { NextResponse } from "next/server";
import { prisma } from "~/server/db";

const webhookSecret = process.env.CLERK_WEBHOOK_SECRET || "";

async function handler(request: Request) {
  const payload = await request.json();
  const headersList = headers();
  const heads = {
    "svix-id": headersList.get("svix-id"),
    "svix-timestamp": headersList.get("svix-timestamp"),
    "svix-signature": headersList.get("svix-signature"),
  };

  const wh = new Webhook(webhookSecret);

  let evt: Event | null = null;
  console.log("payload", payload);
  try {
    evt = wh.verify(
      JSON.stringify(payload),
      heads as IncomingHttpHeaders & WebhookRequiredHeaders
    ) as Event;
  } catch (err) {
    console.log((err as Error).message);
    return NextResponse.json({}, { status: 400 });
  }

  const eventType: EventType = evt.type;

  if (eventType === "user.created" || eventType === "user.updated") {
    const { id, ...attributes } = evt.data;
    console.log(id, "id in clerk-webhook-handlers");
    console.log(attributes);
    // When you are ready to move the attributes property in the Clerk user from JSON in the Prisma DB to property values of the User object in Prisma DB destructure the attributes

    await prisma.user.upsert({
      where: { externalId: id as string },
      create: {
        externalId: id as string,
        attributes,
      },
      update: {
        attributes,
      },
    });

    // const attributes = {
    //   firstName: "",
    //   lastName: ""
    // }
  }
  // upsert = if the user exists update the user, if the user doesn't exist create the user
}

type EventType = "user.updated" | "user.created" | "*";

type Event = {
  data: Record<string, string | number>;
  object: "event";
  type: EventType;
};

export const GET = handler;
export const POST = handler;
export const PUT = handler;

// src/pages/api/clerk-webhook.ts

import { headers } from "next/headers";
// svix is used to verify the webhook signature from Clerk
import { Webhook, WebhookRequiredHeaders } from "svix";
import { Water_Brush } from "next/font/google";
import { IncomingHttpHeaders } from "http";
import { NextResponse } from "next/server";
import { prisma } from "~/server/db";

const webhookSecret = process.env.CLERK_WEBHOOK_SECRET || "";

async function handler(request: Request) {
  const payload = await request.json();
  const headersList = headers();
  const heads = {
    "svix-id": headersList.get("svix-id"),
    "svix-timestamp": headersList.get("svix-timestamp"),
    "svix-signature": headersList.get("svix-signature"),
  };

  const wh = new Webhook(webhookSecret);

  let evt: Event | null = null;
  console.log("payload", payload);
  try {
    evt = wh.verify(
      JSON.stringify(payload),
      heads as IncomingHttpHeaders & WebhookRequiredHeaders
    ) as Event;
  } catch (err) {
    console.log((err as Error).message);
    return NextResponse.json({}, { status: 400 });
  }

  const eventType: EventType = evt.type;

  if (eventType === "user.created" || eventType === "user.updated") {
    const { id, ...attributes } = evt.data;
    console.log(id, "id in clerk-webhook-handlers");
    console.log(attributes);
    // When you are ready to move the attributes property in the Clerk user from JSON in the Prisma DB to property values of the User object in Prisma DB destructure the attributes

    await prisma.user.upsert({
      where: { externalId: id as string },
      create: {
        externalId: id as string,
        attributes,
      },
      update: {
        attributes,
      },
    });

    // const attributes = {
    //   firstName: "",
    //   lastName: ""
    // }
  }
  // upsert = if the user exists update the user, if the user doesn't exist create the user
}

type EventType = "user.updated" | "user.created" | "*";

type Event = {
  data: Record<string, string | number>;
  object: "event";
  type: EventType;
};

export const GET = handler;
export const POST = handler;
export const PUT = handler;

// src/pages/api/clerk-webhook.ts

5 replies

Gaming

Programming