Clerk logo

Clerk Docs

Ctrl + K
Go to

<SignIn />

Full-featured UI for signing users into your application.


The <SignIn/> component renders a UI for signing in users. Learn more about the <SignIn/> component, what it does, and how it is used by reading our Sign In component guide.

Embedding a <SignIn /> component

Using the Next.js optional catch all route, you can embed the <SignIn/> component. This allows you to redirect the user inside your application and handle any redirects.




Controls the overall look and feel.


The routing strategy for your pages. Supported values are:

-path: Path-based routing.

-hash: Hash-based routing.


The path where the component is mounted when path-based routing is used.

-e.g. /sign-in. This prop is ignored in hash-based routing.


Full URL or path to navigate after successful sign in or sign up. The same as setting afterSignInUrl and afterSignUpUrl to the same value.


The full URL or path to navigate after a successful sign in.


The full URL or path to navigate after a successful sign up.


Full URL or path to the sign up page. Use this property to provide the target of the "Sign Up" link that's rendered.

Custom Styling

The <SignIn/> component can be highly customized through the appearance prop and can be styled using CSS Modules, Tailwind, inline CSS objects, or global CSS.


The <SignIn/> component can be localized using the localization prop. This allows you to customize the language used within the <SignIn/> component.

Was this helpful?

Clerk © 2022