Add name logic to getProviderLogo

Author: ohansFavour

lib/ts/recipe/thirdparty/components/themes/signInAndUp/providersForm.tsx

@@ -69,7 +69,7 @@ export const ThirdPartySignInAndUpProvidersForm: React.FC<SignInAndUpThemeProps>
                 return (
                     <div key={`provider-${provider.id}`} data-supertokens="providerContainer">
                         <span onClick={() => signInClick(provider.id)}>
-                            {provider.getButton(undefined, getProviderLogo(provider.id))}
+                            {provider.getButton(undefined, getProviderLogo(provider.id, provider.name))}
                         </span>
                     </div>
                 );

lib/ts/recipe/thirdparty/constants.ts

@@ -1,14 +1,23 @@
 import ActiveDirectoryLogo from "../../components/assets/logos/activeDirectory";
 import AppleLogo from "../../components/assets/logos/apple";
+import Auth0Logo from "../../components/assets/logos/auth0";
 import BitbucketLogo from "../../components/assets/logos/bitbucket";
 import DiscordLogo from "../../components/assets/logos/discord";
 import FacebookLogo from "../../components/assets/logos/facebook";
 import GithubLogo from "../../components/assets/logos/github";
 import GitlabLogo from "../../components/assets/logos/gitlab";
 import GoogleLogo from "../../components/assets/logos/google";
 import GoogleWorkspacesLogo from "../../components/assets/logos/googleWorkspaces";
+import JumpCloudLogo from "../../components/assets/logos/jumpCloud";
 import LinkedInLogo from "../../components/assets/logos/linkedin";
+import MicrosoftADFSLogo from "../../components/assets/logos/microsoftADFS";
+import MicrosoftEntraIdLogo from "../../components/assets/logos/microsoftEntraId";
 import OktaLogo from "../../components/assets/logos/okta";
+import OneLoginLogo from "../../components/assets/logos/oneLogin";
+import OpenIdLogo from "../../components/assets/logos/openId";
+import PingOneLogo from "../../components/assets/logos/pingOne";
+import RipplingLogo from "../../components/assets/logos/rippling";
+import GenericSamlLogo from "../../components/assets/logos/saml";
 
 export const providerLogoMap = {
     "active-directory": ActiveDirectoryLogo,
@@ -24,6 +33,36 @@ export const providerLogoMap = {
     "google-workspaces": GoogleWorkspacesLogo,
 } as const;
 
-export const getProviderLogo = (providerId: string): JSX.Element | undefined => {
+function getBoxySamlLogo(name?: string) {
+    switch (name) {
+        case "microsoft entra id":
+            return MicrosoftEntraIdLogo;
+        case "microsoft ad fs":
+            return MicrosoftADFSLogo;
+        case "okta":
+            return OktaLogo;
+        case "auth0":
+            return Auth0Logo;
+        case "google":
+            return GoogleLogo;
+        case "oneLogin":
+            return OneLoginLogo;
+        case "pingone":
+            return PingOneLogo;
+        case "jumpcloud":
+            return JumpCloudLogo;
+        case "rippling":
+            return RipplingLogo;
+        case "openId":
+            return OpenIdLogo;
+        default:
+            return GenericSamlLogo;
+    }
+}
+
+export const getProviderLogo = (providerId: string, providerName?: string): JSX.Element | undefined => {
+    if (providerId === "boxy-saml") {
+        return getBoxySamlLogo(providerName);
+    }
     return providerId in providerLogoMap ? providerLogoMap[providerId as keyof typeof providerLogoMap] : undefined;
 };

lib/ts/recipe/thirdparty/types.ts

@@ -103,7 +103,7 @@ export type OnHandleEventContext =
       };
 
 export type SignInAndUpThemeProps = PartialAuthComponentProps & {
-    providers: Pick<Provider, "id" | "getButton">[];
+    providers: Pick<Provider, "id" | "getButton" | "name">[];
     recipeImplementation: WebJSRecipeInterface<typeof ThirdPartyWebJS>;
     config: NormalisedConfig;
 };

lib/ts/recipe/thirdparty/utils.ts

@@ -223,7 +223,10 @@ export const mergeProviders = ({
                     ...provider.config,
                     id: tenantProvider.id,
                     name: tenantProvider.name,
-                    buttonComponent: provider.getButton(tenantProvider.name, getProviderLogo(tenantProvider.id)),
+                    buttonComponent: provider.getButton(
+                        tenantProvider.name,
+                        getProviderLogo(tenantProvider.id, tenantProvider.name)
+                    ),
                 })
             );
         } else {