From 2be7519d68ff47757e05bc24bad42b5a68f22816 Mon Sep 17 00:00:00 2001 From: Abdelrahman Zaki Date: Tue, 19 May 2026 11:04:48 +0300 Subject: [PATCH 1/3] fix: replace organization_billing with organization_plan_details in self-serve portal sub_nav examples --- public/_llms-txt/build.txt | 4 ++-- public/llms-full.txt | 4 ++-- .../build/self-service-portal/self-serve-portal-for-orgs.mdx | 4 ++-- .../build/self-service-portal/self-serve-portal-for-users.mdx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/public/_llms-txt/build.txt b/public/_llms-txt/build.txt index 8ef218108..026cddd00 100644 --- a/public/_llms-txt/build.txt +++ b/public/_llms-txt/build.txt @@ -301,7 +301,7 @@ You can run multiple businesses on Kinde. This is helpful if you want to create organization portal, self-serve portal, org management, billing portal, portal permissions, organization alias self-serve-portal, organizations, billing -You can configure a self-serve portal to enable authorized organization members to be able to self-manage functions provided by Kinde. Authorized org members can update: - [Business details](/manage-your-account/business-information/update-your-details/) - [Payment details](/manage-your-account/profile-and-plan/update-kinde-payment/) (if you have billing set up) - [API Keys](/manage-your-apis/add-manage-api-keys/self-serve-api-keys/) - [Members and roles](/get-started/team-and-account/add-team-members/) - Multi-factor auth settings (coming soon) - SSO enterprise connections (almost here) A self-serve portal means your customers can make account changes without contacting you for support. This can save you both time. If you are on the Kinde Scale plan, you can configure the [portal per organization](/build/organizations/self-serve-portal-per-org/). E.g. allow some functions for some customers and not others. ## Configure the organization self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal for orgs](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. 3. Add an **Organization alias** to represent how your customers are referred to in your business, e.g. Account, Partner, Workspace, etc. This will be visible in the interface in the portal. 4. In the **Organization profile** section, select the functions you want organization admins to be able to manage. ![Options for showing hiding settings for org members](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/13cf1ec6-bbe1-4059-4c78-b97d94b2b200/public) 5. Select **Save**. ## Portal access control with system permissions Each core function within the self-serve portal is governed by a corresponding system permission. For example, the `org:write:billing` permission allows users to update billing details. These permissions can be included in your custom roles and assigned to organization members. We recommend creating custom roles with varying levels of portal access, which you can then assign as needed. For instance, you might create a role that allows members to view billing details but not update them. You can select these permissions within your existing roles, or when you create them. ![Roles with system permissions for self-serve portal](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/1e90e72e-00d5-4063-8d34-79d1a9b8f000/public) When [configuring org roles](/billing/get-started/add-billing-role/), you can specify whether it should be: - Automatically assigned to all new organization members. - Automatically assigned to the organization creator. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. You then use the link on an 'account' or 'profile' button in your app to open the Kinde portal screens. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** ### Include the self-serve portal link in the user's access token This method is ideal when you want to generate the portal link on the fly—for example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `sub_nav` – specify the portal section to open (e.g., `organization_billing`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_billing`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/fb38548b-e530-4dfa-68b3-29ef2f287700/public) +You can configure a self-serve portal to enable authorized organization members to be able to self-manage functions provided by Kinde. Authorized org members can update: - [Business details](/manage-your-account/business-information/update-your-details/) - [Payment details](/manage-your-account/profile-and-plan/update-kinde-payment/) (if you have billing set up) - [API Keys](/manage-your-apis/add-manage-api-keys/self-serve-api-keys/) - [Members and roles](/get-started/team-and-account/add-team-members/) - Multi-factor auth settings (coming soon) - SSO enterprise connections (almost here) A self-serve portal means your customers can make account changes without contacting you for support. This can save you both time. If you are on the Kinde Scale plan, you can configure the [portal per organization](/build/organizations/self-serve-portal-per-org/). E.g. allow some functions for some customers and not others. ## Configure the organization self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal for orgs](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. 3. Add an **Organization alias** to represent how your customers are referred to in your business, e.g. Account, Partner, Workspace, etc. This will be visible in the interface in the portal. 4. In the **Organization profile** section, select the functions you want organization admins to be able to manage. ![Options for showing hiding settings for org members](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/13cf1ec6-bbe1-4059-4c78-b97d94b2b200/public) 5. Select **Save**. ## Portal access control with system permissions Each core function within the self-serve portal is governed by a corresponding system permission. For example, the `org:write:billing` permission allows users to update billing details. These permissions can be included in your custom roles and assigned to organization members. We recommend creating custom roles with varying levels of portal access, which you can then assign as needed. For instance, you might create a role that allows members to view billing details but not update them. You can select these permissions within your existing roles, or when you create them. ![Roles with system permissions for self-serve portal](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/1e90e72e-00d5-4063-8d34-79d1a9b8f000/public) When [configuring org roles](/billing/get-started/add-billing-role/), you can specify whether it should be: - Automatically assigned to all new organization members. - Automatically assigned to the organization creator. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. You then use the link on an 'account' or 'profile' button in your app to open the Kinde portal screens. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** ### Include the self-serve portal link in the user's access token This method is ideal when you want to generate the portal link on the fly—for example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `sub_nav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/fb38548b-e530-4dfa-68b3-29ef2f287700/public) # Build - Set up options - Enable self-serve portal for users @@ -310,7 +310,7 @@ You can configure a self-serve portal to enable authorized organization members self-serve portal, user portal, account management, billing portal, portal link, account API self-serve-portal, user-management, billing -You can configure a self-serve portal to enable users to be able to self-manage functions provided by Kinde. For example, you can allow users to update their profile, as well as their billing subscription and payment details (if you have billing set up). If you have a B2C business, you might want to set this up. A self-serve portal means your customers can make basic account changes without contacting you for support. This can save time and money. ## Configure the user self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal set up in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. This can also be used as a fallback URL if you decide to use the SDK method of dynamically generting the URL (see below). 3. In the **User profile** section, select the functions you want the user to be able to manage. If you select **Billing**, they can manage their plan as well as payment methods. ![Self-serve portal settings for users](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/f821e9c5-497d-41f0-b373-2755320d1c00/public) 4. Select **Save**. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** Both methods are able to generate the portal link on the fly. For example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `sub_nav` – specify the portal section to open (e.g., `organization_billing`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_billing`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/4b3574c5-a499-4da5-e8d0-467d56255e00/public) You can also watch this short video showing how the portal works when a customer signs up for a plan using Kinde billing. +You can configure a self-serve portal to enable users to be able to self-manage functions provided by Kinde. For example, you can allow users to update their profile, as well as their billing subscription and payment details (if you have billing set up). If you have a B2C business, you might want to set this up. A self-serve portal means your customers can make basic account changes without contacting you for support. This can save time and money. ## Configure the user self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal set up in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. This can also be used as a fallback URL if you decide to use the SDK method of dynamically generting the URL (see below). 3. In the **User profile** section, select the functions you want the user to be able to manage. If you select **Billing**, they can manage their plan as well as payment methods. ![Self-serve portal settings for users](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/f821e9c5-497d-41f0-b373-2755320d1c00/public) 4. Select **Save**. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** Both methods are able to generate the portal link on the fly. For example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `sub_nav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/4b3574c5-a499-4da5-e8d0-467d56255e00/public) You can also watch this short video showing how the portal works when a customer signs up for a plan using Kinde billing. # Build - Set up options - Manage your code in Kinde diff --git a/public/llms-full.txt b/public/llms-full.txt index 1102953b0..9cbac0044 100644 --- a/public/llms-full.txt +++ b/public/llms-full.txt @@ -1136,7 +1136,7 @@ You can run multiple businesses on Kinde. This is helpful if you want to create organization portal, self-serve portal, org management, billing portal, portal permissions, organization alias self-serve-portal, organizations, billing -You can configure a self-serve portal to enable authorized organization members to be able to self-manage functions provided by Kinde. Authorized org members can update: - [Business details](/manage-your-account/business-information/update-your-details/) - [Payment details](/manage-your-account/profile-and-plan/update-kinde-payment/) (if you have billing set up) - [API Keys](/manage-your-apis/add-manage-api-keys/self-serve-api-keys/) - [Members and roles](/get-started/team-and-account/add-team-members/) - Multi-factor auth settings (coming soon) - SSO enterprise connections (almost here) A self-serve portal means your customers can make account changes without contacting you for support. This can save you both time. If you are on the Kinde Scale plan, you can configure the [portal per organization](/build/organizations/self-serve-portal-per-org/). E.g. allow some functions for some customers and not others. ## Configure the organization self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal for orgs](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. 3. Add an **Organization alias** to represent how your customers are referred to in your business, e.g. Account, Partner, Workspace, etc. This will be visible in the interface in the portal. 4. In the **Organization profile** section, select the functions you want organization admins to be able to manage. ![Options for showing hiding settings for org members](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/13cf1ec6-bbe1-4059-4c78-b97d94b2b200/public) 5. Select **Save**. ## Portal access control with system permissions Each core function within the self-serve portal is governed by a corresponding system permission. For example, the `org:write:billing` permission allows users to update billing details. These permissions can be included in your custom roles and assigned to organization members. We recommend creating custom roles with varying levels of portal access, which you can then assign as needed. For instance, you might create a role that allows members to view billing details but not update them. You can select these permissions within your existing roles, or when you create them. ![Roles with system permissions for self-serve portal](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/1e90e72e-00d5-4063-8d34-79d1a9b8f000/public) When [configuring org roles](/billing/get-started/add-billing-role/), you can specify whether it should be: - Automatically assigned to all new organization members. - Automatically assigned to the organization creator. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. You then use the link on an 'account' or 'profile' button in your app to open the Kinde portal screens. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** ### Include the self-serve portal link in the user's access token This method is ideal when you want to generate the portal link on the fly—for example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `sub_nav` – specify the portal section to open (e.g., `organization_billing`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_billing`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/fb38548b-e530-4dfa-68b3-29ef2f287700/public) +You can configure a self-serve portal to enable authorized organization members to be able to self-manage functions provided by Kinde. Authorized org members can update: - [Business details](/manage-your-account/business-information/update-your-details/) - [Payment details](/manage-your-account/profile-and-plan/update-kinde-payment/) (if you have billing set up) - [API Keys](/manage-your-apis/add-manage-api-keys/self-serve-api-keys/) - [Members and roles](/get-started/team-and-account/add-team-members/) - Multi-factor auth settings (coming soon) - SSO enterprise connections (almost here) A self-serve portal means your customers can make account changes without contacting you for support. This can save you both time. If you are on the Kinde Scale plan, you can configure the [portal per organization](/build/organizations/self-serve-portal-per-org/). E.g. allow some functions for some customers and not others. ## Configure the organization self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal for orgs](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. 3. Add an **Organization alias** to represent how your customers are referred to in your business, e.g. Account, Partner, Workspace, etc. This will be visible in the interface in the portal. 4. In the **Organization profile** section, select the functions you want organization admins to be able to manage. ![Options for showing hiding settings for org members](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/13cf1ec6-bbe1-4059-4c78-b97d94b2b200/public) 5. Select **Save**. ## Portal access control with system permissions Each core function within the self-serve portal is governed by a corresponding system permission. For example, the `org:write:billing` permission allows users to update billing details. These permissions can be included in your custom roles and assigned to organization members. We recommend creating custom roles with varying levels of portal access, which you can then assign as needed. For instance, you might create a role that allows members to view billing details but not update them. You can select these permissions within your existing roles, or when you create them. ![Roles with system permissions for self-serve portal](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/1e90e72e-00d5-4063-8d34-79d1a9b8f000/public) When [configuring org roles](/billing/get-started/add-billing-role/), you can specify whether it should be: - Automatically assigned to all new organization members. - Automatically assigned to the organization creator. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. You then use the link on an 'account' or 'profile' button in your app to open the Kinde portal screens. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** ### Include the self-serve portal link in the user's access token This method is ideal when you want to generate the portal link on the fly—for example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `sub_nav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/fb38548b-e530-4dfa-68b3-29ef2f287700/public) # Build - Set up options - Enable self-serve portal for users @@ -1145,7 +1145,7 @@ You can configure a self-serve portal to enable authorized organization members self-serve portal, user portal, account management, billing portal, portal link, account API self-serve-portal, user-management, billing -You can configure a self-serve portal to enable users to be able to self-manage functions provided by Kinde. For example, you can allow users to update their profile, as well as their billing subscription and payment details (if you have billing set up). If you have a B2C business, you might want to set this up. A self-serve portal means your customers can make basic account changes without contacting you for support. This can save time and money. ## Configure the user self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal set up in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. This can also be used as a fallback URL if you decide to use the SDK method of dynamically generting the URL (see below). 3. In the **User profile** section, select the functions you want the user to be able to manage. If you select **Billing**, they can manage their plan as well as payment methods. ![Self-serve portal settings for users](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/f821e9c5-497d-41f0-b373-2755320d1c00/public) 4. Select **Save**. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** Both methods are able to generate the portal link on the fly. For example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `sub_nav` – specify the portal section to open (e.g., `organization_billing`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_billing`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/4b3574c5-a499-4da5-e8d0-467d56255e00/public) You can also watch this short video showing how the portal works when a customer signs up for a plan using Kinde billing. +You can configure a self-serve portal to enable users to be able to self-manage functions provided by Kinde. For example, you can allow users to update their profile, as well as their billing subscription and payment details (if you have billing set up). If you have a B2C business, you might want to set this up. A self-serve portal means your customers can make basic account changes without contacting you for support. This can save time and money. ## Configure the user self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal set up in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. This can also be used as a fallback URL if you decide to use the SDK method of dynamically generting the URL (see below). 3. In the **User profile** section, select the functions you want the user to be able to manage. If you select **Billing**, they can manage their plan as well as payment methods. ![Self-serve portal settings for users](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/f821e9c5-497d-41f0-b373-2755320d1c00/public) 4. Select **Save**. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** Both methods are able to generate the portal link on the fly. For example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `sub_nav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/4b3574c5-a499-4da5-e8d0-467d56255e00/public) You can also watch this short video showing how the portal works when a customer signs up for a plan using Kinde billing. # Build - Set up options - Manage your code in Kinde diff --git a/src/content/docs/build/self-service-portal/self-serve-portal-for-orgs.mdx b/src/content/docs/build/self-service-portal/self-serve-portal-for-orgs.mdx index accb1ab36..45ce31697 100644 --- a/src/content/docs/build/self-service-portal/self-serve-portal-for-orgs.mdx +++ b/src/content/docs/build/self-service-portal/self-serve-portal-for-orgs.mdx @@ -109,7 +109,7 @@ window.location = data.url; Optional parameters: - `return_url` – where to redirect the user after exiting the portal. -- `sub_nav` – specify the portal section to open (e.g., `organization_billing`, `profile`). +- `sub_nav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API @@ -124,7 +124,7 @@ Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M t "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal - "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_billing`, `profile`) + "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` diff --git a/src/content/docs/build/self-service-portal/self-serve-portal-for-users.mdx b/src/content/docs/build/self-service-portal/self-serve-portal-for-users.mdx index dd7889273..0dd3edc81 100644 --- a/src/content/docs/build/self-service-portal/self-serve-portal-for-users.mdx +++ b/src/content/docs/build/self-service-portal/self-serve-portal-for-users.mdx @@ -103,7 +103,7 @@ window.location = data.url; Optional parameters: - `return_url` – where to redirect the user after exiting the portal. -- `sub_nav` – specify the portal section to open (e.g., `organization_billing`, `profile`). +- `sub_nav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Using the Kinde Management API @@ -118,7 +118,7 @@ Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M t "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal - "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_billing`, `profile`) + "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` From c46e8f74af1b02c4741b655c23068042ceade0f1 Mon Sep 17 00:00:00 2001 From: Abdelrahman Zaki Date: Thu, 21 May 2026 00:05:24 +0300 Subject: [PATCH 2/3] fix: correct Account API sub_nav parameter to subnav in self-serve portal examples --- public/_llms-txt/build.txt | 4 ++-- public/llms-full.txt | 4 ++-- .../build/self-service-portal/self-serve-portal-for-orgs.mdx | 2 +- .../build/self-service-portal/self-serve-portal-for-users.mdx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/public/_llms-txt/build.txt b/public/_llms-txt/build.txt index 026cddd00..06768fbc5 100644 --- a/public/_llms-txt/build.txt +++ b/public/_llms-txt/build.txt @@ -301,7 +301,7 @@ You can run multiple businesses on Kinde. This is helpful if you want to create organization portal, self-serve portal, org management, billing portal, portal permissions, organization alias self-serve-portal, organizations, billing -You can configure a self-serve portal to enable authorized organization members to be able to self-manage functions provided by Kinde. Authorized org members can update: - [Business details](/manage-your-account/business-information/update-your-details/) - [Payment details](/manage-your-account/profile-and-plan/update-kinde-payment/) (if you have billing set up) - [API Keys](/manage-your-apis/add-manage-api-keys/self-serve-api-keys/) - [Members and roles](/get-started/team-and-account/add-team-members/) - Multi-factor auth settings (coming soon) - SSO enterprise connections (almost here) A self-serve portal means your customers can make account changes without contacting you for support. This can save you both time. If you are on the Kinde Scale plan, you can configure the [portal per organization](/build/organizations/self-serve-portal-per-org/). E.g. allow some functions for some customers and not others. ## Configure the organization self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal for orgs](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. 3. Add an **Organization alias** to represent how your customers are referred to in your business, e.g. Account, Partner, Workspace, etc. This will be visible in the interface in the portal. 4. In the **Organization profile** section, select the functions you want organization admins to be able to manage. ![Options for showing hiding settings for org members](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/13cf1ec6-bbe1-4059-4c78-b97d94b2b200/public) 5. Select **Save**. ## Portal access control with system permissions Each core function within the self-serve portal is governed by a corresponding system permission. For example, the `org:write:billing` permission allows users to update billing details. These permissions can be included in your custom roles and assigned to organization members. We recommend creating custom roles with varying levels of portal access, which you can then assign as needed. For instance, you might create a role that allows members to view billing details but not update them. You can select these permissions within your existing roles, or when you create them. ![Roles with system permissions for self-serve portal](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/1e90e72e-00d5-4063-8d34-79d1a9b8f000/public) When [configuring org roles](/billing/get-started/add-billing-role/), you can specify whether it should be: - Automatically assigned to all new organization members. - Automatically assigned to the organization creator. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. You then use the link on an 'account' or 'profile' button in your app to open the Kinde portal screens. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** ### Include the self-serve portal link in the user's access token This method is ideal when you want to generate the portal link on the fly—for example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `sub_nav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/fb38548b-e530-4dfa-68b3-29ef2f287700/public) +You can configure a self-serve portal to enable authorized organization members to be able to self-manage functions provided by Kinde. Authorized org members can update: - [Business details](/manage-your-account/business-information/update-your-details/) - [Payment details](/manage-your-account/profile-and-plan/update-kinde-payment/) (if you have billing set up) - [API Keys](/manage-your-apis/add-manage-api-keys/self-serve-api-keys/) - [Members and roles](/get-started/team-and-account/add-team-members/) - Multi-factor auth settings (coming soon) - SSO enterprise connections (almost here) A self-serve portal means your customers can make account changes without contacting you for support. This can save you both time. If you are on the Kinde Scale plan, you can configure the [portal per organization](/build/organizations/self-serve-portal-per-org/). E.g. allow some functions for some customers and not others. ## Configure the organization self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal for orgs](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. 3. Add an **Organization alias** to represent how your customers are referred to in your business, e.g. Account, Partner, Workspace, etc. This will be visible in the interface in the portal. 4. In the **Organization profile** section, select the functions you want organization admins to be able to manage. ![Options for showing hiding settings for org members](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/13cf1ec6-bbe1-4059-4c78-b97d94b2b200/public) 5. Select **Save**. ## Portal access control with system permissions Each core function within the self-serve portal is governed by a corresponding system permission. For example, the `org:write:billing` permission allows users to update billing details. These permissions can be included in your custom roles and assigned to organization members. We recommend creating custom roles with varying levels of portal access, which you can then assign as needed. For instance, you might create a role that allows members to view billing details but not update them. You can select these permissions within your existing roles, or when you create them. ![Roles with system permissions for self-serve portal](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/1e90e72e-00d5-4063-8d34-79d1a9b8f000/public) When [configuring org roles](/billing/get-started/add-billing-role/), you can specify whether it should be: - Automatically assigned to all new organization members. - Automatically assigned to the organization creator. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. You then use the link on an 'account' or 'profile' button in your app to open the Kinde portal screens. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** ### Include the self-serve portal link in the user's access token This method is ideal when you want to generate the portal link on the fly—for example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `subnav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/fb38548b-e530-4dfa-68b3-29ef2f287700/public) # Build - Set up options - Enable self-serve portal for users @@ -310,7 +310,7 @@ You can configure a self-serve portal to enable authorized organization members self-serve portal, user portal, account management, billing portal, portal link, account API self-serve-portal, user-management, billing -You can configure a self-serve portal to enable users to be able to self-manage functions provided by Kinde. For example, you can allow users to update their profile, as well as their billing subscription and payment details (if you have billing set up). If you have a B2C business, you might want to set this up. A self-serve portal means your customers can make basic account changes without contacting you for support. This can save time and money. ## Configure the user self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal set up in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. This can also be used as a fallback URL if you decide to use the SDK method of dynamically generting the URL (see below). 3. In the **User profile** section, select the functions you want the user to be able to manage. If you select **Billing**, they can manage their plan as well as payment methods. ![Self-serve portal settings for users](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/f821e9c5-497d-41f0-b373-2755320d1c00/public) 4. Select **Save**. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** Both methods are able to generate the portal link on the fly. For example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `sub_nav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/4b3574c5-a499-4da5-e8d0-467d56255e00/public) You can also watch this short video showing how the portal works when a customer signs up for a plan using Kinde billing. +You can configure a self-serve portal to enable users to be able to self-manage functions provided by Kinde. For example, you can allow users to update their profile, as well as their billing subscription and payment details (if you have billing set up). If you have a B2C business, you might want to set this up. A self-serve portal means your customers can make basic account changes without contacting you for support. This can save time and money. ## Configure the user self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal set up in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. This can also be used as a fallback URL if you decide to use the SDK method of dynamically generting the URL (see below). 3. In the **User profile** section, select the functions you want the user to be able to manage. If you select **Billing**, they can manage their plan as well as payment methods. ![Self-serve portal settings for users](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/f821e9c5-497d-41f0-b373-2755320d1c00/public) 4. Select **Save**. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** Both methods are able to generate the portal link on the fly. For example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `subnav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/4b3574c5-a499-4da5-e8d0-467d56255e00/public) You can also watch this short video showing how the portal works when a customer signs up for a plan using Kinde billing. # Build - Set up options - Manage your code in Kinde diff --git a/public/llms-full.txt b/public/llms-full.txt index 9cbac0044..bda840b4c 100644 --- a/public/llms-full.txt +++ b/public/llms-full.txt @@ -1136,7 +1136,7 @@ You can run multiple businesses on Kinde. This is helpful if you want to create organization portal, self-serve portal, org management, billing portal, portal permissions, organization alias self-serve-portal, organizations, billing -You can configure a self-serve portal to enable authorized organization members to be able to self-manage functions provided by Kinde. Authorized org members can update: - [Business details](/manage-your-account/business-information/update-your-details/) - [Payment details](/manage-your-account/profile-and-plan/update-kinde-payment/) (if you have billing set up) - [API Keys](/manage-your-apis/add-manage-api-keys/self-serve-api-keys/) - [Members and roles](/get-started/team-and-account/add-team-members/) - Multi-factor auth settings (coming soon) - SSO enterprise connections (almost here) A self-serve portal means your customers can make account changes without contacting you for support. This can save you both time. If you are on the Kinde Scale plan, you can configure the [portal per organization](/build/organizations/self-serve-portal-per-org/). E.g. allow some functions for some customers and not others. ## Configure the organization self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal for orgs](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. 3. Add an **Organization alias** to represent how your customers are referred to in your business, e.g. Account, Partner, Workspace, etc. This will be visible in the interface in the portal. 4. In the **Organization profile** section, select the functions you want organization admins to be able to manage. ![Options for showing hiding settings for org members](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/13cf1ec6-bbe1-4059-4c78-b97d94b2b200/public) 5. Select **Save**. ## Portal access control with system permissions Each core function within the self-serve portal is governed by a corresponding system permission. For example, the `org:write:billing` permission allows users to update billing details. These permissions can be included in your custom roles and assigned to organization members. We recommend creating custom roles with varying levels of portal access, which you can then assign as needed. For instance, you might create a role that allows members to view billing details but not update them. You can select these permissions within your existing roles, or when you create them. ![Roles with system permissions for self-serve portal](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/1e90e72e-00d5-4063-8d34-79d1a9b8f000/public) When [configuring org roles](/billing/get-started/add-billing-role/), you can specify whether it should be: - Automatically assigned to all new organization members. - Automatically assigned to the organization creator. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. You then use the link on an 'account' or 'profile' button in your app to open the Kinde portal screens. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** ### Include the self-serve portal link in the user's access token This method is ideal when you want to generate the portal link on the fly—for example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `sub_nav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/fb38548b-e530-4dfa-68b3-29ef2f287700/public) +You can configure a self-serve portal to enable authorized organization members to be able to self-manage functions provided by Kinde. Authorized org members can update: - [Business details](/manage-your-account/business-information/update-your-details/) - [Payment details](/manage-your-account/profile-and-plan/update-kinde-payment/) (if you have billing set up) - [API Keys](/manage-your-apis/add-manage-api-keys/self-serve-api-keys/) - [Members and roles](/get-started/team-and-account/add-team-members/) - Multi-factor auth settings (coming soon) - SSO enterprise connections (almost here) A self-serve portal means your customers can make account changes without contacting you for support. This can save you both time. If you are on the Kinde Scale plan, you can configure the [portal per organization](/build/organizations/self-serve-portal-per-org/). E.g. allow some functions for some customers and not others. ## Configure the organization self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal for orgs](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. 3. Add an **Organization alias** to represent how your customers are referred to in your business, e.g. Account, Partner, Workspace, etc. This will be visible in the interface in the portal. 4. In the **Organization profile** section, select the functions you want organization admins to be able to manage. ![Options for showing hiding settings for org members](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/13cf1ec6-bbe1-4059-4c78-b97d94b2b200/public) 5. Select **Save**. ## Portal access control with system permissions Each core function within the self-serve portal is governed by a corresponding system permission. For example, the `org:write:billing` permission allows users to update billing details. These permissions can be included in your custom roles and assigned to organization members. We recommend creating custom roles with varying levels of portal access, which you can then assign as needed. For instance, you might create a role that allows members to view billing details but not update them. You can select these permissions within your existing roles, or when you create them. ![Roles with system permissions for self-serve portal](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/1e90e72e-00d5-4063-8d34-79d1a9b8f000/public) When [configuring org roles](/billing/get-started/add-billing-role/), you can specify whether it should be: - Automatically assigned to all new organization members. - Automatically assigned to the organization creator. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. You then use the link on an 'account' or 'profile' button in your app to open the Kinde portal screens. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** ### Include the self-serve portal link in the user's access token This method is ideal when you want to generate the portal link on the fly—for example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `subnav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/fb38548b-e530-4dfa-68b3-29ef2f287700/public) # Build - Set up options - Enable self-serve portal for users @@ -1145,7 +1145,7 @@ You can configure a self-serve portal to enable authorized organization members self-serve portal, user portal, account management, billing portal, portal link, account API self-serve-portal, user-management, billing -You can configure a self-serve portal to enable users to be able to self-manage functions provided by Kinde. For example, you can allow users to update their profile, as well as their billing subscription and payment details (if you have billing set up). If you have a B2C business, you might want to set this up. A self-serve portal means your customers can make basic account changes without contacting you for support. This can save time and money. ## Configure the user self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal set up in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. This can also be used as a fallback URL if you decide to use the SDK method of dynamically generting the URL (see below). 3. In the **User profile** section, select the functions you want the user to be able to manage. If you select **Billing**, they can manage their plan as well as payment methods. ![Self-serve portal settings for users](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/f821e9c5-497d-41f0-b373-2755320d1c00/public) 4. Select **Save**. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** Both methods are able to generate the portal link on the fly. For example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `sub_nav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/4b3574c5-a499-4da5-e8d0-467d56255e00/public) You can also watch this short video showing how the portal works when a customer signs up for a plan using Kinde billing. +You can configure a self-serve portal to enable users to be able to self-manage functions provided by Kinde. For example, you can allow users to update their profile, as well as their billing subscription and payment details (if you have billing set up). If you have a B2C business, you might want to set this up. A self-serve portal means your customers can make basic account changes without contacting you for support. This can save time and money. ## Configure the user self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal set up in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. This can also be used as a fallback URL if you decide to use the SDK method of dynamically generting the URL (see below). 3. In the **User profile** section, select the functions you want the user to be able to manage. If you select **Billing**, they can manage their plan as well as payment methods. ![Self-serve portal settings for users](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/f821e9c5-497d-41f0-b373-2755320d1c00/public) 4. Select **Save**. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** Both methods are able to generate the portal link on the fly. For example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `subnav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/4b3574c5-a499-4da5-e8d0-467d56255e00/public) You can also watch this short video showing how the portal works when a customer signs up for a plan using Kinde billing. # Build - Set up options - Manage your code in Kinde diff --git a/src/content/docs/build/self-service-portal/self-serve-portal-for-orgs.mdx b/src/content/docs/build/self-service-portal/self-serve-portal-for-orgs.mdx index 45ce31697..765e69d05 100644 --- a/src/content/docs/build/self-service-portal/self-serve-portal-for-orgs.mdx +++ b/src/content/docs/build/self-service-portal/self-serve-portal-for-orgs.mdx @@ -109,7 +109,7 @@ window.location = data.url; Optional parameters: - `return_url` – where to redirect the user after exiting the portal. -- `sub_nav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). +- `subnav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API diff --git a/src/content/docs/build/self-service-portal/self-serve-portal-for-users.mdx b/src/content/docs/build/self-service-portal/self-serve-portal-for-users.mdx index 0dd3edc81..e5e10857d 100644 --- a/src/content/docs/build/self-service-portal/self-serve-portal-for-users.mdx +++ b/src/content/docs/build/self-service-portal/self-serve-portal-for-users.mdx @@ -103,7 +103,7 @@ window.location = data.url; Optional parameters: - `return_url` – where to redirect the user after exiting the portal. -- `sub_nav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). +- `subnav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Using the Kinde Management API From b90c30d9c5b91def8d5b1e235b2aa30e3387e35b Mon Sep 17 00:00:00 2001 From: Abdelrahman Zaki Date: Fri, 22 May 2026 22:00:54 +0300 Subject: [PATCH 3/3] fix: remove Management API portal-link examples and standardize Account API subnav usage --- public/_llms-txt/build.txt | 8 ++--- public/_llms-txt/manage-your-apis.txt | 2 +- public/llms-full.txt | 10 +++---- .../self-serve-portal-for-orgs.mdx | 28 ++--------------- .../self-serve-portal-for-users.mdx | 30 +++---------------- .../self-serve-api-keys.mdx | 24 ++++++++------- 6 files changed, 30 insertions(+), 72 deletions(-) diff --git a/public/_llms-txt/build.txt b/public/_llms-txt/build.txt index 06768fbc5..1a5f86caa 100644 --- a/public/_llms-txt/build.txt +++ b/public/_llms-txt/build.txt @@ -296,21 +296,21 @@ You can run multiple businesses on Kinde. This is helpful if you want to create # Build - Set up options - Enable self-serve portal for orgs -> Guide for enabling self-serve portals for organizations including business details management, billing access, permission controls, and portal link generation methods. +> Guide for enabling self-serve portals for organizations including business details management, billing access, permission controls, and generating portal links with SDK and Account API examples. organization portal, self-serve portal, org management, billing portal, portal permissions, organization alias self-serve-portal, organizations, billing -You can configure a self-serve portal to enable authorized organization members to be able to self-manage functions provided by Kinde. Authorized org members can update: - [Business details](/manage-your-account/business-information/update-your-details/) - [Payment details](/manage-your-account/profile-and-plan/update-kinde-payment/) (if you have billing set up) - [API Keys](/manage-your-apis/add-manage-api-keys/self-serve-api-keys/) - [Members and roles](/get-started/team-and-account/add-team-members/) - Multi-factor auth settings (coming soon) - SSO enterprise connections (almost here) A self-serve portal means your customers can make account changes without contacting you for support. This can save you both time. If you are on the Kinde Scale plan, you can configure the [portal per organization](/build/organizations/self-serve-portal-per-org/). E.g. allow some functions for some customers and not others. ## Configure the organization self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal for orgs](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. 3. Add an **Organization alias** to represent how your customers are referred to in your business, e.g. Account, Partner, Workspace, etc. This will be visible in the interface in the portal. 4. In the **Organization profile** section, select the functions you want organization admins to be able to manage. ![Options for showing hiding settings for org members](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/13cf1ec6-bbe1-4059-4c78-b97d94b2b200/public) 5. Select **Save**. ## Portal access control with system permissions Each core function within the self-serve portal is governed by a corresponding system permission. For example, the `org:write:billing` permission allows users to update billing details. These permissions can be included in your custom roles and assigned to organization members. We recommend creating custom roles with varying levels of portal access, which you can then assign as needed. For instance, you might create a role that allows members to view billing details but not update them. You can select these permissions within your existing roles, or when you create them. ![Roles with system permissions for self-serve portal](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/1e90e72e-00d5-4063-8d34-79d1a9b8f000/public) When [configuring org roles](/billing/get-started/add-billing-role/), you can specify whether it should be: - Automatically assigned to all new organization members. - Automatically assigned to the organization creator. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. You then use the link on an 'account' or 'profile' button in your app to open the Kinde portal screens. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** ### Include the self-serve portal link in the user's access token This method is ideal when you want to generate the portal link on the fly—for example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `subnav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/fb38548b-e530-4dfa-68b3-29ef2f287700/public) +You can configure a self-serve portal to enable authorized organization members to be able to self-manage functions provided by Kinde. Authorized org members can update: - [Business details](/manage-your-account/business-information/update-your-details/) - [Payment details](/manage-your-account/profile-and-plan/update-kinde-payment/) (if you have billing set up) - [API Keys](/manage-your-apis/add-manage-api-keys/self-serve-api-keys/) - Members and roles - [SSO enterprise connections](/authenticate/self-serve-sso/add-sso-self-serve/) (in beta) - Multi-factor auth settings (coming soon) A self-serve portal means your customers can make account changes without contacting you for support. This can save you both time. If you are on the Kinde Scale plan, you can configure the [portal per organization](/build/organizations/self-serve-portal-per-org/). E.g. allow some functions for some customers and not others. ## Configure the organization self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal for orgs](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. 3. Add an **Organization alias** to represent how your customers are referred to in your business, e.g. Account, Partner, Workspace, etc. This will be visible in the interface in the portal. 4. In the **Organization profile** section, select the functions you want organization admins to be able to manage. ![Options for showing hiding settings for org members](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/5f99fef4-86e5-4a67-5a80-43ae34cbbd00/public) 5. Select **Save**. ## Portal access control with system permissions Each core function within the self-serve portal is governed by a corresponding system permission. For example, the `org:write:billing` permission allows users to update billing details. These permissions can be included in your custom roles and assigned to organization members. We recommend creating custom roles with varying levels of portal access, which you can then assign as needed. For instance, you might create a role that allows members to view billing details but not update them. You can select these permissions within your existing roles, or when you create them. ![Roles with system permissions for self-serve portal](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/1e90e72e-00d5-4063-8d34-79d1a9b8f000/public) When [configuring org roles](/billing/get-started/add-billing-role/), you can specify whether it should be: - Automatically assigned to all new organization members. - Automatically assigned to the organization creator. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. You then use the link on an 'account' or 'profile' button in your app to open the Kinde portal screens. You can generate the link using the user's access token (recommended). ### Include the self-serve portal link in the user's access token This method is ideal when you want to generate the portal link on the fly—for example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `subnav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/5dcfae1b-7c0f-4eeb-96f7-1baeed7e3000/public) # Build - Set up options - Enable self-serve portal for users -> Guide for enabling and configuring self-serve portals for users including profile management, billing access, and multiple methods for generating portal links with SDK and API examples. +> Guide for enabling and configuring self-service portals for users including profile management, billing access, and generating portal links with SDK and Account API examples. self-serve portal, user portal, account management, billing portal, portal link, account API self-serve-portal, user-management, billing -You can configure a self-serve portal to enable users to be able to self-manage functions provided by Kinde. For example, you can allow users to update their profile, as well as their billing subscription and payment details (if you have billing set up). If you have a B2C business, you might want to set this up. A self-serve portal means your customers can make basic account changes without contacting you for support. This can save time and money. ## Configure the user self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal set up in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. This can also be used as a fallback URL if you decide to use the SDK method of dynamically generting the URL (see below). 3. In the **User profile** section, select the functions you want the user to be able to manage. If you select **Billing**, they can manage their plan as well as payment methods. ![Self-serve portal settings for users](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/f821e9c5-497d-41f0-b373-2755320d1c00/public) 4. Select **Save**. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** Both methods are able to generate the portal link on the fly. For example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `subnav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/4b3574c5-a499-4da5-e8d0-467d56255e00/public) You can also watch this short video showing how the portal works when a customer signs up for a plan using Kinde billing. +You can configure a self-serve portal to enable users to be able to self-manage functions provided by Kinde. For example, you can allow users to update their profile, as well as their billing subscription and payment details (if you have billing set up). If you have a B2C business, you might want to set this up. A self-serve portal means your customers can make basic account changes without contacting you for support. This can save time and money. ## Configure the user self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. This can also be used as a fallback URL if you decide to use the SDK method of dynamically generating the URL (see below). ![Settings for self-serve portal set up in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) ## User self-management ![Self-serve portal settings for users](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/877380ff-7b4a-4be0-a369-8c6a59a0d200/socialsharingimage) ### User profile Allows users to update their profile information, including first name, and last name. If you do not want users to change these fields, disable **User profile**. When users sign in with a social provider (for example, Google), the social profile can take priority and overwrite name values the next time they sign in. Also, name changes might not appear in your app immediately if an old access token is still being used. Users need to refresh the access token or sign out and sign in again. ### Billing Allows users to manage their billing subscription, change or cancel their plan, and update payment details (if you have billing set up). ### API Keys Allows users to create and manage their API keys. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. You can generate the portal link on the fly when a user clicks an "Account" button in your app. ### Generate using a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react/components"; Account; ``` ### Generate without an SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `subnav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/4b3574c5-a499-4da5-e8d0-467d56255e00/public) You can also watch this short video showing how the portal works when a customer signs up for a plan using Kinde billing. # Build - Set up options - Manage your code in Kinde diff --git a/public/_llms-txt/manage-your-apis.txt b/public/_llms-txt/manage-your-apis.txt index 78c34290a..9aa657706 100644 --- a/public/_llms-txt/manage-your-apis.txt +++ b/public/_llms-txt/manage-your-apis.txt @@ -139,7 +139,7 @@ Scopes define what permissions an API key has when making requests to your API. self-serve portal, api keys, PortalLink, deep link api-keys, self-serve-portal -You can allow your customers to create and manage their own API keys directly in the self-serve portal for users and organizations. ## Switch on self-serve API keys in Kinde 1. Go to **Settings** > **Environment** > **Self-serve portal**. 2. Enable the API Keys option for the audience you want: - Users (B2C) - Organizations (B2B) 3. Select **Save**. An **API keys** navigation item will appear in the portal for your customers. ### Self-serve portal details - [Self-serve portal for orgs](/build/self-service-portal/self-serve-portal-for-orgs/) - [Self-serve portal for users](/build/self-service-portal/self-serve-portal-for-users/) ## Deep link to API keys from your app Most SDKs provide a `PortalLink` helper that generates a one-time portal URL and redirects the user. Use the `subNav` parameter to open the API Keys section directly. ### React ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; // Opens the organization level API Keys section in the self-serve portal Manage API keys; ``` ### Next.js ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-nextjs/components"; // Opens the API Keys section in the self-serve portal Manage API keys; ``` ### Without an SDK (server-side) If you generate portal links using an API on your server, include a `sub_nav` field to deep link to API Keys. ```json { "user_id": "kp_abc123", // or organization_code for org-level links "return_url": "https://yourapp.com/account", "sub_nav": "api_keys" } ``` ### Tips for setting up - Use `subNav` (camelCase) in SDK helpers and `sub_nav` (snake_case) in API payloads. - For organization-level experiences, pass organization context according to your integration pattern. ## Customer portal experience After enabling the API key function for customers, an **API Keys** item shows in the portal navigation where customers can create, view, rotate and revoke keys. ## Access control for self-serve organization level API keys There are system level permissions which Kinde provides which you can assign to your custom roles. - `read:org:authentication` - The user is able to view API keys created by the organization - `write:org:authentication` - The user is able to create, rotate and revoke API keys for the organization. When assigning permissions to roles, our recommendation is to only give the minimum permissions required for someone to do their job. It is always better to be more granular in this area. +You can allow your customers to create and manage their own API keys directly in the self-serve portal for users and organizations. ## Switch on self-serve API keys in Kinde 1. Go to **Settings** > **Environment** > **Self-serve portal**. 2. Enable the API Keys option for the audience you want: - Users (B2C) - Organizations (B2B) 3. Select **Save**. An **API keys** navigation item will appear in the portal for your customers. ### Self-serve portal details - [Self-serve portal for orgs](/build/self-service-portal/self-serve-portal-for-orgs/) - [Self-serve portal for users](/build/self-service-portal/self-serve-portal-for-users/) ## Deep link to API keys from your app Most SDKs provide a `PortalLink` helper that generates a one-time portal URL and redirects the user. Use the `subNav` parameter to open the API Keys section directly. ### React ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; // Opens the organization level API Keys section in the self-serve portal Manage API keys; ``` ### Next.js ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-nextjs/components"; // Opens the API Keys section in the self-serve portal Manage API keys; ``` ### Without an SDK (Account API) If you're not using a Kinde SDK, call the Account API endpoint and pass `subnav` to deep link to API Keys. ```js const response = await fetch("/account_api/v1/portal_link?subnav=api_keys", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` ### Tips for setting up - Use `subNav` (camelCase) in SDK helpers and `subnav` (lowercase) in Account API requests. - For organization-level experiences, pass organization context according to your integration pattern. ## Customer portal experience After enabling the API key function for customers, an **API Keys** item shows in the portal navigation where customers can create, view, rotate and revoke keys. ## Access control for self-serve organization level API keys There are system level permissions which Kinde provides which you can assign to your custom roles. - `read:org:authentication` - The user is able to view API keys created by the organization - `write:org:authentication` - The user is able to create, rotate and revoke API keys for the organization. When assigning permissions to roles, our recommendation is to only give the minimum permissions required for someone to do their job. It is always better to be more granular in this area. # Manage your apis - Add manage api keys - Verify API keys in your API diff --git a/public/llms-full.txt b/public/llms-full.txt index bda840b4c..ba3bb3059 100644 --- a/public/llms-full.txt +++ b/public/llms-full.txt @@ -1131,21 +1131,21 @@ You can run multiple businesses on Kinde. This is helpful if you want to create # Build - Set up options - Enable self-serve portal for orgs -> Guide for enabling self-serve portals for organizations including business details management, billing access, permission controls, and portal link generation methods. +> Guide for enabling self-serve portals for organizations including business details management, billing access, permission controls, and generating portal links with SDK and Account API examples. organization portal, self-serve portal, org management, billing portal, portal permissions, organization alias self-serve-portal, organizations, billing -You can configure a self-serve portal to enable authorized organization members to be able to self-manage functions provided by Kinde. Authorized org members can update: - [Business details](/manage-your-account/business-information/update-your-details/) - [Payment details](/manage-your-account/profile-and-plan/update-kinde-payment/) (if you have billing set up) - [API Keys](/manage-your-apis/add-manage-api-keys/self-serve-api-keys/) - [Members and roles](/get-started/team-and-account/add-team-members/) - Multi-factor auth settings (coming soon) - SSO enterprise connections (almost here) A self-serve portal means your customers can make account changes without contacting you for support. This can save you both time. If you are on the Kinde Scale plan, you can configure the [portal per organization](/build/organizations/self-serve-portal-per-org/). E.g. allow some functions for some customers and not others. ## Configure the organization self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal for orgs](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. 3. Add an **Organization alias** to represent how your customers are referred to in your business, e.g. Account, Partner, Workspace, etc. This will be visible in the interface in the portal. 4. In the **Organization profile** section, select the functions you want organization admins to be able to manage. ![Options for showing hiding settings for org members](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/13cf1ec6-bbe1-4059-4c78-b97d94b2b200/public) 5. Select **Save**. ## Portal access control with system permissions Each core function within the self-serve portal is governed by a corresponding system permission. For example, the `org:write:billing` permission allows users to update billing details. These permissions can be included in your custom roles and assigned to organization members. We recommend creating custom roles with varying levels of portal access, which you can then assign as needed. For instance, you might create a role that allows members to view billing details but not update them. You can select these permissions within your existing roles, or when you create them. ![Roles with system permissions for self-serve portal](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/1e90e72e-00d5-4063-8d34-79d1a9b8f000/public) When [configuring org roles](/billing/get-started/add-billing-role/), you can specify whether it should be: - Automatically assigned to all new organization members. - Automatically assigned to the organization creator. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. You then use the link on an 'account' or 'profile' button in your app to open the Kinde portal screens. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** ### Include the self-serve portal link in the user's access token This method is ideal when you want to generate the portal link on the fly—for example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `subnav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/fb38548b-e530-4dfa-68b3-29ef2f287700/public) +You can configure a self-serve portal to enable authorized organization members to be able to self-manage functions provided by Kinde. Authorized org members can update: - [Business details](/manage-your-account/business-information/update-your-details/) - [Payment details](/manage-your-account/profile-and-plan/update-kinde-payment/) (if you have billing set up) - [API Keys](/manage-your-apis/add-manage-api-keys/self-serve-api-keys/) - Members and roles - [SSO enterprise connections](/authenticate/self-serve-sso/add-sso-self-serve/) (in beta) - Multi-factor auth settings (coming soon) A self-serve portal means your customers can make account changes without contacting you for support. This can save you both time. If you are on the Kinde Scale plan, you can configure the [portal per organization](/build/organizations/self-serve-portal-per-org/). E.g. allow some functions for some customers and not others. ## Configure the organization self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal for orgs](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. 3. Add an **Organization alias** to represent how your customers are referred to in your business, e.g. Account, Partner, Workspace, etc. This will be visible in the interface in the portal. 4. In the **Organization profile** section, select the functions you want organization admins to be able to manage. ![Options for showing hiding settings for org members](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/5f99fef4-86e5-4a67-5a80-43ae34cbbd00/public) 5. Select **Save**. ## Portal access control with system permissions Each core function within the self-serve portal is governed by a corresponding system permission. For example, the `org:write:billing` permission allows users to update billing details. These permissions can be included in your custom roles and assigned to organization members. We recommend creating custom roles with varying levels of portal access, which you can then assign as needed. For instance, you might create a role that allows members to view billing details but not update them. You can select these permissions within your existing roles, or when you create them. ![Roles with system permissions for self-serve portal](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/1e90e72e-00d5-4063-8d34-79d1a9b8f000/public) When [configuring org roles](/billing/get-started/add-billing-role/), you can specify whether it should be: - Automatically assigned to all new organization members. - Automatically assigned to the organization creator. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. You then use the link on an 'account' or 'profile' button in your app to open the Kinde portal screens. You can generate the link using the user's access token (recommended). ### Include the self-serve portal link in the user's access token This method is ideal when you want to generate the portal link on the fly—for example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `subnav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/5dcfae1b-7c0f-4eeb-96f7-1baeed7e3000/public) # Build - Set up options - Enable self-serve portal for users -> Guide for enabling and configuring self-serve portals for users including profile management, billing access, and multiple methods for generating portal links with SDK and API examples. +> Guide for enabling and configuring self-service portals for users including profile management, billing access, and generating portal links with SDK and Account API examples. self-serve portal, user portal, account management, billing portal, portal link, account API self-serve-portal, user-management, billing -You can configure a self-serve portal to enable users to be able to self-manage functions provided by Kinde. For example, you can allow users to update their profile, as well as their billing subscription and payment details (if you have billing set up). If you have a B2C business, you might want to set this up. A self-serve portal means your customers can make basic account changes without contacting you for support. This can save time and money. ## Configure the user self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. ![Settings for self-serve portal set up in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. This can also be used as a fallback URL if you decide to use the SDK method of dynamically generting the URL (see below). 3. In the **User profile** section, select the functions you want the user to be able to manage. If you select **Billing**, they can manage their plan as well as payment methods. ![Self-serve portal settings for users](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/f821e9c5-497d-41f0-b373-2755320d1c00/public) 4. Select **Save**. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. There are two main ways to generate this link: - **Using the user's access token** (recommended) - **Using the Kinde Management API** Both methods are able to generate the portal link on the fly. For example, when a user clicks an "Account" button in your app. ### Generate a self-serve portal link with a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; Account; ``` ### Generate a self-serve portal link without a Kinde SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `subnav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ### Manage the self-serve portal link using the Kinde Management API This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. **Request body** ```js { "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) } ``` This will return a one-time portal link for the specified user. ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/4b3574c5-a499-4da5-e8d0-467d56255e00/public) You can also watch this short video showing how the portal works when a customer signs up for a plan using Kinde billing. +You can configure a self-serve portal to enable users to be able to self-manage functions provided by Kinde. For example, you can allow users to update their profile, as well as their billing subscription and payment details (if you have billing set up). If you have a B2C business, you might want to set this up. A self-serve portal means your customers can make basic account changes without contacting you for support. This can save time and money. ## Configure the user self-serve portal 1. Go to **Settings > Environment > Self-serve portal**. 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. This can also be used as a fallback URL if you decide to use the SDK method of dynamically generating the URL (see below). ![Settings for self-serve portal set up in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public) ## User self-management ![Self-serve portal settings for users](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/877380ff-7b4a-4be0-a369-8c6a59a0d200/socialsharingimage) ### User profile Allows users to update their profile information, including first name, and last name. If you do not want users to change these fields, disable **User profile**. When users sign in with a social provider (for example, Google), the social profile can take priority and overwrite name values the next time they sign in. Also, name changes might not appear in your app immediately if an old access token is still being used. Users need to refresh the access token or sign out and sign in again. ### Billing Allows users to manage their billing subscription, change or cancel their plan, and update payment details (if you have billing set up). ### API Keys Allows users to create and manage their API keys. ## Generate the self-serve portal link Access to the portal is granted via a one-time link. You can generate the portal link on the fly when a user clicks an "Account" button in your app. ### Generate using a Kinde SDK If you're using the Kinde React SDK, you can use the `` component, which both generates the link and redirects the user: ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react/components"; Account; ``` ### Generate without an SDK If you're not using a Kinde SDK, you can manually call the Account API: ```js const response = await fetch("/account_api/v1/portal_link", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `subnav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. ![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/4b3574c5-a499-4da5-e8d0-467d56255e00/public) You can also watch this short video showing how the portal works when a customer signs up for a plan using Kinde billing. # Build - Set up options - Manage your code in Kinde @@ -2891,7 +2891,7 @@ Scopes define what permissions an API key has when making requests to your API. self-serve portal, api keys, PortalLink, deep link api-keys, self-serve-portal -You can allow your customers to create and manage their own API keys directly in the self-serve portal for users and organizations. ## Switch on self-serve API keys in Kinde 1. Go to **Settings** > **Environment** > **Self-serve portal**. 2. Enable the API Keys option for the audience you want: - Users (B2C) - Organizations (B2B) 3. Select **Save**. An **API keys** navigation item will appear in the portal for your customers. ### Self-serve portal details - [Self-serve portal for orgs](/build/self-service-portal/self-serve-portal-for-orgs/) - [Self-serve portal for users](/build/self-service-portal/self-serve-portal-for-users/) ## Deep link to API keys from your app Most SDKs provide a `PortalLink` helper that generates a one-time portal URL and redirects the user. Use the `subNav` parameter to open the API Keys section directly. ### React ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; // Opens the organization level API Keys section in the self-serve portal Manage API keys; ``` ### Next.js ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-nextjs/components"; // Opens the API Keys section in the self-serve portal Manage API keys; ``` ### Without an SDK (server-side) If you generate portal links using an API on your server, include a `sub_nav` field to deep link to API Keys. ```json { "user_id": "kp_abc123", // or organization_code for org-level links "return_url": "https://yourapp.com/account", "sub_nav": "api_keys" } ``` ### Tips for setting up - Use `subNav` (camelCase) in SDK helpers and `sub_nav` (snake_case) in API payloads. - For organization-level experiences, pass organization context according to your integration pattern. ## Customer portal experience After enabling the API key function for customers, an **API Keys** item shows in the portal navigation where customers can create, view, rotate and revoke keys. ## Access control for self-serve organization level API keys There are system level permissions which Kinde provides which you can assign to your custom roles. - `read:org:authentication` - The user is able to view API keys created by the organization - `write:org:authentication` - The user is able to create, rotate and revoke API keys for the organization. When assigning permissions to roles, our recommendation is to only give the minimum permissions required for someone to do their job. It is always better to be more granular in this area. +You can allow your customers to create and manage their own API keys directly in the self-serve portal for users and organizations. ## Switch on self-serve API keys in Kinde 1. Go to **Settings** > **Environment** > **Self-serve portal**. 2. Enable the API Keys option for the audience you want: - Users (B2C) - Organizations (B2B) 3. Select **Save**. An **API keys** navigation item will appear in the portal for your customers. ### Self-serve portal details - [Self-serve portal for orgs](/build/self-service-portal/self-serve-portal-for-orgs/) - [Self-serve portal for users](/build/self-service-portal/self-serve-portal-for-users/) ## Deep link to API keys from your app Most SDKs provide a `PortalLink` helper that generates a one-time portal URL and redirects the user. Use the `subNav` parameter to open the API Keys section directly. ### React ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-react"; // Opens the organization level API Keys section in the self-serve portal Manage API keys; ``` ### Next.js ```jsx import {PortalLink} from "@kinde-oss/kinde-auth-nextjs/components"; // Opens the API Keys section in the self-serve portal Manage API keys; ``` ### Without an SDK (Account API) If you're not using a Kinde SDK, call the Account API endpoint and pass `subnav` to deep link to API Keys. ```js const response = await fetch("/account_api/v1/portal_link?subnav=api_keys", { headers: { Authorization: `Bearer ${userAccessToken}` } }); const data = await response.json(); window.location = data.url; ``` ### Tips for setting up - Use `subNav` (camelCase) in SDK helpers and `subnav` (lowercase) in Account API requests. - For organization-level experiences, pass organization context according to your integration pattern. ## Customer portal experience After enabling the API key function for customers, an **API Keys** item shows in the portal navigation where customers can create, view, rotate and revoke keys. ## Access control for self-serve organization level API keys There are system level permissions which Kinde provides which you can assign to your custom roles. - `read:org:authentication` - The user is able to view API keys created by the organization - `write:org:authentication` - The user is able to create, rotate and revoke API keys for the organization. When assigning permissions to roles, our recommendation is to only give the minimum permissions required for someone to do their job. It is always better to be more granular in this area. # Manage your apis - Add manage api keys - Verify API keys in your API diff --git a/src/content/docs/build/self-service-portal/self-serve-portal-for-orgs.mdx b/src/content/docs/build/self-service-portal/self-serve-portal-for-orgs.mdx index 765e69d05..2874f6c2a 100644 --- a/src/content/docs/build/self-service-portal/self-serve-portal-for-orgs.mdx +++ b/src/content/docs/build/self-service-portal/self-serve-portal-for-orgs.mdx @@ -1,7 +1,7 @@ --- page_id: a2668524-5842-4c68-ab50-30b7e8c3e842 title: Enable self-serve portal for orgs -description: Guide for enabling self-serve portals for organizations including business details management, billing access, permission controls, and portal link generation methods. +description: Guide for enabling self-serve portals for organizations including business details management, billing access, permission controls, and generating portal links with SDK and Account API examples. sidebar: order: 2 relatedArticles: @@ -28,7 +28,7 @@ keywords: updated: 2025-11-12 featured: false deprecated: false -ai_summary: Guide for enabling self-serve portals for organizations including business details management, billing access, permission controls, and portal link generation methods. +ai_summary: Guide for enabling self-serve portals for organizations including business details management, billing access, permission controls, and generating portal links with SDK and Account API examples. --- You can configure a self-serve portal to enable authorized organization members to be able to self-manage functions provided by Kinde. Authorized org members can update: @@ -73,10 +73,7 @@ When [configuring org roles](/billing/get-started/add-billing-role/), you can sp Access to the portal is granted via a one-time link. You then use the link on an 'account' or 'profile' button in your app to open the Kinde portal screens. -There are two main ways to generate this link: - -- **Using the user's access token** (recommended) -- **Using the Kinde Management API** +You can generate the link using the user's access token (recommended). ### Include the self-serve portal link in the user's access token @@ -111,25 +108,6 @@ Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `subnav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). -### Manage the self-serve portal link using the Kinde Management API - -This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. - -Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. - -**Request body** - -```js -{ - "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link - "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated - "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal - "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) -} -``` - -This will return a one-time portal link for the specified user. - ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. diff --git a/src/content/docs/build/self-service-portal/self-serve-portal-for-users.mdx b/src/content/docs/build/self-service-portal/self-serve-portal-for-users.mdx index e5e10857d..4f4133d8a 100644 --- a/src/content/docs/build/self-service-portal/self-serve-portal-for-users.mdx +++ b/src/content/docs/build/self-service-portal/self-serve-portal-for-users.mdx @@ -1,7 +1,7 @@ --- page_id: f36bce4a-52bb-4785-865b-6b33356f9838 title: Enable self-service portal for users -description: Guide for enabling and configuring self-service portals for users including profile management, billing access, and multiple methods for generating portal links with SDK and API examples. +description: Guide for enabling and configuring self-service portals for users including profile management, billing access, and generating portal links with SDK and Account API examples. sidebar: order: 9 tableOfContents: @@ -30,7 +30,7 @@ keywords: updated: 2026-03-13 featured: false deprecated: false -ai_summary: Guide for enabling and configuring self-service portals for users including profile management, billing access, and multiple methods for generating portal links with SDK and API examples. +ai_summary: Guide for enabling and configuring self-service portals for users including profile management, billing access, and generating portal links with SDK and Account API examples. --- You can configure a self-serve portal to enable users to be able to self-manage functions provided by Kinde. For example, you can allow users to update their profile, as well as their billing subscription and payment details (if you have billing set up). If you have a B2C business, you might want to set this up. @@ -69,12 +69,9 @@ Allows users to create and manage their API keys. ## Generate the self-serve portal link -Access to the portal is granted via a one-time link. There are two main ways to generate this link: +Access to the portal is granted via a one-time link. -- **Using the user's access token** (recommended) -- **Using the Kinde Management API** - -Both methods are able to generate the portal link on the fly. For example, when a user clicks an "Account" button in your app. +You can generate the portal link on the fly when a user clicks an "Account" button in your app. ### Generate using a Kinde SDK @@ -105,25 +102,6 @@ Optional parameters: - `return_url` – where to redirect the user after exiting the portal. - `subnav` – specify the portal section to open (e.g., `organization_plan_details`, `profile`). -### Using the Kinde Management API - -This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. - -Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. - -**Request body** - -```js -{ - "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link - "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated - "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal - "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_plan_details`, `profile`) -} -``` - -This will return a one-time portal link for the specified user. - ## How the self-serve portal looks When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display. diff --git a/src/content/docs/manage-your-apis/add-manage-api-keys/self-serve-api-keys.mdx b/src/content/docs/manage-your-apis/add-manage-api-keys/self-serve-api-keys.mdx index afac7a11e..a7e643c1a 100644 --- a/src/content/docs/manage-your-apis/add-manage-api-keys/self-serve-api-keys.mdx +++ b/src/content/docs/manage-your-apis/add-manage-api-keys/self-serve-api-keys.mdx @@ -65,21 +65,23 @@ import {PortalLink} from "@kinde-oss/kinde-auth-nextjs/components"; Manage API keys; ``` -### Without an SDK (server-side) - -If you generate portal links using an API on your server, include a `sub_nav` field to deep link to API Keys. - -```json -{ - "user_id": "kp_abc123", // or organization_code for org-level links - "return_url": "https://yourapp.com/account", - "sub_nav": "api_keys" -} +### Without an SDK (Account API) + +If you're not using a Kinde SDK, call the Account API endpoint and pass `subnav` to deep link to API Keys. + +```js +const response = await fetch("/account_api/v1/portal_link?subnav=api_keys", { + headers: { + Authorization: `Bearer ${userAccessToken}` + } +}); +const data = await response.json(); +window.location = data.url; ``` ### Tips for setting up -- Use `subNav` (camelCase) in SDK helpers and `sub_nav` (snake_case) in API payloads. +- Use `subNav` (camelCase) in SDK helpers and `subnav` (lowercase) in Account API requests. - For organization-level experiences, pass organization context according to your integration pattern. ## Customer portal experience