Skip to content

Commit a94de32

Browse files
alexcarpenteralexcarpenter
authored
refactor(ui): Extract useEnabledConnections hook (clerk#3619)
1 parent 551eb62 commit a94de32

6 files changed

Lines changed: 26 additions & 37 deletions

File tree

‎.changeset/afraid-humans-notice.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎packages/ui/src/common/connections.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
1-
import { useClerk } from '@clerk/clerk-react';
21
import * as Common from '@clerk/elements/common';
3-
import type { EnvironmentResource } from '@clerk/types';
42

53
import { PROVIDERS } from '~/constants';
4+
import { useEnabledConnections } from '~/hooks/use-enabled-connections';
65
import * as Connection from '~/primitives/connection';
76
import * as Icon from '~/primitives/icon';
8-
import { getEnabledSocialConnectionsFromEnvironment } from '~/utils/getEnabledSocialConnectionsFromEnvironment';
97

108
export function Connections(props: { disabled?: boolean }) {
11-
const clerk = useClerk();
12-
const enabledConnections = getEnabledSocialConnectionsFromEnvironment(
13-
(clerk as any)?.__unstable__environment as EnvironmentResource,
14-
);
9+
const enabledConnections = useEnabledConnections();
1510
const hasConnection = enabledConnections.length > 0;
1611

1712
return hasConnection ? (

‎packages/ui/src/components/sign-in/sign-in.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useClerk } from '@clerk/clerk-react';
22
import * as Common from '@clerk/elements/common';
33
import * as SignIn from '@clerk/elements/sign-in';
4-
import type { EnvironmentResource } from '@clerk/types';
54

65
import { Connections } from '~/common/connections';
76
import { EmailField } from '~/common/email-field';
@@ -15,6 +14,7 @@ import { PhoneNumberOrUsernameField } from '~/common/phone-number-or-username-fi
1514
import { UsernameField } from '~/common/username-field';
1615
import { useAttributes } from '~/hooks/use-attributes';
1716
import { useDisplayConfig } from '~/hooks/use-display-config';
17+
import { useEnabledConnections } from '~/hooks/use-enabled-connections';
1818
import { useLocalizations } from '~/hooks/use-localizations';
1919
import { Alert } from '~/primitives/alert';
2020
import { Button } from '~/primitives/button';
@@ -23,7 +23,6 @@ import * as Icon from '~/primitives/icon';
2323
import { LinkButton } from '~/primitives/link-button';
2424
import { SecondaryButton } from '~/primitives/secondary-button';
2525
import { Seperator } from '~/primitives/seperator';
26-
import { getEnabledSocialConnectionsFromEnvironment } from '~/utils/getEnabledSocialConnectionsFromEnvironment';
2726

2827
export function SignInComponent() {
2928
return (
@@ -35,10 +34,8 @@ export function SignInComponent() {
3534

3635
export function SignInComponentLoaded() {
3736
const clerk = useClerk();
38-
const enabledConnections = getEnabledSocialConnectionsFromEnvironment(
39-
(clerk as any)?.__unstable__environment as EnvironmentResource,
40-
);
4137
const locationBasedCountryIso = (clerk as any)?.__internal_country;
38+
const enabledConnections = useEnabledConnections();
4239
const { t } = useLocalizations();
4340
const { enabled: usernameEnabled } = useAttributes('username');
4441
const { enabled: phoneNumberEnabled } = useAttributes('phone_number');

‎packages/ui/src/components/sign-up/sign-up.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useClerk } from '@clerk/clerk-react';
22
import * as Common from '@clerk/elements/common';
33
import * as SignUp from '@clerk/elements/sign-up';
4-
import type { EnvironmentResource } from '@clerk/types';
54

65
import { Connections } from '~/common/connections';
76
import { EmailField } from '~/common/email-field';
@@ -13,14 +12,14 @@ import { PhoneNumberField } from '~/common/phone-number-field';
1312
import { UsernameField } from '~/common/username-field';
1413
import { useAttributes } from '~/hooks/use-attributes';
1514
import { useDisplayConfig } from '~/hooks/use-display-config';
15+
import { useEnabledConnections } from '~/hooks/use-enabled-connections';
1616
import { useLocalizations } from '~/hooks/use-localizations';
1717
import { Alert } from '~/primitives/alert';
1818
import { Button } from '~/primitives/button';
1919
import * as Card from '~/primitives/card';
2020
import * as Icon from '~/primitives/icon';
2121
import { LinkButton } from '~/primitives/link-button';
2222
import { Seperator } from '~/primitives/seperator';
23-
import { getEnabledSocialConnectionsFromEnvironment } from '~/utils/getEnabledSocialConnectionsFromEnvironment';
2423

2524
export function SignUpComponent() {
2625
return (
@@ -32,10 +31,7 @@ export function SignUpComponent() {
3231

3332
function SignUpComponentLoaded() {
3433
const clerk = useClerk();
35-
// TODO: Replace `any` with proper types
36-
const enabledConnections = getEnabledSocialConnectionsFromEnvironment(
37-
(clerk as any)?.__unstable__environment as EnvironmentResource,
38-
);
34+
const enabledConnections = useEnabledConnections();
3935
const locationBasedCountryIso = (clerk as any)?.__internal_country;
4036
const { t } = useLocalizations();
4137
const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name');

‎packages/ui/src/hooks/use-enabled-connections.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { useClerk } from '@clerk/clerk-react';
2+
import { type EnvironmentResource, OAUTH_PROVIDERS, WEB3_PROVIDERS } from '@clerk/types';
3+
4+
export function useEnabledConnections() {
5+
const clerk = useClerk();
6+
7+
const { socialProviderStrategies, web3FirstFactors, authenticatableSocialStrategies } = (
8+
(clerk as any)?.__unstable__environment as EnvironmentResource
9+
).userSettings;
10+
11+
const enabledConnections = new Set([
12+
...socialProviderStrategies,
13+
...web3FirstFactors,
14+
...authenticatableSocialStrategies,
15+
]);
16+
17+
return [...OAUTH_PROVIDERS, ...WEB3_PROVIDERS].filter(provider => enabledConnections.has(provider.strategy));
18+
}

‎packages/ui/src/utils/getEnabledSocialConnectionsFromEnvironment.ts‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

0 commit comments

Comments
 (0)