<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.

Usage

1
import { SignIn } from "@clerk/clerk-react";
2

3
// Render the sign in component in your
4
// custom sign in page.
5
function SignInPage() {
6
  return (
7
    <SignIn />
8
  );
9
}

1
// Mount the sign in component inside the HTML element
2
// with id "sign-in".
3
window.Clerk.mountSignIn(
4
  document.getElementById("sign-in")
5
);
6

7
// Open the sign in component as a modal.
8
window.Clerk.openSignIn();

The <SignIn/> component should be public. An example of this can be found here: https://clerk.dev/docs/nextjs/control-components

Props

Name	Type	Description
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 on 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.

Customization

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.