feat: add clientUserId support

packages/angular/src/sign-document.ts

@@ -8,6 +8,15 @@ export type EmbedSignDocumentProps = {
   host?: string;
   token: string;
 
+  /**
+   * Opaque identifier for the signer, used to prefill and persist their signature
+   * across embeds (Platform Plan).
+   *
+   * Sent as a URL query parameter, so it will appear in request logs. Never pass an
+   * email address or other personally identifiable information here.
+   */
+  clientUserId?: string | undefined;
+
   // @src: /apps/web/src/app/embed/direct/[[...url]]/schema
   css?: string | undefined;
   cssVars?: (CssVars & Record<string, string>) | undefined;
@@ -73,6 +82,7 @@ export default class EmbedSignDocument {
   allowDocumentRejection!: EmbedSignDocumentProps["allowDocumentRejection"];
   @Input() additionalProps!: EmbedSignDocumentProps["additionalProps"];
   @Input() token!: EmbedSignDocumentProps["token"];
+  @Input() clientUserId!: EmbedSignDocumentProps["clientUserId"];
   @Input() onDocumentReady!: EmbedSignDocumentProps["onDocumentReady"];
   @Input() onDocumentCompleted!: EmbedSignDocumentProps["onDocumentCompleted"];
   @Input() onDocumentError!: EmbedSignDocumentProps["onDocumentError"];
@@ -100,6 +110,9 @@ export default class EmbedSignDocument {
       )
     );
     const srcUrl = new URL(`/embed/sign/${this.token}`, appHost);
+    if (this.clientUserId) {
+      srcUrl.searchParams.set("clientUserId", this.clientUserId);
+    }
     return `${srcUrl}#${encodedOptions}`;
   }
   get sandbox() {

packages/mitosis/src/sign-document.lite.tsx

@@ -7,6 +7,15 @@ export type EmbedSignDocumentProps = {
   host?: string;
   token: string;
 
+  /**
+   * Opaque identifier for the signer, used to prefill and persist their signature
+   * across embeds (Platform Plan).
+   *
+   * Sent as a URL query parameter, so it will appear in request logs. Never pass an
+   * email address or other personally identifiable information here.
+   */
+  clientUserId?: string | undefined;
+
   // @src: /apps/web/src/app/embed/direct/[[...url]]/schema
   css?: string | undefined;
   cssVars?: (CssVars & Record<string, string>) | undefined;
@@ -62,6 +71,10 @@ export default function EmbedSignDocument(props: EmbedSignDocumentProps) {
 
       const srcUrl = new URL(`/embed/sign/${props.token}`, appHost);
 
+      if (props.clientUserId) {
+        srcUrl.searchParams.set('clientUserId', props.clientUserId);
+      }
+
       return `${srcUrl}#${encodedOptions}`;
     },
 

packages/preact/src/sign-document.tsx

@@ -7,6 +7,15 @@ export type EmbedSignDocumentProps = {
   host?: string;
   token: string;
 
+  /**
+   * Opaque identifier for the signer, used to prefill and persist their signature
+   * across embeds (Platform Plan).
+   *
+   * Sent as a URL query parameter, so it will appear in request logs. Never pass an
+   * email address or other personally identifiable information here.
+   */
+  clientUserId?: string | undefined;
+
   // @src: /apps/web/src/app/embed/direct/[[...url]]/schema
   css?: string | undefined;
   cssVars?: (CssVars & Record<string, string>) | undefined;
@@ -58,6 +67,9 @@ function EmbedSignDocument(props: EmbedSignDocumentProps) {
       )
     );
     const srcUrl = new URL(`/embed/sign/${props.token}`, appHost);
+    if (props.clientUserId) {
+      srcUrl.searchParams.set("clientUserId", props.clientUserId);
+    }
     return `${srcUrl}#${encodedOptions}`;
   }
 

packages/react/src/sign-document.tsx

@@ -7,6 +7,15 @@ export type EmbedSignDocumentProps = {
   host?: string;
   token: string;
 
+  /**
+   * Opaque identifier for the signer, used to prefill and persist their signature
+   * across embeds (Platform Plan).
+   *
+   * Sent as a URL query parameter, so it will appear in request logs. Never pass an
+   * email address or other personally identifiable information here.
+   */
+  clientUserId?: string | undefined;
+
   // @src: /apps/web/src/app/embed/direct/[[...url]]/schema
   css?: string | undefined;
   cssVars?: (CssVars & Record<string, string>) | undefined;
@@ -58,6 +67,9 @@ function EmbedSignDocument(props: EmbedSignDocumentProps) {
       )
     );
     const srcUrl = new URL(`/embed/sign/${props.token}`, appHost);
+    if (props.clientUserId) {
+      srcUrl.searchParams.set("clientUserId", props.clientUserId);
+    }
     return `${srcUrl}#${encodedOptions}`;
   }
 

packages/solid/src/sign-document.tsx

@@ -5,6 +5,15 @@ export type EmbedSignDocumentProps = {
   host?: string;
   token: string;
 
+  /**
+   * Opaque identifier for the signer, used to prefill and persist their signature
+   * across embeds (Platform Plan).
+   *
+   * Sent as a URL query parameter, so it will appear in request logs. Never pass an
+   * email address or other personally identifiable information here.
+   */
+  clientUserId?: string | undefined;
+
   // @src: /apps/web/src/app/embed/direct/[[...url]]/schema
   css?: string | undefined;
   cssVars?: (CssVars & Record<string, string>) | undefined;
@@ -56,6 +65,9 @@ function EmbedSignDocument(props: EmbedSignDocumentProps) {
       )
     );
     const srcUrl = new URL(`/embed/sign/${props.token}`, appHost);
+    if (props.clientUserId) {
+      srcUrl.searchParams.set("clientUserId", props.clientUserId);
+    }
     return `${srcUrl}#${encodedOptions}`;
   });
 

packages/svelte/src/sign-document.svelte

@@ -4,6 +4,15 @@
     host?: string;
     token: string;
 
+    /**
+     * Opaque identifier for the signer, used to prefill and persist their signature
+     * across embeds (Platform Plan).
+     *
+     * Sent as a URL query parameter, so it will appear in request logs. Never pass an
+     * email address or other personally identifiable information here.
+     */
+    clientUserId?: string | undefined;
+
     // @src: /apps/web/src/app/embed/direct/[[...url]]/schema
     css?: string | undefined;
     cssVars?: (CssVars & Record<string, string>) | undefined;
@@ -54,6 +63,7 @@
   export let additionalProps: EmbedSignDocumentProps["additionalProps"] =
     undefined;
   export let token: EmbedSignDocumentProps["token"];
+  export let clientUserId: EmbedSignDocumentProps["clientUserId"] = undefined;
   export let onDocumentReady: EmbedSignDocumentProps["onDocumentReady"] =
     undefined;
   export let onDocumentCompleted: EmbedSignDocumentProps["onDocumentCompleted"] =
@@ -101,6 +111,9 @@
       )
     );
     const srcUrl = new URL(`/embed/sign/${token}`, appHost);
+    if (clientUserId) {
+      srcUrl.searchParams.set("clientUserId", clientUserId);
+    }
     return `${srcUrl}#${encodedOptions}`;
   };
   $: sandbox = () => {

packages/vue/src/sign-document.vue

@@ -17,6 +17,15 @@ export type EmbedSignDocumentProps = {
   host?: string;
   token: string;
 
+  /**
+   * Opaque identifier for the signer, used to prefill and persist their signature
+   * across embeds (Platform Plan).
+   *
+   * Sent as a URL query parameter, so it will appear in request logs. Never pass an
+   * email address or other personally identifiable information here.
+   */
+  clientUserId?: string | undefined;
+
   // @src: /apps/web/src/app/embed/direct/[[...url]]/schema
   css?: string | undefined;
   cssVars?: (CssVars & Record<string, string>) | undefined;
@@ -75,6 +84,9 @@ const src = computed(() => {
     )
   );
   const srcUrl = new URL(`/embed/sign/${props.token}`, appHost);
+  if (props.clientUserId) {
+    srcUrl.searchParams.set("clientUserId", props.clientUserId);
+  }
   return `${srcUrl}#${encodedOptions}`;
 });
 const sandbox = computed(() => {

packages/webcomponent/src/index.ts

@@ -19,6 +19,7 @@ register(EmbedDirectTemplate, 'documenso-embed-direct-template', [
 register(EmbedSignDocument, 'documenso-embed-sign-document', [
   'token',
   'host',
+  'clientUserId',
   'css',
   'name',
   'lockName',

playground/src/components/embeddings/sign-document.tsx

@@ -23,6 +23,7 @@ import { EmbedSignDocument } from '@documenso/embed-react';
 
 const formSchema = z.object({
   token: z.string().min(1, 'Signing token is required'),
+  clientUserId: z.string().optional(),
   email: z.string().email('Must be a valid email').optional().or(z.literal('')),
   lockEmail: z.boolean().optional(),
   name: z.string().optional(),
@@ -46,6 +47,7 @@ export default function SignDocumentEmbedding() {
     resolver: zodResolver(formSchema),
     defaultValues: {
       token: '',
+      clientUserId: '',
       email: '',
       lockEmail: false,
       name: '',
@@ -105,6 +107,29 @@ export default function SignDocumentEmbedding() {
                 )}
               />
 
+              <FormField
+                control={form.control}
+                name="clientUserId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Client User ID (Optional)</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="e.g. usr_8f2c1b4e"
+                        className="font-mono text-sm"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Opaque identifier used to prefill and persist the signer's signature across
+                      embeds (Platform Plan). Sent as a query param, so never use an email or other
+                      PII.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
               <Separator />
 
               <FormField
@@ -272,6 +297,7 @@ export default function SignDocumentEmbedding() {
                 className="h-[800px] w-full"
                 host={host}
                 token={embedConfig.token}
+                clientUserId={embedConfig.clientUserId || undefined}
                 email={embedConfig.email}
                 lockEmail={embedConfig.lockEmail}
                 name={embedConfig.name}