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

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>

Properties


function mountSignUp(node: HTMLDivElement, props?: SignUpProps): void;

Name	Type	Description
`node`	`HTMLDivElement`(opens in a new tab)	The `<div>` element used to render in the `<SignUp />` component
`props?`	`SignUpProps`	The properties to pass to the `<SignUp />` component

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>

Properties


function unmountSignUp(node: HTMLDivElement): void;

Name	Type	Description
`node`	`HTMLDivElement`(opens in a new tab)	The container `<div>` element with a rendered `<SignUp />` component instance

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>

Properties


function openSignUp(props?: SignUpProps): void;

Name	Type	Description
`props?`	`SignUpProps`	The properties to pass to the `<SignUp />` component

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>

Properties


function closeSignUp(): 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.
`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.
`initialValues`	`SignUpInitialValues`	The values used to prefill the sign-up fields with.

mountSignUp()

Usage

Properties

unmountSignUp()

Usage

Properties

openSignUp()

Usage

Properties

closeSignUp()

Usage

Properties

SignUpProps

`mountSignUp()`

`unmountSignUp()`

`openSignUp()`

`closeSignUp()`

`SignUpProps`