Kinde•4w ago

Typescript jwt payload type?

Hi there, Just trying to implement a webhook and struggling a little with the types returned when verifying the jwt. I think it's the JwtPayload types? Sorry, I'm not too hot on JWTs! Do I need the kinde-typescript-sdk? I could see anything in there that would help, but could've missed it! Thanks! Nick

7 Replies

Ages•4w ago

Hi @Nick , Thank you for reaching out! I’d be happy to assist you with your webhook implementation. To better understand your issue and provide the best guidance, could you clarify a couple of points? 1. Which Kinde SDK are you using? This will help us determine if the kinde-typescript-sdk is relevant to your implementation. 2. What are you trying to achieve with the JWT payload? Are you attempting to validate the token, extract specific claims, or something else entirely? 3. Are you looking for guidance on the structure of the JWT payload (e.g., claims or custom attributes) or how to handle it in your TypeScript code? Once I have more details, I’ll do my best to point you in the right direction. Feel free to share any snippets of code or additional context that might help! Looking forward to your response. Best regards, Ages

Yoshify•4w ago

Sorry to hijack @Ages - @Nick you may be interested in this gist I created recently for validating and getting type inference on the Webhook payloads - https://gist.github.com/Yoshify/12e70d5a3bbc2c9ed66a4207d2d2e9cc

Gist

Kinde Webhooks + Zod

Kinde Webhooks + Zod. GitHub Gist: instantly share code, notes, and snippets.

Ages•4w ago

Hi @Yoshify , No worries at all, please feel free to continue.

NickOP•4w ago

Sorry it's taken a while to respond, ended up in bed with a banging migraine yesterday! @Ages I was just trying to get the compile time error on event?.type to go away. But I solved the issue (I think) by asserting that the result of jwt.verify was of type jwt.JwtPayload. Code snippet from the app/api/kinde-webhook/route.ts route described here (https://docs.kinde.com/integrate/webhooks/webhooks-nextjs/)

export async function POST(req: Request) {
  try {
    // Get the token from the request
    const token = await req.text();

    // Decode the token
    const { header } = jwt.decode(token, { complete: true });
    const { kid } = header;

    // Verify the token
    const key = await client.getSigningKey(kid);
    const signingKey = key.getPublicKey();
    const event = await jwt.verify(token, signingKey);

    // Handle various events
    switch (event?.type) {  // error here
      case "user.updated":
        // handle user updated event
        // e.g update database with event.data
        console.log(event.data); // and anywhere properties of event are accessed
        break;
      case "user.created":
        // handle user created event
        // e.g add user to database with event.data
        console.log(event.data);
        break;
      default:
        // other events that we don't handle
        break;
    }

  } catch (err) {
    if (err instanceof Error) {
      console.error(err.message);
      return NextResponse.json({ message: err.message }, { status: 400 });
    }
  }
  return NextResponse.json({ status: 200, statusText: "success" });
}

export async function POST(req: Request) {
  try {
    // Get the token from the request
    const token = await req.text();

    // Decode the token
    const { header } = jwt.decode(token, { complete: true });
    const { kid } = header;

    // Verify the token
    const key = await client.getSigningKey(kid);
    const signingKey = key.getPublicKey();
    const event = await jwt.verify(token, signingKey);

    // Handle various events
    switch (event?.type) {  // error here
      case "user.updated":
        // handle user updated event
        // e.g update database with event.data
        console.log(event.data); // and anywhere properties of event are accessed
        break;
      case "user.created":
        // handle user created event
        // e.g add user to database with event.data
        console.log(event.data);
        break;
      default:
        // other events that we don't handle
        break;
    }

  } catch (err) {
    if (err instanceof Error) {
      console.error(err.message);
      return NextResponse.json({ message: err.message }, { status: 400 });
    }
  }
  return NextResponse.json({ status: 200, statusText: "success" });
}

I'm using the nextjs app router sdk, so I'm guessing the TS sdk isn't relevant? Looks awesome, thanks! Would you mind explaining the difference between using validateToken/jwtDecoder vs what's in the code above? (jwt.verify?) Thanks again, had no idea the zod types would be so involved!

Ages•3w ago

Hi @Nick , Glad you’re feeling better! Here’s a quick breakdown: Error on event?.type Use jwt.verify(token, signingKey) as jwt.JwtPayload to assert the type, or use Zod for runtime validation and type safety. validateToken/jwtDecoder vs. jwt.verify jwt.verify is low-level and manual. validateToken/jwtDecoder (if available) simplify key management, validation, and type handling—ideal for Kinde-specific workflows. SDK Relevance The TypeScript SDK isn’t essential for your manual approach but might simplify things for future expansions. Zod Tip Zod can validate payloads and infer types easily. Check out Yoshify’s gist—it’s a solid approach. Let me know if you need more help. Best, Ages

NickOP•3w ago

Thanks a lot, that's perfect 🙂

Ages•3w ago

Hi @Nick , I'm glad to hear from you, and I hope our response helps clarify your question about implementing the webhook and verifying JWTs. If this resolves your issue, we can consider it closed for now. However, feel free to reach out if you have any further queries. Best regards, Ages

Gaming

Programming

Typescript jwt payload type?