Provide a standard sign-out link in an account menu.
Authenticated navigation
Kinde · Component
LogoutLink
LogoutLink is Kinde’s React component for ending the current user session. Render it with child content such as a “Sign out” label.
How it works
LogoutLink is a React component from Kinde’s React SDK that initiates the sign-out flow when activated. Place it in the authenticated interface and provide link content as its children; the configured logout redirect determines where the user goes afterward.
Syntax
<LogoutLink>Sign out</LogoutLink>Parameters
| Name | Type | Description |
|---|---|---|
children | ReactNode | ReactNode rendered as the link’s content or label. |
Returns
A React link component that starts the Kinde logout flow when activated.
Key points
- The React SDK exposes LogoutLink as a built-in way to initiate sign-out.
- Import LogoutLink from the SDK’s components module before rendering it.
- Pass the visible link label as the component’s child content.
- The configured logoutUri controls the user’s destination after logout.
Common mistakes
- The destination after logout comes from the provider’s configured logoutUri, so configure that redirect appropriately.
Example: Sign-out link
import { LogoutLink } from '@kinde-oss/kinde-auth-react/components';
export default function AccountActions() {
return <LogoutLink>Sign out</LogoutLink>;
}Render the component where users should be able to end their current Kinde session.
When to use it
Let a signed-in user end their current Kinde session from a profile page.
User profile controls
Place a consistent logout action in the authenticated layout.
Shared application shell
Interview questions
QHow do you add a sign-out control in a Kinde React application?
Import LogoutLink from the React SDK’s components entry point and render it with child content, such as “Sign out.” Activating the component starts Kinde’s logout flow.
Follow-up: How would you implement logout with custom behavior instead? Use useKindeAuth to obtain logout and call it from a button handler.
QWhat does LogoutLink do?
The component is intended to end the current Kinde session. It is the link-based alternative to calling the logout method returned by useKindeAuth.
Follow-up: How can logout affect every session? The related logout method accepts allSessions: true.
QHow is the post-logout destination controlled?
After sign-out, Kinde redirects the user according to the logoutUri configured on KindeProvider. That setting is a string and is optional.
Follow-up: How can one logout action override the configured destination? Call logout with a redirectUrl option instead of using the link component.
Related
KindeProvideruseKindeAuthlogoutlogoutUri