Add sign-in navigation
A navigation bar needs a standard sign-in action.
Kinde · Component
LoginLink
LoginLink is a Kinde React SDK component that starts sign-in when activated. Render it with the content users should click.
How it works
LoginLink is a React component supplied by the Kinde React SDK. Render it with link content, and selecting it starts the sign-in flow by constructing a redirect URL and sending the user to Kinde.
Syntax
<LoginLink>Sign in</LoginLink>Parameters
| Name | Type | Description |
|---|---|---|
children | ReactNode | Required link content displayed to the user. |
Returns
A React link component that starts the Kinde sign-in flow.
Key points
- The React SDK provides standard link components for starting login and registration.
- Import
LoginLinkfrom the SDK's components entry point. - Place the user-facing sign-in label or content between the component's tags.
- Activating the link builds a redirect URL and sends the user to Kinde for authentication.
Example: Render a sign-in link
import { LoginLink } from "@kinde-oss/kinde-auth-react/components";
export default function App() {
return <LoginLink>Sign in</LoginLink>;
}Renders a sign-in link that starts the Kinde authentication flow.
When to use it
Start authentication from a landing page
A logged-out landing page needs to begin authentication.
Interview questions
QWhat does LoginLink do?
LoginLink is a standard link component from the Kinde React SDK. It starts authentication when rendered and activated, sending the user to Kinde to sign in.
Follow-up: How can the same behavior be triggered from a button? Use useKindeAuth, obtain login, and call it from the button's click handler.
QHow is LoginLink used in a React component?
Import it from @kinde-oss/kinde-auth-react/components, then render it with the text or content users should select, such as <LoginLink>Sign in</LoginLink>.
Follow-up: What alternative SDK API is documented for sign-in? The useKindeAuth hook exposes a login method.
QWhat is an alternative to using LoginLink?
The component abstracts the redirect setup for sign-in. The documented alternative is the login method from useKindeAuth, which can be attached to a button.
Follow-up: When should a button-based approach be preferred? Use it when the UI needs imperative click handling or custom button behavior.
Related
RegisterLinkuseKindeAuthloginregister