Theo's Typesafe Cult•14mo ago

Is it a correct way to get Clerk user data ...?

Solution:

https://clerk.com/docs/integration/webhooks

Webhooks | Clerk

Information about receiving event notifications with Clerk webhooks

Jump to solution

26 Replies

Neto•14mo ago

from the docs, should be the correct way of using it only thing to be careful is getting rate limited with multiple requests

NekoChan•14mo ago

yes, I'm worried about this. If I have same user comments, is Clerk going to fetch multiple times for that user data? sorry for my bad English.

Neto•14mo ago

if you need the user data consistently you can store local copies in the database

Solution

Neto•14mo ago

https://clerk.com/docs/integration/webhooks

Webhooks | Clerk

Information about receiving event notifications with Clerk webhooks

NekoChan•14mo ago

because I want to show user info in comments like this:

NekoChan•14mo ago

I know this, but I had some problem with expose local ip

NekoChan•14mo ago

https://github.com/localtunnel/localtunnel/issues/563

GitHub

408 when connecting to a url? · Issue #563 · localtunnel/localtunnel

I'm currently exposing a websocket server (port 8080) on my server, through a node.js file: import { WebSocketServer } from "ws"; import localTunnel from "localtunnel"; cons...

Neto•14mo ago

you can use some external service on dev, and the correct callback on production

Neto•14mo ago

https://webhook.site/

Webhook.site - Test, process and transform emails and HTTP requests

Instantly generate a free, unique URL and email address to test, inspect, and automate (with a visual workflow editor and scripts) incoming HTTP requests and emails

Neto•14mo ago

like this one

NekoChan•14mo ago

how? this tool looks like only do inspect data

Neto•14mo ago

with the webhook payload you can copy into your local database

NekoChan•14mo ago

I already code some logic

Neto•14mo ago

you can copy the webhook payload and call yourself your local endpoint

NekoChan•14mo ago

i see thx you, I think I will use the webhook solution.

Neto•14mo ago

Glad to help

NekoChan•14mo ago

https://media.discordapp.net/attachments/1018435237174325330/1097185267993018398/image.png

NekoChan•14mo ago

found another solution

fjzon•14mo ago

if I would install the @clerk/nextjs/server library. Would I still be able to create a procedure with this and use it inside my expo application (create-t3-turbo)?

James Perkins•14mo ago

https://github.com/clerkinc/t3-turbo-and-clerk @Sports Live you might want to look at our clerk T3 turbo to understand how data fetching works across everything but the you can call procedures using expo from trpc

GitHub

GitHub - clerkinc/t3-turbo-and-clerk: A t3 Turbo starter with Clerk...

A t3 Turbo starter with Clerk as the auth provider. - GitHub - clerkinc/t3-turbo-and-clerk: A t3 Turbo starter with Clerk as the auth provider.

NekoChan•14mo ago

for the ppl who has the same localtunnel problem. you can try ngrok, it's working for me:

NekoChan•14mo ago

how to get the profile_image_url from images.clerk.dev when using webhook?

James Perkins•14mo ago

it comes right after the create hook in the updated hook. we have to process the image so the first one retuned is the OG image.

NekoChan•14mo ago

I see, thx for your answer. nvm I was doing stupid thing

NekoChan•14mo ago

NekoChan•14mo ago

it is images.clerk.dev sharing my webhook: ( /api/webhook/create-user.ts )

import { clerkClient } from '@clerk/nextjs/server'
import { z } from 'zod'

import { prisma } from '~/server/db'

import type { NextApiRequest, NextApiResponse } from 'next'

const requestSchema = z.object({
  data: z.object({ id: z.string() }),
  object: z.literal('event'),
  type: z.literal('user.created'),
})

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { data } = requestSchema.parse(req.body)

  const user = await clerkClient.users.getUser(data.id)

  const createUser = await prisma.user.create({
    data: {
      id: user.id,
      createdAt: new Date(user.createdAt),
      updatedAt: new Date(user.updatedAt),
      firstName: user.firstName,
      lastName: user.lastName,
      username: user.username,
      profileImageUrl: user.profileImageUrl,
    },
  })

  console.log('Created user', createUser)

  return res.status(200).json(createUser)
}

import { clerkClient } from '@clerk/nextjs/server'
import { z } from 'zod'

import { prisma } from '~/server/db'

import type { NextApiRequest, NextApiResponse } from 'next'

const requestSchema = z.object({
  data: z.object({ id: z.string() }),
  object: z.literal('event'),
  type: z.literal('user.created'),
})

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { data } = requestSchema.parse(req.body)

  const user = await clerkClient.users.getUser(data.id)

  const createUser = await prisma.user.create({
    data: {
      id: user.id,
      createdAt: new Date(user.createdAt),
      updatedAt: new Date(user.updatedAt),
      firstName: user.firstName,
      lastName: user.lastName,
      username: user.username,
      profileImageUrl: user.profileImageUrl,
    },
  })

  console.log('Created user', createUser)

  return res.status(200).json(createUser)
}

Gaming

Programming

Is it a correct way to get Clerk user data ...?