Add a Manage account action that opens the Kinde portal.
Account settings
Kinde · Module
generatePortalUrl
generatePortalUrl creates a URL for the Kinde portal. In the React SDK, await the result and navigate to its url value, optionally supplying a return path.
How it works
Call generatePortalUrl through the useKindeAuth hook to create a portal destination. Await the result, convert its url value to a string, and assign it to window.location.href to send the user to the portal; PortalLink is an alternative that performs the redirect for you.
Syntax
const { url } = await generatePortalUrl({ returnPath: "/dashboard" });Parameters
| Name | Type | Description |
|---|---|---|
returnPath | string | Optional path used as the return destination after the portal flow. |
Returns
A promise resolving to an object containing url, the generated portal URL.
Key points
- The function creates a destination URL for Kinde's self-serve portal.
- In React, obtain the function by destructuring it from the useKindeAuth hook.
- The function is asynchronous and resolves to an object whose url property contains the generated destination.
- Navigate by converting the returned URL to text and assigning it to window.location.href.
- A button click can trigger the portal-opening handler for an account-management action.
Common mistakes
- The generated destination is for the Kinde portal and is intended to be used for account-management navigation.
- If explicit URL generation is unnecessary, use PortalLink instead because it combines link generation and redirection.
Example: Open the Kinde portal
const { generatePortalUrl } = useKindeAuth();
async function openPortal() {
const { url } = await generatePortalUrl({ returnPath: "/dashboard" });
window.location.href = url.toString();
}
<button onClick={openPortal} type="button">
Manage account
</button>Generates a portal URL with an optional return path, then navigates the browser to that URL.
When to use it
Generate the destination in an event handler before redirecting the browser.
Custom navigation
Send users back to a chosen application path after completing portal actions.
Return routing
Interview questions
QHow do you use generatePortalUrl in the React SDK?
generatePortalUrl is accessed from useKindeAuth and returns a promise. The resolved object contains url, which can be converted to a string and assigned to window.location.href.
Follow-up: How could the same flow be implemented without manually handling the URL? Use the PortalLink component, which generates the link and redirects the user.
QHow do you specify where the user returns after using the portal?
Pass an options object containing returnPath, such as { returnPath: "/dashboard" }. This tells the portal flow where the user should return in the application.
Follow-up: What should be checked if the return navigation is wrong? Verify that the supplied path matches the intended application route and that the resulting URL is used for navigation.
QHow does the example redirect the browser to the generated URL?
After awaiting generatePortalUrl, read the returned url property and navigate with window.location.href = url.toString(). This performs a full browser navigation to the generated portal URL.
Follow-up: What alternative UI abstraction is documented for this purpose? PortalLink can be rendered directly and handles portal redirection without the explicit event handler.
Related
PortalLinkuseKindeAuthself-serve portal