diff --git a/.changeset/harden-social-provider-strategies.md b/.changeset/harden-social-provider-strategies.md new file mode 100644 index 00000000000..e9a3e7240f7 --- /dev/null +++ b/.changeset/harden-social-provider-strategies.md @@ -0,0 +1,6 @@ +--- +"@clerk/clerk-js": patch +"@clerk/ui": patch +--- + +Guard against empty social provider strategies from FAPI to prevent crashes in `useEnabledThirdPartyProviders` diff --git a/packages/clerk-js/src/core/resources/UserSettings.ts b/packages/clerk-js/src/core/resources/UserSettings.ts index 93078997ebc..9b401a3b0b6 100644 --- a/packages/clerk-js/src/core/resources/UserSettings.ts +++ b/packages/clerk-js/src/core/resources/UserSettings.ts @@ -136,7 +136,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource { } return Object.entries(this.social) - .filter(([, desc]) => desc.enabled && desc.authenticatable) + .filter(([, desc]) => desc.enabled && desc.authenticatable && desc.strategy) .map(([, desc]) => desc.strategy) .sort(); } @@ -157,7 +157,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource { } return Object.entries(this.social) - .filter(([, desc]) => desc.enabled) + .filter(([, desc]) => desc.enabled && desc.strategy) .map(([, desc]) => desc.strategy) .sort(); } diff --git a/packages/ui/src/hooks/useEnabledThirdPartyProviders.tsx b/packages/ui/src/hooks/useEnabledThirdPartyProviders.tsx index 3694a6cba88..666cef4b1e3 100644 --- a/packages/ui/src/hooks/useEnabledThirdPartyProviders.tsx +++ b/packages/ui/src/hooks/useEnabledThirdPartyProviders.tsx @@ -81,6 +81,7 @@ export const useEnabledThirdPartyProviders = () => { ); allCustomOAuthProviders.forEach(s => { + if (!social[s]) return; const providerName = s.replace('oauth_', '') as OAuthProvider; providerToDisplayData[providerName] = { strategy: s, @@ -90,6 +91,7 @@ export const useEnabledThirdPartyProviders = () => { }); activeCustomSocialStrategies.forEach(s => { + if (!social[s]) return; const providerId = s.replace('oauth_', '') as OAuthProvider; strategyToDisplayData[s] = { id: providerId,