<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.
mountSignIn()
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>
Props
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 |
unmountSignIn()
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>
Props
function unmountSignIn(node: HTMLDivElement): void;
Name | Type | Description |
---|---|---|
node | HTMLDivElement | The container <div> element with a rendered <SignIn /> component instance |
openSignIn()
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>
Props
function openSignIn(props?: SignInProps): void;
Name | Type | Desciption |
---|---|---|
props? | SignInProps | The properties to pass to the <SignIn /> component |
closeSignIn()
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>
Props
function closeSignIn(): void;
SignInProps
All props below are optional.
Name | Type | Description |
---|---|---|
routing | string | The routing strategy for your pages. Supported values are:
|
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. |