Hosted-style sign-in page
A page needs a ready-made authentication screen using the methods configured in Clerk Dashboard.
Clerk · Component
SignIn
SignIn renders Clerk’s configured authentication UI, allowing users to sign in or sign up by default. It supports customization through properties and can show required session tasks after authentication.
How it works
Render <SignIn /> in your application to provide Clerk’s configured authentication UI. The available methods and social connections come from Clerk Dashboard settings, while component properties let you customize the rendered experience; the component can also present required post-sign-in session tasks.
Syntax
<SignIn />Parameters
| Name | Type | Description |
|---|---|---|
node | HTMLDivElement | HTML container receiving the mounted component. |
props | SignInProps | Optional properties controlling the rendered sign-in component. |
Returns
mountSignIn() returns void; the rendered component presents the configured sign-in or sign-up UI.
Key points
- It provides a combined authentication entry point that supports both returning users and new-user registration.
- Dashboard configuration determines which authentication strategies the component exposes.
- Email, password, and social-provider availability is configured outside the component through instance settings.
- Use component properties to alter the default rendered behavior or presentation.
- Required session follow-up work can be shown directly within the authentication flow.
- The imperative frontend API mounts the component into a supplied HTML div.
Common mistakes
- A signed-in user cannot render this component unless the application allows multiple sessions.
- With single-session settings, Clerk redirects an already signed-in user to the Home URL instead.
Example: Render SignIn
import { SignIn } from '@clerk/react'
export default function SignInPage() {
return <SignIn />
}Render the component in a page to provide Clerk’s configured sign-in flow.
When to use it
Combined sign-in and sign-up
An application wants one entry point for returning users and new users.
Session task completion
The app must collect required follow-up information after authentication.
Imperative mounting
A vanilla JavaScript frontend needs to display authentication without a framework component tree.
Interview questions
QWhat does the SignIn component do?
SignIn renders a UI for users to sign in or sign up by default. Its behavior is governed by Clerk Dashboard settings, including enabled sign-in options and social connections.
Follow-up: How can the rendered flow be customized? Pass additional component properties when rendering it, and configure the authentication methods in the Clerk Dashboard.
QHow are post-sign-in requirements handled?
The component can display session tasks that users must complete after signing in. This allows required follow-up actions to remain part of the authentication experience.
Follow-up: What controls whether those tasks appear? Clerk determines them from the session requirements configured for the user or instance.
QHow can SignIn be controlled imperatively?
The JavaScript frontend API exposes mountSignIn(), unmountSignIn(), openSignIn(), and closeSignIn() for rendering and controlling the component. mountSignIn() renders into an HTML div, while openSignIn() opens an overlay at the document body's root.
Follow-up: What signature does mountSignIn use? It accepts an HTMLDivElement and optional SignInProps, returning void.
Related
SignUpmountSignIn()unmountSignIn()openSignIn()closeSignIn()Clerk