diff --git a/.changeset/plenty-kangaroos-swim.md b/.changeset/plenty-kangaroos-swim.md new file mode 100644 index 00000000000..5c5382de140 --- /dev/null +++ b/.changeset/plenty-kangaroos-swim.md @@ -0,0 +1,5 @@ +--- +"@clerk/elements": patch +--- + +Fix isWeb3Strategy check to account for prefix and suffix diff --git a/packages/elements/src/react/hooks/use-third-party-provider.hook.ts b/packages/elements/src/react/hooks/use-third-party-provider.hook.ts index 3b4bb7c0483..0dc95d024e4 100644 --- a/packages/elements/src/react/hooks/use-third-party-provider.hook.ts +++ b/packages/elements/src/react/hooks/use-third-party-provider.hook.ts @@ -11,6 +11,7 @@ import type { UseThirdPartyProviderReturn } from '~/react/common/connections'; import { getEnabledThirdPartyProviders, isAuthenticatableOauthStrategy, + isWeb3Strategy, providerToDisplayData, } from '~/utils/third-party-strategies'; @@ -24,7 +25,10 @@ const useIsProviderEnabled = (provider: OAuthProvider | Web3Provider): boolean | const data = getEnabledThirdPartyProviders(clerk.__unstable__environment); - return isAuthenticatableOauthStrategy(provider, data.authenticatableOauthStrategies); + return ( + isAuthenticatableOauthStrategy(provider, data.authenticatableOauthStrategies) || + isWeb3Strategy(provider, data.web3Strategies) + ); }; export const useThirdPartyProvider = < diff --git a/packages/elements/src/utils/third-party-strategies.ts b/packages/elements/src/utils/third-party-strategies.ts index 1c8beff7aea..b559b63f1a2 100644 --- a/packages/elements/src/utils/third-party-strategies.ts +++ b/packages/elements/src/utils/third-party-strategies.ts @@ -51,7 +51,7 @@ export function isWeb3Strategy( strategy: any, available: EnabledThirdPartyProviders['web3Strategies'], ): strategy is Web3Strategy { - return available.includes(strategy); + return available.includes(strategy.startsWith('web3_') ? strategy : `web3_${strategy}_signature`); } export function isAuthenticatableOauthStrategy(