Skip to content

Commit bdffc88

Browse files
raptisjraptisj
committed
fix(clerk-js): Read captcha sitekey from environment request
fix(clerk-js): Minor refactor fix(clerk-js): Add experimental prefix
1 parent 72491d8 commit bdffc88

8 files changed

Lines changed: 24 additions & 12 deletions

File tree

‎packages/clerk-js/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
},
105105
{
106106
"path": "./dist/clerk.headless.js",
107-
"maxSize": "43kB"
107+
"maxSize": "44kB"
108108
}
109109
]
110110
},

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ export default class Clerk implements ClerkInterface {
197197
return this.#instanceType;
198198
}
199199

200-
get canUseCaptcha(): boolean | undefined {
200+
get experimental_canUseCaptcha(): boolean | undefined {
201201
if (this.#environment) {
202202
return (
203203
this.#environment.userSettings.signUp.captcha_enabled &&
@@ -209,6 +209,14 @@ export default class Clerk implements ClerkInterface {
209209
return false;
210210
}
211211

212+
get experimental_captchaSiteKey(): string | null {
213+
if (this.#environment) {
214+
return this.#environment.displayConfig.captchaPublicKey;
215+
}
216+
217+
return null;
218+
}
219+
212220
public constructor(key: string, options?: DomainOrProxyUrl) {
213221
key = (key || '').trim();
214222

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
1313
applicationName!: string;
1414
backendHost!: string;
1515
branded!: boolean;
16+
captchaPublicKey: string | null = null;
1617
homeUrl!: string;
1718
instanceEnvironmentType!: string;
1819
faviconImageUrl!: string;
@@ -65,6 +66,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
6566
this.afterSignOutAllUrl = data.after_sign_out_all_url;
6667
this.afterSwitchSessionUrl = data.after_switch_session_url;
6768
this.branded = data.branded;
69+
this.captchaPublicKey = data.captcha_public_key;
6870
this.supportEmail = data.support_email || '';
6971
this.clerkJSVersion = data.clerk_js_version;
7072
this.experimental__forceOauthFirst = data.experimental_force_oauth_first || false;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,10 @@ export class SignUp extends BaseResource implements SignUpResource {
6767

6868
create = async (params: SignUpCreateParams): Promise<SignUpResource> => {
6969
let captchaToken = '';
70-
const { canUseCaptcha } = SignUp.clerk;
70+
const { experimental_canUseCaptcha, experimental_captchaSiteKey } = SignUp.clerk;
7171

72-
if (canUseCaptcha) {
73-
captchaToken = await getCaptchaToken();
72+
if (experimental_canUseCaptcha && experimental_captchaSiteKey) {
73+
captchaToken = await getCaptchaToken(experimental_captchaSiteKey);
7474
}
7575

7676
return this._basePost({

‎packages/clerk-js/src/utils/captcha.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ declare global {
1414
}
1515

1616
const SCRIPT_URL = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
17-
const SITE_KEY = '0x4AAAAAAAFHxLeVBtmN8VhF';
17+
const WIDGET_CLASSNAME = 'clerk-captcha';
1818

1919
export async function loadCaptcha() {
2020
return new Promise(resolve => {
@@ -27,18 +27,18 @@ export async function loadCaptcha() {
2727
}).then(() => window.turnstile);
2828
}
2929

30-
export const getCaptchaToken = async () => {
30+
export const getCaptchaToken = async (captchaSiteKey: string) => {
3131
let captchaToken = '';
3232

3333
const div = document.createElement('div');
34-
div.classList.add('clerk-captcha');
34+
div.classList.add(WIDGET_CLASSNAME);
3535
document.body.appendChild(div);
3636
const captcha = await loadCaptcha();
3737

3838
const handleCaptchaTokenGeneration = (): Promise<string> => {
3939
return new Promise((resolve, reject) => {
40-
return captcha.execute('.clerk-captcha', {
41-
sitekey: SITE_KEY,
40+
return captcha.execute(`.${WIDGET_CLASSNAME}`, {
41+
sitekey: captchaSiteKey,
4242
retry: 'never',
4343
callback: function (token: string) {
4444
resolve(token);

‎packages/localizations/src/en-US.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -569,7 +569,7 @@ export const enUS: LocalizationResource = {
569569
},
570570
unstable__errors: {
571571
form_identifier_not_found: '',
572-
invalid_captcha:
572+
captcha_invalid:
573573
'Sign up unsuccessful due to failed security validations. Please refresh the page to try again or reach out to support for more assistance.',
574574
form_password_pwned:
575575
'This password has been found as part of a breach and can not be used, please try another password instead.',

‎packages/types/src/displayConfig.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export interface DisplayConfigJSON {
1313
after_switch_session_url: string;
1414
application_name: string;
1515
branded: boolean;
16+
captcha_public_key: string | null;
1617
home_url: string;
1718
instance_environment_type: string;
1819
/* @deprecated */
@@ -45,6 +46,7 @@ export interface DisplayConfigResource extends ClerkResource {
4546
applicationName: string;
4647
backendHost: string;
4748
branded: boolean;
49+
captchaPublicKey: string | null;
4850
homeUrl: string;
4951
instanceEnvironmentType: string;
5052
logoImageUrl: string;

‎packages/types/src/localization.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -605,7 +605,7 @@ type WithParamName<T> = T &
605605
Partial<Record<`${keyof T & string}__${CamelToSnake<Exclude<FieldId, 'role'>>}`, LocalizationValue>>;
606606
type UnstableErrors = WithParamName<{
607607
form_identifier_not_found: LocalizationValue;
608-
invalid_captcha: LocalizationValue;
608+
captcha_invalid: LocalizationValue;
609609
form_password_pwned: LocalizationValue;
610610
form_username_invalid_length: LocalizationValue;
611611
form_param_format_invalid: LocalizationValue;

0 commit comments

Comments
 (0)