fix(ui): hide social signin method if connectors are empty (#909)

hide social signin method if connectors are empty

packages/ui/src/hooks/use-social.ts

@@ -15,7 +15,6 @@ import {
   decodeState,
   stateValidation,
   storeState,
-  filterSocialConnectors,
 } from './utils';
 
 const useSocial = () => {
@@ -40,11 +39,6 @@ const useSocial = () => {
     [navigate, parameters.connector]
   );
 
-  const socialConnectors = useMemo(
-    () => filterSocialConnectors(experienceSettings?.socialConnectors),
-    [experienceSettings]
-  );
-
   const { run: asyncInvokeSocialSignIn } = useApi(invokeSocialSignIn);
 
   const { run: asyncSignInWithSocial } = useApi(signInWithSocial, signInWithSocialErrorHandlers);
@@ -187,7 +181,7 @@ const useSocial = () => {
   }, [setToast]);
 
   return {
-    socialConnectors,
+    socialConnectors: experienceSettings?.socialConnectors ?? [],
     invokeSocialSignIn: invokeSocialSignInHandler,
     socialCallbackHandler,
   };

packages/ui/src/pages/SignIn/index.tsx

@@ -25,10 +25,14 @@ const SignIn = () => {
         headline={style === BrandingStyle.Logo_Slogan ? slogan : undefined}
         logo={logo}
       />
-      <PrimarySection signInMethod={experienceSettings.primarySignInMethod} />
+      <PrimarySection
+        signInMethod={experienceSettings.primarySignInMethod}
+        socialConnectors={experienceSettings.socialConnectors}
+      />
       <SecondarySection
         primarySignInMethod={experienceSettings.primarySignInMethod}
         secondarySignInMethods={experienceSettings.secondarySignInMethods}
+        socialConnectors={experienceSettings.socialConnectors}
       />
       <CreateAccountLink primarySignInMethod={experienceSettings.primarySignInMethod} />
     </div>

packages/ui/src/pages/SignIn/registry.tsx

@@ -7,11 +7,17 @@ import SignInMethodsLink from '@/containers/SignInMethodsLink';
 import { PrimarySocialSignIn, SecondarySocialSignIn } from '@/containers/SocialSignIn';
 import TermsOfUse from '@/containers/TermsOfUse';
 import UsernameSignin from '@/containers/UsernameSignin';
-import { SignInMethod, LocalSignInMethod } from '@/types';
+import { SignInMethod, LocalSignInMethod, ConnectorData } from '@/types';
 
 import * as styles from './index.module.scss';
 
-export const PrimarySection = ({ signInMethod }: { signInMethod?: SignInMethod }) => {
+export const PrimarySection = ({
+  signInMethod,
+  socialConnectors = [],
+}: {
+  signInMethod?: SignInMethod;
+  socialConnectors?: ConnectorData[];
+}) => {
   switch (signInMethod) {
     case 'email':
       return <EmailPasswordless type="sign-in" className={styles.primarySignIn} />;
@@ -20,12 +26,12 @@ export const PrimarySection = ({ signInMethod }: { signInMethod?: SignInMethod }
     case 'username':
       return <UsernameSignin className={styles.primarySignIn} />;
     case 'social':
-      return (
+      return socialConnectors.length > 0 ? (
         <>
           <TermsOfUse className={styles.terms} />
           <PrimarySocialSignIn className={styles.primarySocial} />
         </>
-      );
+      ) : null;
     default:
       return null;
   }
@@ -34,9 +40,11 @@ export const PrimarySection = ({ signInMethod }: { signInMethod?: SignInMethod }
 export const SecondarySection = ({
   primarySignInMethod,
   secondarySignInMethods,
+  socialConnectors = [],
 }: {
   primarySignInMethod?: SignInMethod;
   secondarySignInMethods?: SignInMethod[];
+  socialConnectors?: ConnectorData[];
 }) => {
   if (!primarySignInMethod || !secondarySignInMethods?.length) {
     return null;
@@ -49,7 +57,9 @@ export const SecondarySection = ({
   if (primarySignInMethod === 'social' && localMethods.length > 0) {
     return (
       <>
-        <Divider label="description.continue_with" className={styles.divider} />
+        {socialConnectors.length > 0 && (
+          <Divider label="description.continue_with" className={styles.divider} />
+        )}
         <SignInMethodsLink signInMethods={localMethods} />
       </>
     );
@@ -62,7 +72,7 @@ export const SecondarySection = ({
         template="sign_in_with"
         className={styles.otherMethodsLink}
       />
-      {secondarySignInMethods.includes('social') && (
+      {secondarySignInMethods.includes('social') && socialConnectors.length > 0 && (
         <>
           <Divider label="description.or" className={styles.divider} />
           <SecondarySocialSignIn />

packages/ui/src/utils/sign-in-experience.ts

@@ -6,6 +6,7 @@
 import { SignInMethods } from '@logto/schemas';
 
 import { getSignInExperience } from '@/apis/settings';
+import { filterSocialConnectors } from '@/hooks/utils';
 import { SignInMethod, SignInExperienceSettingsResponse, SignInExperienceSettings } from '@/types';
 
 const getPrimarySignInMethod = (signInMethods: SignInMethods) => {
@@ -29,11 +30,13 @@ const getSecondarySignInMethods = (signInMethods: SignInMethods) =>
 
 export const parseSignInExperienceSettings = ({
   signInMethods,
+  socialConnectors,
   ...rest
 }: SignInExperienceSettingsResponse) => ({
   ...rest,
   primarySignInMethod: getPrimarySignInMethod(signInMethods),
   secondarySignInMethods: getSecondarySignInMethods(signInMethods),
+  socialConnectors: filterSocialConnectors(socialConnectors),
 });
 
 const getSignInExperienceSettings = async (): Promise<SignInExperienceSettings> => {