feat(clerk-js): Legal consent (#4337)

Author: octoper

.changeset/curvy-ghosts-relax.md

@@ -0,0 +1,7 @@
+---
+"@clerk/localizations": minor
+"@clerk/clerk-js": minor
+"@clerk/types": minor
+---
+
+Adding experimental support for legal consent for `<SignUp/>` component

packages/clerk-js/bundlewatch.config.json

@@ -2,7 +2,7 @@
   "files": [
     { "path": "./dist/clerk.browser.js", "maxSize": "68kB" },
     { "path": "./dist/clerk.headless.js", "maxSize": "44kB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "86KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "87KB" },
     { "path": "./dist/vendors*.js", "maxSize": "70KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "58KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

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

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

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

@@ -44,6 +44,8 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
   afterCreateOrganizationUrl!: string;
   googleOneTapClientId?: string;
   showDevModeWarning!: boolean;
+  termsUrl!: string;
+  privacyPolicyUrl!: string;
 
   public constructor(data: DisplayConfigJSON) {
     super();
@@ -87,6 +89,8 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
     this.afterCreateOrganizationUrl = data.after_create_organization_url;
     this.googleOneTapClientId = data.google_one_tap_client_id;
     this.showDevModeWarning = data.show_devmode_warning;
+    this.termsUrl = data.terms_url;
+    this.privacyPolicyUrl = data.privacy_policy_url;
     return this;
   }
 }

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

@@ -70,6 +70,7 @@ export class SignUp extends BaseResource implements SignUpResource {
   createdSessionId: string | null = null;
   createdUserId: string | null = null;
   abandonAt: number | null = null;
+  legalAcceptedAt: number | null = null;
 
   constructor(data: SignUpJSON | null = null) {
     super();
@@ -111,6 +112,12 @@ 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),
@@ -190,17 +197,26 @@ export class SignUp extends BaseResource implements SignUpResource {
   };
 
   public authenticateWithWeb3 = async (
-    params: AuthenticateWithWeb3Params & { unsafeMetadata?: SignUpUnsafeMetadata },
+    params: AuthenticateWithWeb3Params & {
+      unsafeMetadata?: SignUpUnsafeMetadata;
+      __experimental_legalAccepted?: boolean;
+    },
   ): Promise<SignUpResource> => {
-    const { generateSignature, identifier, unsafeMetadata, strategy = 'web3_metamask_signature' } = params || {};
+    const {
+      generateSignature,
+      identifier,
+      unsafeMetadata,
+      strategy = 'web3_metamask_signature',
+      __experimental_legalAccepted,
+    } = params || {};
     const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
 
     if (!(typeof generateSignature === 'function')) {
       clerkMissingOptionError('generateSignature');
     }
 
     const web3Wallet = identifier || this.web3wallet!;
-    await this.create({ web3Wallet, unsafeMetadata });
+    await this.create({ web3Wallet, unsafeMetadata, __experimental_legalAccepted: __experimental_legalAccepted });
     await this.prepareWeb3WalletVerification({ strategy });
 
     const { message } = this.verifications.web3Wallet;
@@ -229,25 +245,33 @@ export class SignUp extends BaseResource implements SignUpResource {
     return this.attemptWeb3WalletVerification({ signature, strategy });
   };
 
-  public authenticateWithMetamask = async (params?: SignUpAuthenticateWithWeb3Params): Promise<SignUpResource> => {
+  public authenticateWithMetamask = async (
+    params?: SignUpAuthenticateWithWeb3Params & {
+      __experimental_legalAccepted?: boolean;
+    },
+  ): Promise<SignUpResource> => {
     const identifier = await getMetamaskIdentifier();
     return this.authenticateWithWeb3({
       identifier,
       generateSignature: generateSignatureWithMetamask,
       unsafeMetadata: params?.unsafeMetadata,
       strategy: 'web3_metamask_signature',
+      __experimental_legalAccepted: params?.__experimental_legalAccepted,
     });
   };
 
   public authenticateWithCoinbaseWallet = async (
-    params?: SignUpAuthenticateWithWeb3Params,
+    params?: SignUpAuthenticateWithWeb3Params & {
+      __experimental_legalAccepted?: boolean;
+    },
   ): Promise<SignUpResource> => {
     const identifier = await getCoinbaseWalletIdentifier();
     return this.authenticateWithWeb3({
       identifier,
       generateSignature: generateSignatureWithCoinbaseWallet,
       unsafeMetadata: params?.unsafeMetadata,
       strategy: 'web3_coinbase_wallet_signature',
+      __experimental_legalAccepted: params?.__experimental_legalAccepted,
     });
   };
 
@@ -258,6 +282,7 @@ export class SignUp extends BaseResource implements SignUpResource {
     continueSignUp = false,
     unsafeMetadata,
     emailAddress,
+    __experimental_legalAccepted,
   }: AuthenticateWithRedirectParams & {
     unsafeMetadata?: SignUpUnsafeMetadata;
   }): Promise<void> => {
@@ -268,6 +293,7 @@ export class SignUp extends BaseResource implements SignUpResource {
         actionCompleteRedirectUrl: redirectUrlComplete,
         unsafeMetadata,
         emailAddress,
+        __experimental_legalAccepted,
       };
       return continueSignUp && this.id ? this.update(params) : this.create(params);
     };
@@ -294,6 +320,13 @@ 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),
     });
@@ -328,6 +361,7 @@ export class SignUp extends BaseResource implements SignUpResource {
       this.createdUserId = data.created_user_id;
       this.abandonAt = data.abandon_at;
       this.web3wallet = data.web3_wallet;
+      this.legalAcceptedAt = data.legal_accepted_at;
     }
     return this;
   }

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

@@ -87,6 +87,7 @@ export class User extends BaseResource implements UserResource {
   createOrganizationsLimit: number | null = null;
   deleteSelfEnabled = false;
   lastSignInAt: Date | null = null;
+  legalAcceptedAt: Date | null = null;
   updatedAt: Date | null = null;
   createdAt: Date | null = null;
 
@@ -360,6 +361,10 @@ export class User extends BaseResource implements UserResource {
       this.lastSignInAt = unixEpochToDate(data.last_sign_in_at);
     }
 
+    if (data.legal_accepted_at) {
+      this.legalAcceptedAt = unixEpochToDate(data.legal_accepted_at);
+    }
+
     this.updatedAt = unixEpochToDate(data.updated_at);
     this.createdAt = unixEpochToDate(data.created_at);
     return this;

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

@@ -1,5 +1,5 @@
 import { useClerk } from '@clerk/shared/react';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
 import { descriptors, Flex, Flow, localizationKeys } from '../../customizables';
@@ -38,12 +38,6 @@ function _SignUpContinue() {
     getInitialActiveIdentifier(attributes, userSettings.signUp.progressive),
   );
 
-  // Redirect to sign-up if there is no persisted sign-up
-  if (!signUp.id) {
-    void navigate(displayConfig.signUpUrl);
-    return <LoadingCard />;
-  }
-
   // TODO: This form should be shared between SignUpStart and SignUpContinue
   const formState = {
     firstName: useFormControl('firstName', initialValues.firstName || '', {
@@ -77,8 +71,25 @@ function _SignUpContinue() {
       placeholder: localizationKeys('formFieldInputPlaceholder__password'),
       validatePassword: true,
     }),
+    __experimental_legalAccepted: useFormControl('__experimental_legalAccepted', '', {
+      type: 'checkbox',
+      label: '',
+      defaultChecked: false,
+      isRequired: userSettings.signUp.legal_consent_enabled || false,
+    }),
   } as const;
 
+  const onlyLegalConsentMissing = useMemo(
+    () => signUp.missingFields && signUp.missingFields.length === 1 && signUp.missingFields[0] === 'legal_accepted',
+    [signUp.missingFields],
+  );
+
+  // Redirect to sign-up if there is no persisted sign-up
+  if (!signUp.id) {
+    void navigate(displayConfig.signUpUrl);
+    return <LoadingCard />;
+  }
+
   const hasEmail = !!formState.emailAddress.value;
   const hasVerifiedExternalAccount = signUp.verifications?.externalAccount?.status == 'verified';
   const hasVerifiedWeb3 = signUp.verifications?.web3Wallet?.status == 'verified';
@@ -89,6 +100,7 @@ function _SignUpContinue() {
     activeCommIdentifierType,
     signUp,
     isProgressiveSignUp,
+    legalConsentRequired: userSettings.signUp.legal_consent_enabled,
   });
   minimizeFieldsForExistingSignup(fields, signUp);
 
@@ -131,12 +143,13 @@ function _SignUpContinue() {
       !phoneNumberProvided &&
       emailOrPhone(attributes, isProgressiveSignUp)
     ) {
-      fieldsToSubmit.push(formState['emailAddress']);
-      fieldsToSubmit.push(formState['phoneNumber']);
+      fieldsToSubmit.push(formState.emailAddress);
+      fieldsToSubmit.push(formState.phoneNumber);
     }
 
     card.setLoading();
     card.setError(undefined);
+
     return signUp
       .update(buildRequest(fieldsToSubmit))
       .then(res =>
@@ -156,13 +169,21 @@ function _SignUpContinue() {
   const showOauthProviders = !hasVerifiedExternalAccount && oauthOptions.length > 0;
   const showWeb3Providers = !hasVerifiedWeb3 && web3Options.length > 0;
 
+  const headerTitle = !onlyLegalConsentMissing
+    ? localizationKeys('signUp.continue.title')
+    : localizationKeys('signUp.__experimental_legalConsent.continue.title');
+
+  const headerSubtitle = !onlyLegalConsentMissing
+    ? localizationKeys('signUp.continue.subtitle')
+    : localizationKeys('signUp.__experimental_legalConsent.continue.subtitle');
+
   return (
     <Flow.Part part='complete'>
       <Card.Root>
         <Card.Content>
           <Header.Root showLogo>
-            <Header.Title localizationKey={localizationKeys('signUp.continue.title')} />
-            <Header.Subtitle localizationKey={localizationKeys('signUp.continue.subtitle')} />
+            <Header.Title localizationKey={headerTitle} />
+            <Header.Subtitle localizationKey={headerSubtitle} />
           </Header.Root>
           <Card.Alert>{card.error}</Card.Alert>
           <Flex
@@ -171,7 +192,7 @@ function _SignUpContinue() {
             gap={8}
           >
             <SocialButtonsReversibleContainerWithDivider>
-              {(showOauthProviders || showWeb3Providers) && (
+              {(showOauthProviders || showWeb3Providers) && !onlyLegalConsentMissing && (
                 <SignUpSocialButtons
                   enableOAuthProviders={showOauthProviders}
                   enableWeb3Providers={showWeb3Providers}
@@ -182,6 +203,7 @@ function _SignUpContinue() {
                 handleSubmit={handleSubmit}
                 fields={fields}
                 formState={formState}
+                onlyLegalAcceptedMissing={onlyLegalConsentMissing}
                 canToggleEmailPhone={canToggleEmailPhone}
                 handleEmailPhoneToggle={handleChangeActive}
               />