feat(clerk-js): Allow Environment init with defaults (#5287)

Co-authored-by: Lennart <lekoarts@gmail.com>

Author: jacekradko

.changeset/dirty-lizards-count.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Improve the resilience of the SDK against situations where the /v1/environment endpoint is not reachable. This is achieved by allowing the initialization of the environment with default values.

integration/tests/reverification.test.ts

@@ -160,7 +160,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withReverification] })(
         fictionalEmail: true,
         withPhoneNumber: true,
       });
-      const bapiFakeUser = await u.services.users.createBapiUser({
+      await u.services.users.createBapiUser({
         ...delFakeUser,
         username: undefined,
         phoneNumber: undefined,

packages/clerk-js/bundlewatch.config.json

@@ -1,7 +1,7 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "577kB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "78kB" },
+    { "path": "./dist/clerk.js", "maxSize": "577.5kB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "78.5kB" },
     { "path": "./dist/clerk.headless.js", "maxSize": "51KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "94KB" },
     { "path": "./dist/vendors*.js", "maxSize": "30KB" },
@@ -12,7 +12,7 @@
     { "path": "./dist/organizationswitcher*.js", "maxSize": "5KB" },
     { "path": "./dist/organizationlist*.js", "maxSize": "5.5KB" },
     { "path": "./dist/signin*.js", "maxSize": "12.4KB" },
-    { "path": "./dist/signup*.js", "maxSize": "6.5KB" },
+    { "path": "./dist/signup*.js", "maxSize": "6.55KB" },
     { "path": "./dist/userbutton*.js", "maxSize": "5KB" },
     { "path": "./dist/userprofile*.js", "maxSize": "15KB" },
     { "path": "./dist/userverification*.js", "maxSize": "5KB" },

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

@@ -326,9 +326,6 @@ export class Clerk implements ClerkInterface {
   public constructor(key: string, options?: DomainOrProxyUrl) {
     key = (key || '').trim();
 
-    this.#domain = options?.domain;
-    this.#proxyUrl = options?.proxyUrl;
-
     if (!key) {
       return errorThrower.throwMissingPublishableKeyError();
     }
@@ -339,8 +336,11 @@ export class Clerk implements ClerkInterface {
       return errorThrower.throwInvalidPublishableKeyError({ key });
     }
 
-    this.#publishableKey = key;
+    this.#domain = options?.domain;
+    this.#proxyUrl = options?.proxyUrl;
+    this.environment = Environment.getInstance();
     this.#instanceType = publishableKey.instanceType;
+    this.#publishableKey = key;
 
     this.#fapiClient = createFapiClient({
       domain: this.domain,
@@ -2085,16 +2085,20 @@ export class Clerk implements ClerkInterface {
           }
         };
 
-        await Promise.all([initEnvironmentPromise, initClient()]).catch(async e => {
-          // limit the changes for this specific error for now
+        const [envResult, clientResult] = await Promise.allSettled([initEnvironmentPromise, initClient()]);
+        if (clientResult.status === 'rejected') {
+          const e = clientResult.reason;
+
           if (isClerkAPIResponseError(e) && e.errors[0].code === 'requires_captcha') {
-            await initEnvironmentPromise;
+            if (envResult.status === 'rejected') {
+              await initEnvironmentPromise;
+            }
             initComponents();
             await initClient();
           } else {
             throw e;
           }
-        });
+        }
 
         this.#authService?.setClientUatCookieForDevelopmentInstances();
 

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

@@ -4,29 +4,33 @@ import { unixEpochToDate } from '../../utils/date';
 import { BaseResource } from './internal';
 
 export class AuthConfig extends BaseResource implements AuthConfigResource {
-  singleSessionMode!: boolean;
   claimedAt: Date | null = null;
-  reverification!: boolean;
+  reverification: boolean = false;
+  singleSessionMode: boolean = false;
 
-  public constructor(data: AuthConfigJSON) {
+  public constructor(data: Partial<AuthConfigJSON> | null = null) {
     super();
+
     this.fromJSON(data);
   }
 
-  protected fromJSON(data: AuthConfigJSON | null): this {
-    this.singleSessionMode = data ? data.single_session_mode : true;
-    this.claimedAt = data?.claimed_at ? unixEpochToDate(data.claimed_at) : null;
-    this.reverification = data ? data.reverification : true;
+  protected fromJSON(data: Partial<AuthConfigJSON> | null): this {
+    if (!data) {
+      return this;
+    }
+    this.claimedAt = this.withDefault(data.claimed_at ? unixEpochToDate(data.claimed_at) : null, this.claimedAt);
+    this.reverification = this.withDefault(data.reverification, this.reverification);
+    this.singleSessionMode = this.withDefault(data.single_session_mode, this.singleSessionMode);
     return this;
   }
 
   public __internal_toSnapshot(): AuthConfigJSONSnapshot {
     return {
-      object: 'auth_config',
-      id: this.id || '',
-      single_session_mode: this.singleSessionMode,
       claimed_at: this.claimedAt ? this.claimedAt.getTime() : null,
+      id: this.id ?? '',
+      object: 'auth_config',
       reverification: this.reverification,
+      single_session_mode: this.singleSessionMode,
     };
   }
 }

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

@@ -166,6 +166,18 @@ export abstract class BaseResource {
 
   protected abstract fromJSON(data: ClerkResourceJSON | null): this;
 
+  /**
+   * Returns the provided value if it is not `undefined` or `null`, otherwise returns the default value.
+   *
+   * @template T - The type of the value.
+   * @param value - The value to check.
+   * @param defaultValue - The default value to return if the provided value is `undefined` or `null`.
+   * @returns The provided value if it is not `undefined` or `null`, otherwise the default value.
+   */
+  protected withDefault<T>(value: T | undefined | null, defaultValue: T): T {
+    return value ?? defaultValue;
+  }
+
   protected async _baseGet<J extends ClerkResourceJSON | null>(opts: BaseFetchOptions = {}): Promise<this> {
     const json = await BaseResource._fetch<J>(
       {

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

@@ -10,9 +10,11 @@ import { BaseResource } from './internal';
  * @internal
  */
 export class __experimental_CommerceSettings extends BaseResource implements __experimental_CommerceSettingsResource {
-  stripePublishableKey!: string;
+  stripePublishableKey: string = '';
 
-  public constructor(data: __experimental_CommerceSettingsJSON | __experimental_CommerceSettingsJSONSnapshot) {
+  public constructor(
+    data: __experimental_CommerceSettingsJSON | __experimental_CommerceSettingsJSONSnapshot | null = null,
+  ) {
     super();
     this.fromJSON(data);
   }