<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();

Props

All props below are optional.

Name	Type	Description
`appearance`	`object`	Controls the overall look and feel of the component. See Appearance for more information.
`routing`	`string`	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-up. Note: If you are using Environment Variables for Next.js or Remix to specify your routes, this will be set to `path`.
`redirectUrl`	`string`	Full URL or path to navigate to after successful sign-in or sign-up. The same as setting `afterSignInUrl` and `afterSignUpUrl` to the same value.
`afterSignInUrl`	`string`	Full URL or path to navigate to after a successful sign-in.
`signInUrl`	`string`	Full URL or path to the sign-in page. Use this property to provide the target of the 'Sign In' link that's rendered.
`afterSignUpUrl`	`string`	Full URL or path to navigate to after a successful sign-up.
`initialValues`	`SignInInitialValues`	The values used to prefill the sign-in fields with.