<SignIn />
Full-featured UI for signing users into your application.
Overview
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.
The <SignIn/> component should be public. An example of this can be found here: https://clerk.dev/docs/nextjs/control-components
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.
1import { SignIn } from "@clerk/nextjs";23const SignInPage = () => (4<SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" />5);67export default SignInPage;
Props
| Name | Type | Description |
|---|---|---|
| appearance? | object | Controls the overall look and feel. |
| routing? | RoutingStrategy | The routing strategy for your pages. Supported values are: - hash (default): Hash-based routing. - path: Path-based routing. - virtual: Virtual based routing. |
| path? | string | The path where the component is mounted when path-based routing is used. -e.g. /sign-in. This prop is ignored in hash and virtual based routing. |
| redirectUrl? | string | Full URL or path to navigate after successful sign in or sign up. The same as setting afterSignInUrl and afterSignUpUrl to the same value. |
| afterSignInUrl? | string | The full URL or path to navigate after a successful sign in. |
| afterSignUpUrl? | string | The full URL or path to navigate after a successful sign up. |
| signUpUrl? | string | 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.
Localization
The <SignIn/> component can be localized using the localization prop. This allows you to customize the language used within the <SignIn/> component.