|
| 1 | +--- |
| 2 | +page_id: f36bce4a-52bb-4785-865b-6b33356f9838 |
| 3 | +title: Enable self-serve portal for users |
| 4 | +sidebar: |
| 5 | + order: 8 |
| 6 | +relatedArticles: |
| 7 | + - beebe908-27f8-4be6-b74c-05fc8ff5dfb5 |
| 8 | + - a2668524-5842-4c68-ab50-30b7e8c3e842 |
| 9 | +--- |
| 10 | + |
| 11 | +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. |
| 12 | + |
| 13 | +A self-serve portal means your customers can make basic account changes without contacting you for support. This can save time and money. |
| 14 | + |
| 15 | +## Configure the user self-serve portal |
| 16 | + |
| 17 | +1. Go to **Settings > Environment > Self-serve portal**. |
| 18 | +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). |
| 19 | +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. |
| 20 | +4. Select **Save**. |
| 21 | + |
| 22 | +## Generate the self-serve portal link |
| 23 | + |
| 24 | +Access to the portal is granted via a one-time link. There are two main ways to generate this link: |
| 25 | + |
| 26 | +- **Using the user's access token** (recommended) |
| 27 | +- **Using the Kinde Management API** |
| 28 | + |
| 29 | +Both methods are able to generate the portal link on the fly. For example, when a user clicks an "Account" button in your app. |
| 30 | + |
| 31 | +### Generate a self-serve portal link with a Kinde SDK |
| 32 | + |
| 33 | +If you're using the Kinde React SDK, you can use the `<PortalLink />` component, which both generates the link and redirects the user: |
| 34 | + |
| 35 | +```jsx |
| 36 | +import {PortalLink} from "@kinde-oss/kinde-auth-react"; |
| 37 | + |
| 38 | +<PortalLink>Account</PortalLink>; |
| 39 | +``` |
| 40 | + |
| 41 | +### Generate a self-serve portal link without a Kinde SDK |
| 42 | + |
| 43 | +If you're not using a Kinde SDK, you can manually call the Account API: |
| 44 | + |
| 45 | +```js |
| 46 | +const response = await fetch("/api/v1/account_api/portal_link", { |
| 47 | + headers: { |
| 48 | + Authorization: `Bearer ${userAccessToken}` |
| 49 | + } |
| 50 | +}); |
| 51 | +const data = await response.json(); |
| 52 | +window.location = data.url; |
| 53 | +``` |
| 54 | + |
| 55 | +Optional parameters: |
| 56 | + |
| 57 | +- `return_url` – where to redirect the user after exiting the portal. |
| 58 | +- `sub_nav` – specify the portal section to open (e.g., `organization_billing`, `profile`). |
| 59 | + |
| 60 | +### Manage the self-serve portal link using the Kinde Management API |
| 61 | + |
| 62 | +This option is useful for server-side applications or if you're using Kinde billing features without Kinde Authentication. |
| 63 | + |
| 64 | +Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M token. |
| 65 | + |
| 66 | +**Request body** |
| 67 | + |
| 68 | +```js |
| 69 | +{ |
| 70 | + "user_id": "kp_1234567890", // The ID of the user for whom you want to generate the portal link |
| 71 | + "organization_code": "org_123456789", // Optional: the organization code for which the portal link is generated |
| 72 | + "return_url": "https://yourapp.com/dashboard", // Optional: where to redirect the user after exiting the portal |
| 73 | + "sub_nav": "profile" // Optional: specify the portal section to open (e.g., `organization_billing`, `profile`) |
| 74 | +} |
| 75 | +``` |
| 76 | + |
| 77 | +This will return a one-time portal link for the specified user. |
0 commit comments