Standard sign-in entry point
Use the default rendered control when no custom styling or markup is needed.
Clerk · Component
SignInButton
SignInButton provides a sign-in control that normally navigates to the app's sign-in page. It can wrap custom button content and optionally open sign-in in a modal.
How it works
SignInButton renders a control that takes users to the configured sign-in page. It can also wrap custom button content and either redirect to the sign-in route or open sign-in in a modal on the current route.
Syntax
<SignInButton mode="redirect">...</SignInButton>Parameters
| Name | Type | Description |
|---|---|---|
mode | 'modal' | 'redirect' | Controls whether clicking opens sign-in in a modal or redirects to the sign-in route; supported values are 'modal' and 'redirect'. |
Returns
A sign-in button component that uses its child content when custom UI is provided.
Key points
- By default, the component sends the user to the application's sign-in page.
- Without a dedicated sign-in page, Clerk hosts the sign-in experience through the Account Portal.
- Wrap application-owned button markup or text to customize the sign-in control.
- Use mode='redirect' when clicking should navigate to the sign-in route.
- Use mode='modal' when the sign-in UI should appear without leaving the current route.
- If mode is omitted, the component uses redirect behavior.
Common mistakes
- The component accepts one child, so combine multiple visual elements inside one parent before passing them to SignInButton.
Example: Custom modal sign-in button
import { SignInButton } from '@clerk/react'
export default function App() {
return (
<SignInButton mode="modal">
<button type="button">Sign in</button>
</SignInButton>
)
}Wrap a button to provide custom UI and open Clerk's sign-in modal when it is clicked.
When to use it
Custom branded button
Wrap an application button while delegating authentication behavior to Clerk.
Modal sign-in flow
Keep the user on the current page while presenting sign-in.
Interview questions
QWhat does SignInButton do?
It provides a sign-in control that defaults to linking to the app's sign-in page. You can supply custom button content by placing it inside the component.
Follow-up: How can the interaction avoid navigation? Set mode to 'modal' so sign-in opens over the current route instead of redirecting.
QHow do redirect and modal modes differ?
The mode prop controls the click behavior. 'redirect' navigates to the sign-in route, while 'modal' opens the sign-in interface on the current route.
Follow-up: What is the default behavior? The documented default is 'redirect'.
QHow do you customize the rendered sign-in control?
A custom button can be wrapped inside SignInButton, allowing the application to control the button's markup and text while Clerk handles the sign-in action.
Follow-up: What constraint applies to custom content? Only one child is accepted, so multiple elements need a single wrapper.
Related
SignUpButtonSignOutButtonSignInWithMetamaskButtonAccount Portal