<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(opens in a new tab). 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(opens in a new tab). 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.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;

/src/sign-in/[[...index]].tsx
import { SignIn } from "@clerk/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>
  );
}

In the example below, the mountSignIn() method is used to render the <SignIn /> component to a <div> element with id="sign-in".

To learn more about the methods available for rendering and controlling the <SignIn /> component in a JavaScript application, see the JavaScript reference docs.


import Clerk from '@clerk/clerk-js';
import { dark } from "@clerk/themes";
 
// Add a <div> element with id="sign-in" to your HTML
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div
    id="sign-in"
  >
  </div>
`;
 
const signInComponent = document.querySelector<HTMLDivElement>('#sign-in')!;
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk(`{{pub_key}}`);
await clerk.load();
 
clerk.mountSignIn(signInComponent, {
  appearance: {
    baseTheme: dark
  }
});


<!-- Add a <div> element with id="sign-in" to your HTML -->
<div id="sign-in"></div>
 
<script>
  const script = document.createElement('script');
  // Set your Clerk publishable key
  script.setAttribute('data-clerk-publishable-key', `{{pub_key}}`);
  script.async = true;
  script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`;
 
  script.addEventListener('load', async function () {
    await window.Clerk.load();
 
    const signInComponent = document.querySelector('#sign-in');
 
    window.Clerk.openSignIn(signInComponent, {
      appearance: {
        baseTheme: dark
      }
    });
  });
  document.body.appendChild(script);
</script>

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.