Skip to content

Update understand-page-design.mdx #429

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
clairekinde11 merged 2 commits into from
May 30, 2025
Merged

Update understand-page-design.mdx #429

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1528717
Update understand-page-design.mdx
clairekinde11 May 29, 2025
bac54d0
Update understand-page-design.mdx
clairekinde11 May 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 76 additions & 6 deletions src/content/docs/design/customize-with-code/understand-page-design.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ If you are using React for templating, note this code is rendered on the server.

</Aside>

### Page structure in the Git directory
## Page structure in the Git directory

The code for your pages must live in a GitHub repository (other git providers to be supported later). Your directory structure in the repo is critical to Kinde being able to run your design code.

Expand All @@ -162,7 +162,7 @@ myApp/
└── kinde.json
```

### Kinde.json
## Kinde.json

The `kinde.json` file defines the config for all custom code in Kinde, including workflows and custom pages. A typical config file will look as follows:

Expand All @@ -177,13 +177,19 @@ The `kinde.json` file defines the config for all custom code in Kinde, including

`version` - based on the date when the API version was released. Any breaking changes will be released in a new API version.

### Which pages can I customize?
## Which pages can I customize?

All Kinde hosted pages can be customized and use url route mapping to determine which template to use.

If a specific mapped route does not exist, a special route called `(default)` will be rendered. Set up the `(default)` page to ensure all your pages follow this design unless you have overridden them with custom code.

Available routes:
<Aside type="warning">

Once you start customizing pages, it's on you not to break them. We recommend always applying custom code to pages in a non-prod environment first.

</Aside>

Common routes
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot May 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Missing markdown for “Common routes” heading
The “Common routes” line is not prefixed with a heading marker. It should be defined as an H3 (e.g., ### Common routes) under the current H2 context to maintain consistent styling.
Please apply:

- Common routes
+ ### Common routes
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Common routes
### Common routes
🤖 Prompt for AI Agents 
In src/content/docs/design/customize-with-code/understand-page-design.mdx at
line 192, the text "Common routes" is missing the markdown heading syntax. Add
the H3 markdown prefix by changing the line to "### Common routes" to ensure
consistent heading styling under the current H2 context.


`(default)` - The page template that will be used for all Kinde hosted pages when a specific one cannot be found.

Expand All @@ -193,9 +199,73 @@ Available routes:

`(index)` - If someone visits the root domain for your business, e.g. `https://<yourdomain>.kinde.com`

Errors
Copy link
Copy Markdown
Contributor

@DaveOrDead DaveOrDead May 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had a stab at some groupings

## Common pages

These are the most frequently used or fallback pages.

* `(default)` – Fallback template used when a specific page is not found.
* `(register)` – The sign-up page.
* `(login)` – The sign-in page.
* `(index)` – Landing page when visiting the root domain (e.g. `https://<yourdomain>.kinde.com`).

## Authentication

Pages involved in initiating authentication flows.
* `(register)` – The sign-up page.
* `(login)` – The sign-in page.
* `(sso_home_realm)` – Displayed when a user selects “Continue with SSO” to choose their identity provider.
* `(provide_email)` – Shown when using a social login provider that does not return an email address.
* `(clickwrap)` – Displays terms and conditions or agreements that must be accepted.

## Password flows

Used in password-based authentication and recovery.

* `(verify_password)` – Shown during sign-in when using a password-based method.
* `(set_password)` – Shown during a password-based sign-up flow.
* `(reset_password_verify_email_otp)` – First step of the reset flow where the user verifies identity using an email OTP.
* `(reset_password)` – Password entry screen shown after verification during the reset flow.

## One-Time Passcode (OTP) verification

Used in sign-in and sign-up flows with OTP (email or phone).

* `(sign_in_use_email_otp)` – Sign in with a one-time email code.
* `(sign_up_use_email_otp)` – Sign up with a one-time email code.
* `(sign_in_sign_up_use_phone_otp)` – Sign in or sign up with a one-time phone code.

## Multi-Factor Authentication (MFA)

Shown after primary authentication when MFA is required or being set up.

* `(mfa_method_selection)` – User selects their preferred MFA method.
* `(mfa_authenticator_app)` – Setup screen for using an authenticator app.
* `(mfa_setup_email)` – Setup screen for email-based MFA.
* `(mfa_setup_phone)` – Setup screen for phone-based MFA.
* `(mfa_use_email_otp)` – Enter a one-time email code for MFA.
* `(mfa_use_phone_otp)` – Enter a one-time phone code for MFA.
* `(mfa_use_recovery_code)` – Enter a recovery code if unable to use other MFA methods.
* `(mfa_view_recovery_codes)` – View and save MFA recovery codes.

## Billing (coming soon)

Pages related to choosing a plan and making a payment.

* `(choose_plan)` – User selects a subscription plan.
* `(collect_payment_details)` – User enters billing information.
* `(subscription_success)` – Confirmation page shown after successful subscription.

## Early access

Pages for gated access to your product before full launch.

* `(request_access)` – Request early access to your product.
* `(request_access_success)` – Confirmation page after a request is submitted.

## Error pages

Shown when a user encounters an error state.

* `(account_locked)` – The user’s account has been locked.
* `(account_not_found)` – No account was found for the entered credentials.
* `(invalid_redirect_url)` – The redirect URL is invalid or not on the allowed list.
* `(error)` – Generic error screen.


`(account_locked)`

`(account_not_found)`

`(error)`

`(invalid_redirect_url)`

Authentication & MFA

`(clickwrap)`

`(sso_home_realm)`

`(provide_email)`

`(mfa_authenticator_app)`

`(mfa_method_selection)`

`(mfa_setup_email)`

`(mfa_setup_phone)`

`(mfa_use_email_otp)`

`(mfa_use_phone_otp)`

`(mfa_use_recovery_code)`

`(mfa_view_recovery_codes)`

Passwords

`(reset_password)`

`(reset_password_verify_email_otp)`

`(set_password)`

`(verify_password)`

Verify code

`(sign_in_sign_up_use_phone_otp)`

`(sign_in_use_email_otp)`

`(sign_up_use_email_otp)`

`(subscription_success)`

Other routes

`(request_access)` - before you launch and want to collect subscribers

`(request_access_success)`

`(choose_plan)` - coming soon, relates to billing

`(collect_payment_details)` - coming soon, related to billing

If you want specific customization for a page not listed here, reach out and let us know.

### Set the page default export function
## Set the page default export function

Your `page.[ext]` file should contain a default export. It doesn’t matter what this is called, but the general convention is to call it `Page`. This is provided a single `event` argument which is an object containing 2 keys `context` and `request`.

Expand Down Expand Up @@ -225,7 +295,7 @@ The top level `context` key object contains information about the page itself, l
- `description` the page description
- `logoAlt` the alt text for your company logo

### Page settings
## Page settings

Sometimes additional information needs to be passed to Kinde from your page. You can use the page settings object for this.

Expand Down