<SignUp /> | Clerk

The <SignUp /> component renders a UI for signing up users. The functionality of the <SignUp /> component is 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.

Usage

Below is basic implementation of the <SignUp /> component. You can use this as a starting point for your own implementation

You can embed the <SignUp /> component using the Next.js optional catch-all route(opens in a new tab). This allows you to redirect the user inside your application. The <SignUp /> component should be mounted on a public page.

The example below shows the Sign In page mounted on the url /sign-in. For more information on how to implement this, check out the <SignIn /> UI page.

/app/sign-up/[[...sign-up]]/page.tsx
import { SignUp } from "@clerk/nextjs";
 
export default function Page() {
  return <SignUp />;
}

/pages/sign-up/[[...index]].tsx
import { SignUp } from "@clerk/nextjs";
 
const SignUpPage = () => (
  <SignUp path="/sign-up" routing="path" signInUrl="/sign-in" />
);
export default SignUpPage;

sign-up.jsx
import { SignUp } from "@clerk/clerk-react";
 
function SignUpPage() {
  return <SignUp />;
}

app/routes/sign-up/$.tsx
import { SignUp } from "@clerk/remix";
 
export default function SignUpPage() {
  return (
    <div style={{ border: "2px solid blue", padding: "2rem" }}>
      <h1>Sign Up route</h1>
      <SignUp routing={"path"} path={"/sign-up"} />
    </div>
  );
}

/pages/sign-up.js
import { SignUp } from "gatsby-plugin-clerk";
 
export default function SignUpPage() {
  return (
    <div style={{ border: "2px solid blue", padding: "2rem" }}>
      <h1>Sign Up route</h1>
      <SignUp routing={"path"} path={"/sign-up"} />
    </div>
  );
}

In the example below, the mountSignUp() method is used to render the <SignUp /> component to a <div> element with id="sign-up".

To learn more about the methods available for rendering and controlling the <SignUp /> component in a JavaScript application, see the JavaScript reference docs.

index.ts
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-up"></div>
`;
 
const signUpDiv =
  document.getElementById("sign-up");
 
clerk.mountSignUp(signUpDiv);

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

Properties

All props below are optional.

Name	Type	Description
`appearance`	`Appearance \| undefined`	Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.
`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-up.
`redirectUrl`	`string`	Full URL or path to navigate to 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 to 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.
`unsafeMetadata`	`object`	An object with the key and value for unsafeMetadata that will be saved to the user after sign up. E.g. `{ "company": "companyID1234" }`
`initialValues`	`SignUpInitialValues`	The values used to prefill the sign-up fields with.

Customization

To learn about how to customize Clerk components, see the customization documentation.