<SignUp /> Component
The <SignUp /> component renders a UI for signing up users. The functionality of the <SignUp /> component are controlled by the instance settings you specify in your Clerk Dashboard. You can further customize your <SignUp /> component by passing additional properties at the time of rendering.
All of these are methods on an instance of the Clerk class.
mountSignUp()
Render the <SignUp /> 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-up"
></div>
`;
const signUpComponent = document.querySelector<HTMLDivElement>('#sign-up')!;
const clerk = new Clerk('pk_[publishable_key]');
await clerk.load();
clerk.mountSignUp(signUpComponent, {
appearance: {
baseTheme: dark
}
});<div id="sign-up"></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 signUpComponent = document.querySelector('#sign-up');
window.Clerk.openSignUp(signUpComponent, {
appearance: {
baseTheme: dark
}
});
});
document.body.appendChild(script);
</script>Props
function mountSignUp(node: HTMLDivElement, props?: SignUpProps): void;| Name | Type | Description |
|---|---|---|
| node | HTMLDivElement | The <div> element used to render in the <SignUp /> component |
| props? | SignUpProps | The properties to pass to the `<SignUp />` component |
unmountSignUp()
Unmount and run cleanup on an existing <SignUp /> component instance.
Usage
import Clerk from '@clerk/clerk-js';
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<div
id="sign-up"
></div>
`
const signUpComponent = document.querySelector<HTMLDivElement>('#sign-up')!;
const clerk = new Clerk('pk_[publishable_key]');
await clerk.load();
clerk.mountSignUp(signUpComponent);
// ...
clerk.unmountSignUp(signUpComponent);<div id="sign-up"></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 signUpComponent = document.querySelector('#sign-up');
window.Clerk.mountSignUp(signUpComponent);
// ...
window.Clerk.unmountSignUp(signUpComponent);
});
document.body.appendChild(script);
</script>Props
function unmountSignUp(node: HTMLDivElement): void;| Name | Type | Description |
|---|---|---|
| node | HTMLDivElement | The container <div> element with a rendered <SignUp /> component instance |
openSignUp()
Opens the <SignUp /> 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.openSignUp({
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.openSignUp({
appearance: {
baseTheme: dark
}
});
});
document.body.appendChild(script);
</script>Props
function openSignUp(props?: SignUpProps): void;| Name | Type | Description |
|---|---|---|
| props? | SignUpProps | The properties to pass to the `<SignUp />` component |
closeSignUp()
Closes the sign up overlay.
Usage
import Clerk from '@clerk/clerk-js';
import { dark } from "@clerk/themes";
const clerk = new Clerk('pk_[publishable_key]');
await clerk.load();
clerk.openSignUp();
// ...
clerk.closeSignUp();<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.openSignUp();
// ...
window.Clerk.closeSignUp();
});
document.body.appendChild(script);
</script>Props
function closeSignUp(): void;SignUpProps
All props below are optional.
| Name | Type | Description |
|---|---|---|
| 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-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. |
| 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 | The full URL or path to navigate after a successful sign up. |