<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(opens in a new tab), such as sign-up options and social connections. You can further customize your <SignIn /> component by passing additional properties at the time of rendering.

The following methods available on an instance of the Clerk class are used to render and control the <SignIn /> component:

• mountSignIn()
• unmountSignIn()
• openSignIn()
• closeSignIn()

mountSignIn()

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

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

mountSignIn() params

mountSignIn() usage

In the example below, the <SignIn /> component is rendered to a <div> element with id="sign-in". The <SignIn /> component will be rendered with the default settings specified in your Clerk Dashboard(opens in a new tab).

index.js
import Clerk from '@clerk/clerk-js';
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('{{pub_key}}');
await clerk.load();
 
document.getElementById("app").innerHTML = `
  <div id="sign-in"></div>
`;
 
const signInDiv =
  document.getElementById("sign-in");
 
clerk.mountSignIn(signInDiv);

index.html
<!-- Add a <div id="sign-in"> element to your HTML -->
<div id="sign-in"></div>
 
<script>
  window.addEventListener("load", async function () {
    await Clerk.load();
 
    const signInDiv =
      document.getElementById('sign-in');
 
    Clerk.mountSignIn(signInDiv);
  });
</script>

unmountSignIn()

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

function unmountSignIn(node: HTMLDivElement): void;

unmountSignIn() params

unmountSignIn() usage

index.js
import Clerk from '@clerk/clerk-js';
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('{{pub_key}}');
await clerk.load();
 
document.getElementById('app').innerHTML = `
  <div id="sign-in"></div>
`
 
const signInDiv =
  document.getElementById('sign-in');
 
clerk.mountSignIn(signInDiv);
 
// ...
 
clerk.unmountSignIn(signInDiv);

index.html
<!-- Add a <div id="sign-in"> element to your HTML -->
<div id="sign-in"></div>
 
<script>
  window.addEventListener("load", async function () {
    await Clerk.load();
 
    const signInDiv =
      document.getElementById('sign-in');
 
   Clerk.mountSignIn(signInDiv);
 
    // ...
 
    Clerk.unmountSignIn(signInDiv);
  });
</script>

openSignIn()

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

function openSignIn(props?: SignInProps): void;

openSignIn() params

SignInProps

The type of the props parameter in the openSignIn() method is defined as follows:

openSignIn() usage

index.js
import Clerk from '@clerk/clerk-js';
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('{{pub_key}}');
await clerk.load();
 
clerk.openSignIn();

index.html
<script>
  window.addEventListener("load", async function () {
    await Clerk.load();
 
    Clerk.openSignIn();
  });
</script>

closeSignIn()

Closes the sign in overlay.

function closeSignIn(): void;

closeSignIn() usage

index.js
import Clerk from '@clerk/clerk-js';
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('{{pub_key}}');
await clerk.load();
 
clerk.openSignIn();
 
// ...
 
clerk.closeSignIn();

index.html
<script>
  window.addEventListener("load", async function () {
    await Clerk.load();
 
    Clerk.openSignIn();
 
    // ...
 
    Clerk.closeSignIn();
  });
</script>