feat(clerk-js,clerk-react,types): Add unsafeMetadata prop to <SignUp />

Fixes USR-99

.changeset/angry-spies-run.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+Add unsafeMetadata prop to <SignUp />

packages/clerk-js/src/ui/Components.tsx

@@ -175,6 +175,7 @@ const Components = (props: ComponentsProps) => {
 
     componentsControls.mountComponent = params => {
       const { node, name, props, appearanceKey } = params;
+
       assertDOMElement(node);
       setState(s => {
         s.nodes.set(node, { key: `p${++portalCt}`, name, props, appearanceKey });

packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

@@ -36,7 +36,7 @@ function _SignUpStart(): JSX.Element {
   const { attributes } = userSettings;
   const { setActive } = useCoreClerk();
   const ctx = useSignUpContext();
-  const { navigateAfterSignUp, signInUrl } = ctx;
+  const { navigateAfterSignUp, signInUrl, unsafeMetadata } = ctx;
   const [activeCommIdentifierType, setActiveCommIdentifierType] = React.useState<ActiveIdentifier>(
     getInitialActiveIdentifier(attributes, userSettings.signUp.progressive),
   );
@@ -182,6 +182,10 @@ function _SignUpStart(): JSX.Element {
       [] as Array<FormControlState>,
     );
 
+    if (unsafeMetadata) {
+      fieldsToSubmit.push({ id: 'unsafeMetadata', value: unsafeMetadata } as any);
+    }
+
     if (fields.ticket) {
       const noop = () => {
         //

packages/react/src/components/SignUpButton.tsx

@@ -5,16 +5,18 @@ import { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../ut
 import { withClerk } from './withClerk';
 
 export const SignUpButton = withClerk(({ clerk, children, ...props }: WithClerkProp<SignUpButtonProps>) => {
-  const { afterSignInUrl, afterSignUpUrl, redirectUrl, mode, ...rest } = props;
+  const { afterSignInUrl, afterSignUpUrl, redirectUrl, mode, unsafeMetadata, ...rest } = props;
 
   children = normalizeWithDefaultValue(children, 'Sign up');
   const child = assertSingleChild(children)('SignUpButton');
 
   const clickHandler = () => {
-    const opts = { afterSignInUrl, afterSignUpUrl, redirectUrl };
+    const opts = { afterSignInUrl, afterSignUpUrl, redirectUrl, unsafeMetadata };
+
     if (mode === 'modal') {
       return clerk.openSignUp(opts);
     }
+
     return clerk.redirectToSignUp(opts);
   };
 

packages/react/src/types.ts

@@ -77,7 +77,9 @@ type ButtonProps = {
 };
 
 export type SignInButtonProps = ButtonProps;
-export type SignUpButtonProps = ButtonProps;
+export interface SignUpButtonProps extends ButtonProps {
+  unsafeMetadata?: SignUpUnsafeMetadata;
+}
 
 export type SignInWithMetamaskButtonProps = Pick<ButtonProps, 'redirectUrl' | 'children'>;
 

packages/types/src/clerk.ts

@@ -597,6 +597,11 @@ export type SignUpProps = {
    * prop of ClerkProvided (if one is provided)
    */
   appearance?: SignUpTheme;
+
+  /**
+   * Additional arbitrary metadata to be stored alongside the User object
+   */
+  unsafeMetadata?: SignUpUnsafeMetadata;
 } & RedirectOptions;
 
 export type UserProfileProps = {

playground/nextjs/app/app-dir/sign-up/page.tsx

@@ -1,5 +1,5 @@
 import { SignUp } from '@clerk/nextjs/app-beta';
 
 export default function Page() {
-  return <SignUp />;
+  return <SignUp unsafeMetadata={{ playground: 'nextjs', type: 'app-dir' }} />;
 }

playground/nextjs/pages/sign-up/[[...index]].tsx

@@ -1,11 +1,10 @@
 import { SignUp } from '@clerk/nextjs';
 import type { NextPage } from 'next';
-import React from 'react';
 
 const SignUpPage: NextPage = () => {
   return (
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-      <SignUp />
+      <SignUp unsafeMetadata={{ playground: 'nextjs', type: 'pages' }} />
     </div>
   );
 };

playground/vanillajs/index.html

@@ -129,7 +129,7 @@ <h3>Clerk JS Playground</h3>
       }
 
       function openSignUp() {
-        Clerk.openSignUp();
+        Clerk.openSignUp({ unsafeMetadata: { playground: 'vanillajs' } });
       }
 
       function signOut() {