<SignIn /> Component

The <SignIn /> component renders a UI for signing in users. The functionality of the <SignIn /> component are 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.

All of these are methods on an instance of the Clerk class.

Render the <SignIn /> component to an HTML <div> element.

Usage


import Clerk from '@clerk/clerk-js';
import { dark } from "@clerk/themes";
 
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div
    id="sign-in"
  ></div>
`;
 
const signInComponent = document.querySelector<HTMLDivElement>('#sign-in')!;
 
const clerk = new Clerk('pk_[publishable_key]');
await clerk.load();
 
clerk.mountSignIn(signInComponent, {
  appearance: {
    baseTheme: dark
  }
});


<div id="sign-in"></div>
<script>
  const script = document.createElement('script');
  script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_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


function mountSignIn(node: HTMLDivElement, props?: SignInProps): void;

Name	Type	Description
`node`	`HTMLDivElement`	The container `<div>` element used to render in the `<SignIn />` component
`props?`	`SignInProps`	The properties to pass to the `<SignIn />` component

Unmount and run cleanup on an existing <SignIn /> component instance.

Usage


import Clerk from '@clerk/clerk-js';
 
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div
    id="sign-in"
  ></div>
`
 
const signInComponent = document.querySelector<HTMLDivElement>('#sign-in')!;
 
const clerk = new Clerk('pk_[publishable_key]');
 
await clerk.load();
 
clerk.mountSignIn(signInComponent);
 
// ...
 
clerk.unmountSignIn(signInComponent);


<div id="sign-in"></div>
<script>
  const script = document.createElement('script');
  script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_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.mountSignIn(signInComponent);
 
    // ...
 
    window.Clerk.unmountSignIn(signInComponent);
  });
  document.body.appendChild(script);
</script>

Properties


function unmountSignIn(node: HTMLDivElement): void;

Name	Type	Description
`node`	`HTMLDivElement`	The container `<div>` element with a rendered `<SignIn />` component instance

Opens the <SignIn /> component as an overlay at the root of your HTML body element.

Usage


import Clerk from '@clerk/clerk-js';
import { dark } from "@clerk/themes";
 
const clerk = new Clerk('pk_[publishable_key]');
await clerk.load();
 
clerk.openSignIn({
  appearance: {
    baseTheme: dark
  }
});


<script>
  const script = document.createElement('script');
  script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_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();
 
    window.Clerk.openSignIn({
      appearance: {
        baseTheme: dark
      }
    });
  });
  document.body.appendChild(script);
</script>

Properties


function openSignIn(props?: SignInProps): void;

Name	Type	Desciption
`props?`	`SignInProps`	The properties to pass to the `<SignIn />` component

Closes the sign in overlay.

Usage


import Clerk from '@clerk/clerk-js';
import { dark } from "@clerk/themes";
 
const clerk = new Clerk('pk_[publishable_key]');
await clerk.load();
 
clerk.openSignIn();
 
// ...
 
clerk.closeSignIn();


<script>
  const script = document.createElement('script');
  script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_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();
 
    window.Clerk.openSignIn();
 
    // ...
 
    window.Clerk.closeSignIn();
  });
  document.body.appendChild(script);
</script>

Properties


function closeSignIn(): void;

All props below are optional.

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

Last updated on November 21, 2023

mountSignIn()

Usage

Properties

unmountSignIn()

Usage

Properties

openSignIn()

Usage

Properties

closeSignIn()

Usage

Properties

SignInProps

`mountSignIn()`

`unmountSignIn()`

`openSignIn()`

`closeSignIn()`

`SignInProps`