Skip to content

Commit

Permalink
feat(types,clerk-js): List only authenticatable OAuth providers in Si…
Browse files Browse the repository at this point in the history
  • Loading branch information
chanioxaris committed Oct 14, 2022
1 parent 4e4c5a3 commit 4b3f1e6
Show file tree
Hide file tree
Showing 9 changed files with 32 additions and 17 deletions.
6 changes: 3 additions & 3 deletions packages/clerk-js/src/core/resources/UserSettings.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ describe('UserSettings', () => {
oauth_google: {
enabled: true,
required: false,
authenticatable: true,
authenticatable: false,
strategy: 'oauth_google',
},
oauth_gitlab: {
Expand Down Expand Up @@ -227,8 +227,8 @@ describe('UserSettings', () => {
},
} as any as UserSettingsJSON);

const res = sut.socialProviderStrategies;
expect(res).toEqual(['oauth_facebook', 'oauth_google']);
expect(sut.socialProviderStrategies).toEqual(['oauth_facebook', 'oauth_google']);
expect(sut.authenticatableSocialStrategies).toEqual(['oauth_facebook']);
});

it('returns enabled standard form attributes', function () {
Expand Down
13 changes: 13 additions & 0 deletions packages/clerk-js/src/core/resources/UserSettings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
signUp!: SignUpData;

socialProviderStrategies: OAuthStrategy[] = [];
authenticatableSocialStrategies: OAuthStrategy[] = [];
web3FirstFactors: Web3Strategy[] = [];
enabledFirstFactorIdentifiers: Array<keyof UserSettingsResource['attributes']> = [];

Expand All @@ -48,6 +49,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
this.signIn = data.sign_in;
this.signUp = data.sign_up;
this.socialProviderStrategies = this.getSocialProviderStrategies(data.social);
this.authenticatableSocialStrategies = this.getAuthenticatableSocialStrategies(data.social);
this.web3FirstFactors = this.getWeb3FirstFactors(data.attributes);
this.enabledFirstFactorIdentifiers = this.getEnabledFirstFactorIdentifiers(data.attributes);
return this;
Expand Down Expand Up @@ -84,4 +86,15 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
.map(([, desc]) => desc.strategy)
.sort();
}

private getAuthenticatableSocialStrategies(social: OAuthProviders): OAuthStrategy[] {
if (!social) {
return [];
}

return Object.entries(social)
.filter(([, desc]) => desc.enabled && desc.authenticatable)
.map(([, desc]) => desc.strategy)
.sort();
}
}
7 changes: 3 additions & 4 deletions packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ import {
withCardStateProvider,
} from '../../elements';
import { useCardState } from '../../elements/contexts';
import { useNavigate } from '../../hooks';
import { useLoadingStatus } from '../../hooks';
import { useLoadingStatus, useNavigate } from '../../hooks';
import { useSupportEmail } from '../../hooks/useSupportEmail';
import { buildRequest, FormControlState, handleError, isMobileDevice, useFormControl } from '../../utils';
import { SignInSocialButtons } from './SignInSocialButtons';
Expand All @@ -38,7 +37,7 @@ export function _SignInStart(): JSX.Element {

const standardFormAttributes = userSettings.enabledFirstFactorIdentifiers;
const web3FirstFactors = userSettings.web3FirstFactors;
const socialProviderStrategies = userSettings.socialProviderStrategies;
const authenticatableSocialStrategies = userSettings.authenticatableSocialStrategies;
const passwordBasedInstance = userSettings.instanceIsPasswordBased;
const identifierInputDisplayValues = getIdentifierControlDisplayValues(standardFormAttributes);

Expand Down Expand Up @@ -178,7 +177,7 @@ export function _SignInStart(): JSX.Element {
return <LoadingCard />;
}

const hasSocialOrWeb3Buttons = !!socialProviderStrategies.length || !!web3FirstFactors.length;
const hasSocialOrWeb3Buttons = !!authenticatableSocialStrategies.length || !!web3FirstFactors.length;
const shouldAutofocus = !isMobileDevice() && hasSocialOrWeb3Buttons;

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ function _SignUpContinue() {
});
minimizeFieldsForExistingSignup(fields, signUp);

const oauthOptions = userSettings.socialProviderStrategies;
const oauthOptions = userSettings.authenticatableSocialStrategies;
const web3Options = userSettings.web3FirstFactors;

const handleChangeActive = (type: ActiveIdentifier) => {
Expand Down
5 changes: 2 additions & 3 deletions packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ import {
withCardStateProvider,
} from '../../elements';
import { useCardState } from '../../elements/contexts';
import { useNavigate } from '../../hooks';
import { useLoadingStatus } from '../../hooks';
import { useLoadingStatus, useNavigate } from '../../hooks';
import { buildRequest, FormControlState, handleError, useFormControl } from '../../utils';
import { SignUpForm } from './SignUpForm';
import {
Expand Down Expand Up @@ -222,7 +221,7 @@ function _SignUpStart(): JSX.Element {
const shouldShowForm = showFormFields(userSettings) && visibleFields.length > 0;

const showOauthProviders =
(!hasTicket || missingRequirementsWithTicket) && userSettings.socialProviderStrategies.length > 0;
(!hasTicket || missingRequirementsWithTicket) && userSettings.authenticatableSocialStrategies.length > 0;
const showWeb3Providers = !hasTicket && userSettings.web3FirstFactors.length > 0;

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -109,9 +109,9 @@ export const getInitialActiveIdentifier = (attributes: Attributes, isProgressive
};

export function showFormFields(userSettings: UserSettingsResource): boolean {
const { socialProviderStrategies, web3FirstFactors } = userSettings;
const { authenticatableSocialStrategies, web3FirstFactors } = userSettings;

return userSettings.hasValidAuthFactor || (!socialProviderStrategies.length && !web3FirstFactors.length);
return userSettings.hasValidAuthFactor || (!authenticatableSocialStrategies.length && !web3FirstFactors.length);
}

export function emailOrPhone(attributes: Attributes, isProgressiveSignUp: boolean) {
Expand Down
7 changes: 5 additions & 2 deletions packages/clerk-js/src/ui/elements/SocialButtons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,14 @@ const isWeb3Strategy = (val: string): val is Web3Strategy => {

export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
const { oauthCallback, web3Callback, enableOAuthProviders = true, enableWeb3Providers = true } = props;
const { web3Strategies, oauthStrategies, strategyToDisplayData } = useEnabledThirdPartyProviders();
const { web3Strategies, authenticatableOauthStrategies, strategyToDisplayData } = useEnabledThirdPartyProviders();
const card = useCardState();
const { socialButtonsVariant } = useAppearance().parsedLayout;

const strategies = [...(enableOAuthProviders ? oauthStrategies : []), ...(enableWeb3Providers ? web3Strategies : [])];
const strategies = [
...(enableOAuthProviders ? authenticatableOauthStrategies : []),
...(enableWeb3Providers ? web3Strategies : []),
];

if (!strategies.length) {
return null;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@ const strategyToDisplayData: ThirdPartyStrategyToDataMap = fromEntries(
) as ThirdPartyStrategyToDataMap;

export const useEnabledThirdPartyProviders = () => {
const { socialProviderStrategies, web3FirstFactors } = useEnvironment().userSettings;
const { socialProviderStrategies, web3FirstFactors, authenticatableSocialStrategies } = useEnvironment().userSettings;
return {
strategies: [...socialProviderStrategies, ...web3FirstFactors],
web3Strategies: [...web3FirstFactors],
oauthStrategies: [...socialProviderStrategies],
authenticatableOauthStrategies: [...authenticatableSocialStrategies],
strategyToDisplayData,
providerToDisplayData,
};
Expand Down
1 change: 1 addition & 0 deletions packages/types/src/userSettings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export interface UserSettingsResource extends ClerkResource {
signIn: SignInData;
signUp: SignUpData;
socialProviderStrategies: OAuthStrategy[];
authenticatableSocialStrategies: OAuthStrategy[];
web3FirstFactors: Web3Strategy[];
enabledFirstFactorIdentifiers: Attribute[];
instanceIsPasswordBased: boolean;
Expand Down

0 comments on commit 4b3f1e6

Please sign in to comment.