Theo's Typesafe Cult•2y 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•2y ago

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

NekoChanOP•2y 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•2y ago

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

Solution

Neto•2y ago

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

Webhooks | Clerk

Information about receiving event notifications with Clerk webhooks

NekoChanOP•2y ago

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

NekoChanOP•2y ago

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

NekoChanOP•2y 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•2y ago

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

Neto•2y 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•2y ago

like this one

NekoChanOP•2y ago

how? this tool looks like only do inspect data

Neto•2y ago

with the webhook payload you can copy into your local database

NekoChanOP•2y ago

I already code some logic

Neto•2y ago

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

NekoChanOP•2y ago

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

Neto•2y ago

Glad to help

NekoChanOP•2y ago

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

NekoChanOP•2y ago

found another solution

fjzon•2y 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•2y 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.

NekoChanOP•2y ago

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

NekoChanOP•2y ago

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

James Perkins•2y 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.

NekoChanOP•2y ago

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

NekoChanOP•2y ago

NekoChanOP•2y 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 ...?