feat(clerk-js,elements,types,localization): Make legal consent stable

.changeset/twenty-rules-boil.md

@@ -0,0 +1,11 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/elements': minor
+'@clerk/types': minor
+'@clerk/ui': patch
+---
+
+The Legal consent feature is now stable.
+
+Removed the `__experimental_` preffix.

integration/testUtils/commonPageObject.ts

@@ -42,7 +42,7 @@ export const common = ({ page }: TestArgs) => {
       return page.locator('input[name=password]');
     },
     getLegalAccepted: () => {
-      return page.locator('input[name=__experimental_legalAccepted]');
+      return page.locator('input[name=legalAccepted]');
     },
     getFirstNameInput: () => {
       return page.locator('input[name=firstName]');

packages/clerk-js/src/core/clerk.ts

@@ -1480,7 +1480,7 @@ export class Clerk implements ClerkInterface {
           return this.client?.signUp.create({
             strategy: 'google_one_tap',
             token: params.token,
-            __experimental_legalAccepted: params.__experimental_legalAccepted,
+            legalAccepted: params.legalAccepted,
           });
         }
         throw err;
@@ -1501,7 +1501,7 @@ export class Clerk implements ClerkInterface {
     customNavigate,
     unsafeMetadata,
     strategy,
-    __experimental_legalAccepted,
+    legalAccepted,
   }: ClerkAuthenticateWithWeb3Params): Promise<void> => {
     if (!this.client || !this.environment) {
       return;
@@ -1524,7 +1524,7 @@ export class Clerk implements ClerkInterface {
           generateSignature,
           unsafeMetadata,
           strategy,
-          __experimental_legalAccepted,
+          legalAccepted,
         });
 
         if (

packages/clerk-js/src/core/resources/SignUp.ts

@@ -112,12 +112,6 @@ export class SignUp extends BaseResource implements SignUpResource {
       paramsWithCaptcha.strategy = SignUp.clerk.client?.signIn.firstFactorVerification.strategy;
     }
 
-    // TODO(@vaggelis): Remove this once the legalAccepted is stable
-    if (typeof params.__experimental_legalAccepted !== 'undefined') {
-      paramsWithCaptcha.legalAccepted = params.__experimental_legalAccepted;
-      paramsWithCaptcha.__experimental_legalAccepted = undefined;
-    }
-
     return this._basePost({
       path: this.pathRoot,
       body: normalizeUnsafeMetadata(paramsWithCaptcha),
@@ -199,15 +193,15 @@ export class SignUp extends BaseResource implements SignUpResource {
   public authenticateWithWeb3 = async (
     params: AuthenticateWithWeb3Params & {
       unsafeMetadata?: SignUpUnsafeMetadata;
-      __experimental_legalAccepted?: boolean;
+      legalAccepted?: boolean;
     },
   ): Promise<SignUpResource> => {
     const {
       generateSignature,
       identifier,
       unsafeMetadata,
       strategy = 'web3_metamask_signature',
-      __experimental_legalAccepted,
+      legalAccepted,
     } = params || {};
     const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
 
@@ -216,7 +210,7 @@ export class SignUp extends BaseResource implements SignUpResource {
     }
 
     const web3Wallet = identifier || this.web3wallet!;
-    await this.create({ web3Wallet, unsafeMetadata, __experimental_legalAccepted: __experimental_legalAccepted });
+    await this.create({ web3Wallet, unsafeMetadata, legalAccepted });
     await this.prepareWeb3WalletVerification({ strategy });
 
     const { message } = this.verifications.web3Wallet;
@@ -247,7 +241,7 @@ export class SignUp extends BaseResource implements SignUpResource {
 
   public authenticateWithMetamask = async (
     params?: SignUpAuthenticateWithWeb3Params & {
-      __experimental_legalAccepted?: boolean;
+      legalAccepted?: boolean;
     },
   ): Promise<SignUpResource> => {
     const identifier = await getMetamaskIdentifier();
@@ -256,13 +250,13 @@ export class SignUp extends BaseResource implements SignUpResource {
       generateSignature: generateSignatureWithMetamask,
       unsafeMetadata: params?.unsafeMetadata,
       strategy: 'web3_metamask_signature',
-      __experimental_legalAccepted: params?.__experimental_legalAccepted,
+      legalAccepted: params?.legalAccepted,
     });
   };
 
   public authenticateWithCoinbaseWallet = async (
     params?: SignUpAuthenticateWithWeb3Params & {
-      __experimental_legalAccepted?: boolean;
+      legalAccepted?: boolean;
     },
   ): Promise<SignUpResource> => {
     const identifier = await getCoinbaseWalletIdentifier();
@@ -271,7 +265,7 @@ export class SignUp extends BaseResource implements SignUpResource {
       generateSignature: generateSignatureWithCoinbaseWallet,
       unsafeMetadata: params?.unsafeMetadata,
       strategy: 'web3_coinbase_wallet_signature',
-      __experimental_legalAccepted: params?.__experimental_legalAccepted,
+      legalAccepted: params?.legalAccepted,
     });
   };
 
@@ -282,7 +276,7 @@ export class SignUp extends BaseResource implements SignUpResource {
     continueSignUp = false,
     unsafeMetadata,
     emailAddress,
-    __experimental_legalAccepted,
+    legalAccepted,
   }: AuthenticateWithRedirectParams & {
     unsafeMetadata?: SignUpUnsafeMetadata;
   }): Promise<void> => {
@@ -293,7 +287,7 @@ export class SignUp extends BaseResource implements SignUpResource {
         actionCompleteRedirectUrl: redirectUrlComplete,
         unsafeMetadata,
         emailAddress,
-        __experimental_legalAccepted,
+        legalAccepted,
       };
       return continueSignUp && this.id ? this.update(params) : this.create(params);
     };
@@ -320,13 +314,6 @@ export class SignUp extends BaseResource implements SignUpResource {
   };
 
   update = (params: SignUpUpdateParams): Promise<SignUpResource> => {
-    // TODO(@vaggelis): Remove this once the legalAccepted is stable
-    if (typeof params.__experimental_legalAccepted !== 'undefined') {
-      // @ts-expect-error - We need to remove the __experimental_legalAccepted key from the params
-      params.legalAccepted = params.__experimental_legalAccepted;
-      params.__experimental_legalAccepted = undefined;
-    }
-
     return this._basePatch({
       body: normalizeUnsafeMetadata(params),
     });

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

@@ -71,7 +71,7 @@ function _SignUpContinue() {
       placeholder: localizationKeys('formFieldInputPlaceholder__password'),
       validatePassword: true,
     }),
-    __experimental_legalAccepted: useFormControl('__experimental_legalAccepted', '', {
+    legalAccepted: useFormControl('legalAccepted', '', {
       type: 'checkbox',
       label: '',
       defaultChecked: false,
@@ -171,11 +171,11 @@ function _SignUpContinue() {
 
   const headerTitle = !onlyLegalConsentMissing
     ? localizationKeys('signUp.continue.title')
-    : localizationKeys('signUp.__experimental_legalConsent.continue.title');
+    : localizationKeys('signUp.legalConsent.continue.title');
 
   const headerSubtitle = !onlyLegalConsentMissing
     ? localizationKeys('signUp.continue.subtitle')
-    : localizationKeys('signUp.__experimental_legalConsent.continue.subtitle');
+    : localizationKeys('signUp.legalConsent.continue.subtitle');
 
   return (
     <Flow.Part part='complete'>

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

@@ -120,11 +120,11 @@ export const SignUpForm = (props: SignUpFormProps) => {
             width: '100%',
           }}
         >
-          {shouldShow('__experimental_legalAccepted') && (
-            <Form.ControlRow elementId='__experimental_legalAccepted'>
+          {shouldShow('legalAccepted') && (
+            <Form.ControlRow elementId='legalAccepted'>
               <LegalCheckbox
-                {...formState.__experimental_legalAccepted.props}
-                isRequired={fields.__experimental_legalAccepted?.required}
+                {...formState.legalAccepted.props}
+                isRequired={fields.legalAccepted?.required}
               />
             </Form.ControlRow>
           )}

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

@@ -35,7 +35,7 @@ export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps)
             redirectUrlComplete,
             strategy,
             unsafeMetadata: ctx.unsafeMetadata,
-            __experimental_legalAccepted: props.legalAccepted,
+            legalAccepted: props.legalAccepted,
           })
           .catch(err => handleError(err, [], card.setError));
       }}
@@ -47,7 +47,7 @@ export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps)
             signUpContinueUrl: 'continue',
             unsafeMetadata: ctx.unsafeMetadata,
             strategy,
-            __experimental_legalAccepted: props.legalAccepted,
+            legalAccepted: props.legalAccepted,
           })
           .catch(err => handleError(err, [], card.setError));
       }}

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

@@ -81,7 +81,7 @@ function _SignUpStart(): JSX.Element {
       label: localizationKeys('formFieldLabel__phoneNumber'),
       placeholder: localizationKeys('formFieldInputPlaceholder__phoneNumber'),
     }),
-    __experimental_legalAccepted: useFormControl('__experimental_legalAccepted', '', {
+    legalAccepted: useFormControl('legalAccepted', '', {
       type: 'checkbox',
       label: '',
       defaultChecked: false,
@@ -281,7 +281,7 @@ function _SignUpStart(): JSX.Element {
                   enableOAuthProviders={showOauthProviders}
                   enableWeb3Providers={showWeb3Providers}
                   continueSignUp={missingRequirementsWithTicket}
-                  legalAccepted={Boolean(formState.__experimental_legalAccepted.checked) || undefined}
+                  legalAccepted={Boolean(formState.legalAccepted.checked) || undefined}
                 />
               )}
               {shouldShowForm && (
@@ -295,10 +295,10 @@ function _SignUpStart(): JSX.Element {
               )}
             </SocialButtonsReversibleContainerWithDivider>
             {!shouldShowForm && isLegalConsentEnabled && (
-              <Form.ControlRow elementId='__experimental_legalAccepted'>
+              <Form.ControlRow elementId='legalAccepted'>
                 <LegalCheckbox
-                  {...formState.__experimental_legalAccepted.props}
-                  isRequired={fields.__experimental_legalAccepted?.required}
+                  {...formState.legalAccepted.props}
+                  isRequired={fields.legalAccepted?.required}
                 />
               </Form.ControlRow>
             )}

packages/clerk-js/src/ui/components/SignUp/signUpFormHelpers.ts

@@ -16,7 +16,7 @@ const FieldKeys = [
   'lastName',
   'password',
   'ticket',
-  '__experimental_legalAccepted',
+  'legalAccepted',
 ] as const;
 export type FieldKey = (typeof FieldKeys)[number];
 
@@ -91,7 +91,7 @@ export function minimizeFieldsForExistingSignup(fields: Fields, signUp: SignUpRe
     }
 
     if (hasLegalAccepted) {
-      delete fields.__experimental_legalAccepted;
+      delete fields.legalAccepted;
     }
 
     // Hide any non-required fields
@@ -148,7 +148,7 @@ function getField(fieldKey: FieldKey, fieldProps: FieldDeterminationProps): Fiel
       return getPasswordField(fieldProps.attributes);
     case 'ticket':
       return getTicketField(fieldProps.hasTicket);
-    case '__experimental_legalAccepted':
+    case 'legalAccepted':
       return getLegalAcceptedField(fieldProps.legalConsentRequired);
     case 'username':
     case 'firstName':

packages/clerk-js/src/ui/elements/LegalConsentCheckbox.tsx

@@ -1,4 +1,5 @@
 import { useEnvironment } from '../../ui/contexts';
+import { sanitizeInputProps, useFormField } from '../../ui/primitives/hooks';
 import type { LocalizationKey } from '../customizables';
 import {
   descriptors,
@@ -16,40 +17,49 @@ import { LinkRenderer } from './LinkRenderer';
 const LegalCheckboxLabel = (props: { termsUrl?: string; privacyPolicyUrl?: string }) => {
   const { termsUrl, privacyPolicyUrl } = props;
   const { t } = useLocalizations();
+  const formField = useFormField();
+  const { placeholder, ...inputProps } = sanitizeInputProps(formField);
   let localizationKey: LocalizationKey | undefined;
 
   if (termsUrl && privacyPolicyUrl) {
-    localizationKey = localizationKeys(
-      'signUp.__experimental_legalConsent.checkbox.label__termsOfServiceAndPrivacyPolicy',
-      {
-        termsOfServiceLink: props.termsUrl,
-        privacyPolicyLink: props.privacyPolicyUrl,
-      },
-    );
+    localizationKey = localizationKeys('signUp.legalConsent.checkbox.label__termsOfServiceAndPrivacyPolicy', {
+      termsOfServiceLink: props.termsUrl,
+      privacyPolicyLink: props.privacyPolicyUrl,
+    });
   } else if (termsUrl) {
-    localizationKey = localizationKeys('signUp.__experimental_legalConsent.checkbox.label__onlyTermsOfService', {
+    localizationKey = localizationKeys('signUp.legalConsent.checkbox.label__onlyTermsOfService', {
       termsOfServiceLink: props.termsUrl,
     });
   } else if (privacyPolicyUrl) {
-    localizationKey = localizationKeys('signUp.__experimental_legalConsent.checkbox.label__onlyPrivacyPolicy', {
+    localizationKey = localizationKeys('signUp.legalConsent.checkbox.label__onlyPrivacyPolicy', {
       privacyPolicyLink: props.privacyPolicyUrl,
     });
   }
 
   return (
-    <Text
-      variant='body'
-      as='span'
+    <FormLabel
+      elementDescriptor={descriptors.formFieldCheckboxLabel}
+      htmlFor={inputProps.id}
+      isDisabled={inputProps.isDisabled}
+      sx={t => ({
+        paddingLeft: t.space.$1x5,
+        textAlign: 'left',
+      })}
     >
-      <LinkRenderer
-        text={t(localizationKey)}
-        isExternal
-        sx={t => ({
-          textDecoration: 'underline',
-          textUnderlineOffset: t.space.$1,
-        })}
-      />
-    </Text>
+      <Text
+        variant='body'
+        as='span'
+      >
+        <LinkRenderer
+          text={t(localizationKey)}
+          isExternal
+          sx={t => ({
+            textDecoration: 'underline',
+            textUnderlineOffset: t.space.$1,
+          })}
+        />
+      </Text>
+    </FormLabel>
   );
 };
 
@@ -71,21 +81,12 @@ export const LegalCheckbox = (
       <Flex justify='center'>
         <Field.CheckboxIndicator
           elementDescriptor={descriptors.formFieldCheckboxInput}
-          elementId={descriptors.formFieldInput.setId('__experimental_legalAccepted')}
+          elementId={descriptors.formFieldInput.setId('legalAccepted')}
+        />
+        <LegalCheckboxLabel
+          termsUrl={termsLink}
+          privacyPolicyUrl={privacyPolicy}
         />
-        <FormLabel
-          elementDescriptor={descriptors.formFieldCheckboxLabel}
-          htmlFor={props.itemID}
-          sx={t => ({
-            paddingLeft: t.space.$1x5,
-            textAlign: 'left',
-          })}
-        >
-          <LegalCheckboxLabel
-            termsUrl={termsLink}
-            privacyPolicyUrl={privacyPolicy}
-          />
-        </FormLabel>
       </Flex>
     </Field.Root>
   );

packages/elements/src/internals/machines/form/form.machine.ts

@@ -74,11 +74,7 @@ export const FormMachine = setup({
           throw new Error('Field name is required');
         }
 
-        const fieldsNameMap: Record<string, string> = {
-          legalAccepted: '__experimental_legalAccepted',
-        };
-        const fieldName = fieldsNameMap[params.name] || params.name;
-
+        const fieldName = params.name;
         if (context.fields.has(fieldName)) {
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           context.fields.get(fieldName)!.feedback = params.feedback;

packages/elements/src/internals/machines/sign-up/utils/fields-to-params.ts

@@ -9,7 +9,7 @@ const SignUpAdditionalKeys = [
   'username',
   'password',
   'phoneNumber',
-  '__experimental_legalAccepted',
+  'legalAccepted',
 ] as const;
 
 type SignUpAdditionalKeys = (typeof SignUpAdditionalKeys)[number];