Enable self-serve 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 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.
4. Select Save.

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 a self-serve portal link with 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";

<PortalLink>Account</PortalLink>;

Generate a self-serve portal link without a Kinde 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).

Manage the self-serve portal link 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.