fix: update getEnvironmentVariable usage in custom UI

[tamalchowdhury]

Description (required)

Make it clear that getEnvironmentVariable can't be used.

Related issues & labels (optional)

• Closes #
• Suggested label:

Summary by CodeRabbit

• Documentation
  • Updated page docs with refreshed metadata date and clearer guidance on configuring page capabilities.
  • Clarified that pages must opt in to enable environment access via bindings and explained performance implications.
  • Added a dedicated "Environment Variables" section with step-by-step guidance, expanded examples, and a warning about where env access can be called.
  • Minor wording and cross-reference improvements for clarity.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Updated a single documentation page: metadata date changed; section heading renamed to "kinde.json file"; pageSettings export changed from an empty object to include bindings with "kinde.env": {}; new "Environment Variables" guidance and examples added, plus warnings about call scope and performance.

Changes

Cohort / File(s)

Change Summary

Documentation update src/content/docs/design/customize-with-code/understand-page-design.mdx

Updated page metadata date to 2025-12-15; renamed the Kinde.json heading to " kinde.json file"; replaced export const pageSettings = {}; with export const pageSettings = { bindings: { "kinde.env": {} } }; expanded pageSettings docs explaining bindings and opt-in performance behavior; added a new "Environment Variables" section with setup steps, examples showing getEnvironmentVariable usage in component scope (not at module scope), and an aside warning about access scope and performance; minor wording tweaks.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Single documentation file changed.
• Review attention:
  • Verify the exact pageSettings example matches runtime expectations (bindings key and syntax).
  • Confirm wording about call-time scope for getEnvironmentVariable is accurate and clear.
  • Check metadata date and heading formatting.

Poem

🐇
I nibbled code in morning light,
bindings added, tidy, right.
Env keys whisper, not at top—
call inside, and don't let drop.
Docs refreshed — a hopping sight.

Pre-merge checks and finishing touches

✅ 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 documentation about getEnvironmentVariable usage in custom UI, which aligns with the PR's objective to clarify that it can't be used.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch tamal/fix/custom-ui-env-variable

---

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.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a2232bd and 72fb320.

📒 Files selected for processing (1)

• src/content/docs/design/customize-with-code/understand-page-design.mdx (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: DaveOrDead
Repo: kinde-oss/documentation PR: 364
File: src/content/docs/design/design-with-code/understand-page-design.mdx:42-42
Timestamp: 2025-03-19T03:59:26.373Z
Learning: The Kinde widget content properties use camelCase naming convention (e.g., `pageTitle` instead of `page_title`) in JSX code examples and documentation.

📚 Learning: 2025-03-19T03:59:26.373Z

Learnt from: DaveOrDead
Repo: kinde-oss/documentation PR: 364
File: src/content/docs/design/design-with-code/understand-page-design.mdx:42-42
Timestamp: 2025-03-19T03:59:26.373Z
Learning: The Kinde widget content properties use camelCase naming convention (e.g., `pageTitle` instead of `page_title`) in JSX code examples and documentation.

Applied to files:

• src/content/docs/design/customize-with-code/understand-page-design.mdx

🪛 LanguageTool

src/content/docs/design/customize-with-code/understand-page-design.mdx

[grammar] ~344-~344: Use a hyphen to join words.
Context: ... } } ``` This allows you to have fine grained control over what your pages can...

(QB_NEW_EN_HYPHEN)

🔇 Additional comments (2)

src/content/docs/design/customize-with-code/understand-page-design.mdx (2)

326-346: Clear explanation of pageSettings and bindings with practical examples.

The updated pageSettings section effectively clarifies that getEnvironmentVariable is not available in Custom UI pages, even when imported. The addition of binding examples ("kinde.fetch" and url) alongside "kinde.env" makes the documentation more concrete and actionable. The note about omitting pageSettings entirely is helpful for developers who don't need API access.

Please verify that the new bindings "kinde.fetch" and url in the pageSettings example are accurate and currently supported, as this is new documentation being added to guide developers on what bindings are available.

---

348-404: Comprehensive new section on environment variable workarounds addresses PR objective.

The new "Environment Variables" section directly addresses the PR goal by:

1. Explicitly stating that getEnvironmentVariable is unavailable in Custom UI pages (line 350)
2. Providing three practical alternatives with clear code examples

Each option is well-explained:

• Option 1: Passing data from workflow handlers is a clean architectural pattern
• Option 2: Using relative URLs is pragmatic for UI-only needs
• Option 3: Fetching from an API provides flexibility with the kinde.fetch binding

The code examples follow camelCase conventions (publicUrl, context.data) consistent with Kinde's documented patterns.

Confirm that the code examples in all three options are syntactically correct and the workflow handler pattern (Option 1) aligns with current Kinde workflow implementation details.

[cloudflare-workers-and-pages]

Deploying kinde-docs-preview with    Cloudflare Pages

Latest commit:	4c81ccc
Status:	✅  Deploy successful!
Preview URL:	https://e62401fe.kinde-docs-preview.pages.dev
Branch Preview URL:	https://tamal-fix-custom-ui-env-vari.kinde-docs-preview.pages.dev

View logs

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/content/docs/design/customize-with-code/understand-page-design.mdx (1)

324-338: Consider minor wording improvement for clarity.

The explanation is clear and helpful. However, line 337 could be slightly improved:

🔎 Suggested wording improvement:

-Bindings are explicitly opted-in for performance reasons. By declaring only the bindings you need, you tell Kinde's runtime which internal features to initialize, avoiding unnecessary computation and keeping your page render as fast as possible.
+Bindings require explicit opt-in for performance reasons. By declaring only the bindings you need, you tell Kinde's runtime which internal features to initialize, avoiding unnecessary computation and keeping your page render as fast as possible.

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 01e8c84 and 4c81ccc.

📒 Files selected for processing (1)

• src/content/docs/design/customize-with-code/understand-page-design.mdx (3 hunks)

🧰 Additional context used

🧠 Learnings (5)

📓 Common learnings

Learnt from: DaveOrDead
Repo: kinde-oss/documentation PR: 364
File: src/content/docs/design/design-with-code/understand-page-design.mdx:42-42
Timestamp: 2025-03-19T03:59:26.373Z
Learning: The Kinde widget content properties use camelCase naming convention (e.g., `pageTitle` instead of `page_title`) in JSX code examples and documentation.

Learnt from: marcosmartini
Repo: kinde-oss/documentation PR: 226
File: src/content/docs/developer-tools/sdks/backend/nextjs-sdk.mdx:0-0
Timestamp: 2024-10-22T06:12:51.559Z
Learning: The Kinde documentation's base URL is not `kinde.com`, so links to the documentation should use the correct base URL.

📚 Learning: 2025-03-19T03:59:26.373Z

Learnt from: DaveOrDead
Repo: kinde-oss/documentation PR: 364
File: src/content/docs/design/design-with-code/understand-page-design.mdx:42-42
Timestamp: 2025-03-19T03:59:26.373Z
Learning: The Kinde widget content properties use camelCase naming convention (e.g., `pageTitle` instead of `page_title`) in JSX code examples and documentation.

Applied to files:

• src/content/docs/design/customize-with-code/understand-page-design.mdx

📚 Learning: 2025-09-04T02:15:38.458Z

Learnt from: clairekinde11
Repo: kinde-oss/documentation PR: 545
File: src/content/docs/design/customize-with-code/custom-styling-per-application.mdx:59-70
Timestamp: 2025-09-04T02:15:38.458Z
Learning: In Kinde custom pages repository structure, layout.tsx should be placed as a sibling to the (kinde) directory at pages/layout.tsx level, not inside the (kinde) directory. The import path "../../layout" from pages/(kinde)/(default)/page.tsx works correctly with this structure in Kinde's system.

Applied to files:

• src/content/docs/design/customize-with-code/understand-page-design.mdx

📚 Learning: 2024-11-12T06:00:08.396Z

Learnt from: marcosmartini
Repo: kinde-oss/documentation PR: 253
File: src/content/docs/properties/work-with-properties/property-groups.mdx:13-13
Timestamp: 2024-11-12T06:00:08.396Z
Learning: In the project documentation, the `/kinde-apis/management` and `/kinde-apis/frontend` pages use a third-party API reference and client that loads a Single Page Application (SPA). Therefore, links to sections within these pages are valid, even if they appear to point to non-existent sections in static analysis, and should not be flagged.

Applied to files:

• src/content/docs/design/customize-with-code/understand-page-design.mdx

📚 Learning: 2024-10-22T06:13:23.808Z

Learnt from: marcosmartini
Repo: kinde-oss/documentation PR: 226
File: src/content/docs/developer-tools/sdks/backend/nextjs-sdk.mdx:0-0
Timestamp: 2024-10-22T06:13:23.808Z
Learning: In the Kinde documentation, links may use `localhost` URLs that are fixed to relative paths, and the docs base URL is not `kinde.com`.

Applied to files:

• src/content/docs/design/customize-with-code/understand-page-design.mdx

🔇 Additional comments (3)

src/content/docs/design/customize-with-code/understand-page-design.mdx (3)

34-34: LGTM! Metadata update is appropriate.

The updated date reflects the recent documentation changes.

---

192-192: LGTM! Improved heading formatting.

Using backticks for the filename and adding "file" makes the section heading clearer and more consistent with documentation best practices.

---

340-387: Documentation on environment variables in custom pages is accurate and complete.

The imports and usage patterns are correct: KindePageEvent and getEnvironmentVariable are properly exported from @kinde/infrastructure, and the optional chaining pattern (?.value) correctly reflects that environment variables may be undefined. The pageSettings binding structure with kinde.env is correctly documented.

The warning about module-level restrictions is appropriately placed and necessary. The example code and step-by-step instructions are clear and ready for developers to use.

[alex72508]

Looks good to me