<SignIn /> | Clerk

The <SignIn /> component renders a UI for signing in users. The functionality of the <SignIn /> component is controlled by the instance settings you specify in your Clerk Dashboard. You can further customize your <SignIn /> component by passing additional properties at the time of rendering.

Usage

Below is basic implementation of the <SignIn /> component. You can use this as a starting point for your own implementation.

You can embed the <SignIn /> component using the Next.js optional catch-all route. This allows you to redirect the user inside your application. The <SignIn /> component should be mounted on a public page.

/app/sign-in/[[...sign-in]]/page.[jsx/tsx]
import { SignIn } from "@clerk/nextjs";
 
export default function Page() {
  return <SignIn />;
}

/pages/sign-in/[[...index]].tsx
import { SignIn } from "@clerk/nextjs";
 
const SignInPage = () => (
  <SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" />
);
export default SignInPage;

/pages/sign-in/[[...index]].[jsx/tsx]
import { SignIn } from "@clerk/react";
 
const SignInPage = () => (
  <SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" />
);
export default SignInPage;

app/routes/sign-in/$.tsx
import { SignIn } from "@clerk/remix";
 
export default function SignInPage() {
  return (
    <div style={{ border: "2px solid blue", padding: "2rem" }}>
      <h1>Sign In route</h1>
      <SignIn routing={"path"} path={"/sign-in"} />
    </div>
  );
}

/pages/sign-in.js
import { SignIn } from "gatsby-plugin-clerk";
 
export default function SignInPage() {
  return (
    <div style={{ border: "2px solid blue", padding: "2rem" }}>
      <h1>Sign In Up route</h1>
      <SignIn routing={"path"} path={"/sign-in"} />
    </div>
  );
}

sign-in.js
window.Clerk.mountSignIn(
  document.getElementById("sign-in")
);
window.Clerk.openSignIn();

Properties

All props below are optional.

Name	Type	Description
`appearance`	`Appearance \| undefined`	Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.
`routing`	`'hash' \| 'path' \| 'virtual'`	The routing strategy for your pages. Note: If you are using environment variables for Next.js or Remix to specify your routes, this will be set to `path`.
`path`	`string`	The path where the component is mounted on when path-based routing is used e.g. /sign-in.
`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.
`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.
`afterSignUpUrl`	`string`	The full URL or path to navigate after a successful sign up.
`initialValues`	`SignInInitialValues`	The values used to prefill the sign-in fields with.

Customization

To learn about how to customize Clerk components, see the customization documentation.