Check if email addresses are enabled

Author: LauraBeatris

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

@@ -13,6 +13,7 @@ import {
 import {
   disabledAllAPIKeysFeatures,
   disabledAllBillingFeatures,
+  disabledEmailAddressAttribute,
   disabledOrganizationAPIKeysFeature,
   disabledOrganizationsFeature,
   disabledSelfServeSSOFeature,
@@ -59,6 +60,7 @@ import type {
   __internal_AttemptToEnableEnvironmentSettingResult,
   __internal_CheckoutProps,
   __internal_EnableOrganizationsPromptProps,
+  __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
   __internal_UserVerificationModalProps,
@@ -96,7 +98,6 @@ import type {
   LoadedClerk,
   NavigateOptions,
   OAuthApplicationNamespace,
-  __internal_OAuthConsentProps,
   OrganizationListProps,
   OrganizationProfileProps,
   OrganizationResource,
@@ -211,6 +212,8 @@ const CANNOT_RENDER_API_KEYS_DISABLED_ERROR_CODE = 'cannot_render_api_keys_disab
 const CANNOT_RENDER_API_KEYS_USER_DISABLED_ERROR_CODE = 'cannot_render_api_keys_user_disabled';
 const CANNOT_RENDER_API_KEYS_ORG_DISABLED_ERROR_CODE = 'cannot_render_api_keys_org_disabled';
 const CANNOT_RENDER_SELF_SERVE_SSO_DISABLED_ERROR_CODE = 'cannot_render_self_serve_sso_disabled';
+const CANNOT_RENDER_CONFIGURE_SSO_EMAIL_ADDRESS_DISABLED_ERROR_CODE =
+  'cannot_render_configure_sso_email_address_disabled';
 const defaultOptions: ClerkOptions = {
   polling: true,
   standardBrowser: true,
@@ -1469,6 +1472,15 @@ export class Clerk implements ClerkInterface {
       return;
     }
 
+    if (disabledEmailAddressAttribute(this, this.environment)) {
+      if (this.#instanceType === 'development') {
+        throw new ClerkRuntimeError(warnings.cannotRenderConfigureSSOComponentWhenEmailAddressDisabled, {
+          code: CANNOT_RENDER_CONFIGURE_SSO_EMAIL_ADDRESS_DISABLED_ERROR_CODE,
+        });
+      }
+      return;
+    }
+
     this.assertComponentsReady(this.#clerkUI);
     const component = 'ConfigureSSO';
     void this.#clerkUI

packages/shared/src/internal/clerk-js/componentGuards.ts

@@ -49,3 +49,7 @@ export const disabledAllAPIKeysFeatures: ComponentGuard = (_, environment) => {
 export const disabledSelfServeSSOFeature: ComponentGuard = (_, environment) => {
   return !environment?.userSettings.enterpriseSSO.self_serve_sso;
 };
+
+export const disabledEmailAddressAttribute: ComponentGuard = (_, environment) => {
+  return !environment?.userSettings.attributes.email_address?.enabled;
+};

packages/shared/src/internal/clerk-js/warnings.ts

@@ -66,6 +66,8 @@ const warnings = {
     '<OAuthConsent/> cannot render unless a user is signed in. Since no user is signed in, this is no-op.',
   cannotRenderConfigureSSOComponentWhenDisabled:
     'The <ConfigureSSO/> component cannot be rendered when self-serve SSO is disabled. Visit `https://dashboard.clerk.com` to enable the feature. Since self-serve SSO is disabled, this is no-op.',
+  cannotRenderConfigureSSOComponentWhenEmailAddressDisabled:
+    'The <ConfigureSSO/> component cannot be rendered when email addresses are disabled on the instance. Visit `https://dashboard.clerk.com` to enable email addresses. Since email addresses are disabled, this is no-op.',
 };
 
 type SerializableWarnings = Serializable<typeof warnings>;