Enable self-service portal for users

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

Link to this section

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

   

User self-management

Link to this section

User profile

Link to this section

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

Link to this section

Allows users to manage their billing subscription, change or cancel their plan, and update payment details (if you have billing set up).

API Keys

Link to this section

Allows users to create and manage their API keys.

Generate the self-serve portal link

Link to this section

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 using a Kinde SDK

Link to this section

If you’re using the Kinde React SDK, you can use the <PortalLink /> component, which both generates the link and redirects the user:

import {PortalLink} from "@kinde-oss/kinde-auth-react/components";

<PortalLink>Account</PortalLink>;

Generate without an SDK

Link to this section

If you’re not using a Kinde SDK, you can manually call the Account API:

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

Using the Kinde Management API

Link to this section

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

{
  "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

Link to this section

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.

You can also watch this short video showing how the portal works when a customer signs up for a plan using Kinde billing.