fix: update the webhooks section with new implementation guide

[tamalchowdhury]

Description (required)

Update the webhooks section with the new implementation guide.

• Included webhook decoding using Kinde webhooks package
• Added webhook data example
• Updated the Next.js implementation guide
• Added complete and updated instructions for Zapier page

Related issues & labels (optional)

• Closes #
• Suggested label:

Summary by CodeRabbit

• Documentation
  • Expanded webhook docs with comprehensive guides on terminology, flow, security, best practices, retry policy, and auto-disable behavior.
  • Added step-by-step integration guides for Next.js and Zapier with runnable examples and testing guidance.
  • Added decoder/JWT verification examples and JWKS guidance.
  • Improved local testing instructions, navigation labels, table of contents, timestamps, and wording/grammar for clarity.

[coderabbitai]

Walkthrough

Comprehensive updates to webhook documentation across four files: expanded core webhook concepts (terminology, flow, security, idempotency, retries), revised metadata/navigation, and new step-by-step integration guides for Next.js and Zapier with example code and testing/deployment guidance.

Changes

Cohort / File(s)	Summary
Webhook Documentation Core src/content/docs/integrate/webhooks/about-webhooks.mdx, src/content/docs/integrate/webhooks/add-manage-webhooks.mdx	Added sections on webhook terminology, flow, request content-type, decoded JWT examples, identifiers, decoder usage, security (idempotency, replay protection, verification), best practices, responses/retry policy, auto-disable policy, and Next steps. Updated metadata (tableOfContents, timestamps), wording/grammar, navigation paths, and local testing notes.
Webhook Integration Guides src/content/docs/integrate/webhooks/webhooks-nextjs.mdx, src/content/docs/integrate/webhooks/zapier-event-hooks.mdx	Replaced brief examples with full step-by-step integration guides: Next.js webhook route and decoding via @kinde/webhooks, local dev tooling, testing and deployment notes; Zapier guide expanded into a multi-step walkthrough with prerequisites, setup, and code samples. Updated front-matter (description, relatedArticles, app_context, timestamps, keywords) and added/rewrote instructional content.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I nibble docs and tidy threads,
Webhooks hopping through your heads,
Next.js routes and Zapier streams,
Secure, decoded, and full of dreams. ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: updating the webhooks section with a new implementation guide, which aligns with the substantial updates across four webhook-related documentation files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch tamal/update/webhooks-section

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying kinde-docs-preview with    Cloudflare Pages

Latest commit:	fed667e
Status:	✅  Deploy successful!
Preview URL:	https://4ac6b010.kinde-docs-preview.pages.dev
Branch Preview URL:	https://tamal-update-webhooks-sectio.kinde-docs-preview.pages.dev

View logs

[coderabbitai]

Actionable comments posted: 3

🤖 Fix all issues with AI agents

In `@src/content/docs/integrate/webhooks/webhooks-nextjs.mdx`:
- Around line 74-78: Add a brief prerequisite note telling users to set the
KINDE_ISSUER_URL environment variable before running the example so
decodeWebhook(token, process.env.KINDE_ISSUER_URL) can resolve the issuer;
specifically, add a "What you need" bullet or Step 1 that instructs them to
obtain their issuer URL from the Kinde dashboard (e.g.,
https://<tenant>.kinde.com or the exact issuer URL provided in the app settings)
and set it in their environment (export KINDE_ISSUER_URL="https://...") or in a
.env file so process.env.KINDE_ISSUER_URL is populated at runtime.

In `@src/content/docs/integrate/webhooks/zapier-event-hooks.mdx`:
- Around line 143-146: Update the Aside text that describes the JWT payload so
the field names match the actual payload and code: replace references to
given_name and family_name with first_name and last_name (email can remain
as-is), ensuring the Aside aligns with the webhook payload example and the Code
action that extracts these fields; look for the Aside block in
src/content/docs/integrate/webhooks/zapier-event-hooks.mdx and update its
wording accordingly.
- Around line 107-116: The decodeJWT function currently decodes the JWT payload
using plain base64 which fails for base64url; update decodeJWT to convert the
payload (parts[1]) from base64url to standard base64 by replacing '-' with '+'
and '_' with '/', then add '=' padding until length % 4 === 0 before calling
Buffer.from(..., 'base64') and JSON.parse; keep the existing checks for three
parts and throw on invalid token, and ensure the function name decodeJWT and
variable payload are the targets to modify.

🧹 Nitpick comments (1)

src/content/docs/integrate/webhooks/webhooks-nextjs.mdx (1)

100-116: Remove unreachable break statements after return.

The return exits the handler, so the breaks are dead code and add noise in a doc example.

🧹 Example cleanup

         switch (type) {
           case "user.updated":
             // handle user updated event
             // e.g. update database with data.user.email
             console.log(data);
             return NextResponse.json({ status: 200, statusText: "success" });
-            break;
           case "user.created":
             // handle user created event
             // e.g. add user to database with data.user.email
             console.log(data);
             return NextResponse.json({ status: 200, statusText: "success" });
-            break;
           default:
             // other events that we don't handle
             return NextResponse.json({ status: 200, statusText: "success" });
-            break; 
         }