{props.providers.map((provider) => {
return (
- signInClick(provider.id)}>{provider.getButton()}
+ signInClick(provider.id)}>
+ {provider.getButton(undefined, getProviderLogo(provider.id, provider.name))}
+
);
})}
diff --git a/lib/ts/recipe/thirdparty/constants.ts b/lib/ts/recipe/thirdparty/constants.ts
new file mode 100644
index 000000000..1859ef413
--- /dev/null
+++ b/lib/ts/recipe/thirdparty/constants.ts
@@ -0,0 +1,68 @@
+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,
+ apple: AppleLogo,
+ bitbucket: BitbucketLogo,
+ discord: DiscordLogo,
+ facebook: FacebookLogo,
+ github: GithubLogo,
+ gitlab: GitlabLogo,
+ linkedin: LinkedInLogo,
+ okta: OktaLogo,
+ google: GoogleLogo,
+ "google-workspaces": GoogleWorkspacesLogo,
+} as const;
+
+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;
+};
diff --git a/lib/ts/recipe/thirdparty/constants.tsx b/lib/ts/recipe/thirdparty/constants.tsx
deleted file mode 100644
index b1a065ab1..000000000
--- a/lib/ts/recipe/thirdparty/constants.tsx
+++ /dev/null
@@ -1,370 +0,0 @@
-export const oktaLogo = (
-
-);
-
-export const googleLogo = (
-
-);
-
-export const genericSAMLLogo = (
-
-);
-
-export const microsoftEntraIdLogo = (
-
-);
-
-export const microsoftADFSLogo = (
-
-);
-
-export const auth0Logo = (
-
-);
-
-export const oneLoginLogo = (
-
-);
-
-export const pingOneLogo = (
-
-);
-
-export const jumpCloudLogo = (
-
-);
-
-export const ripplingLogo = (
-
-);
-
-export const openIdLogo = (
-
-);
diff --git a/lib/ts/recipe/thirdparty/providers/activeDirectory.tsx b/lib/ts/recipe/thirdparty/providers/activeDirectory.tsx
index d884a3dfc..c0d927386 100644
--- a/lib/ts/recipe/thirdparty/providers/activeDirectory.tsx
+++ b/lib/ts/recipe/thirdparty/providers/activeDirectory.tsx
@@ -41,35 +41,9 @@ export default class ActiveDirectory extends Provider {
});
}
- getLogo = (): JSX.Element => {
- return (
-
- );
- };
+ getLogo(): undefined {
+ return undefined;
+ }
/*
* Static Methods
diff --git a/lib/ts/recipe/thirdparty/providers/apple.tsx b/lib/ts/recipe/thirdparty/providers/apple.tsx
index 6d10a507f..67751c780 100644
--- a/lib/ts/recipe/thirdparty/providers/apple.tsx
+++ b/lib/ts/recipe/thirdparty/providers/apple.tsx
@@ -44,55 +44,9 @@ export default class Apple extends Provider {
});
}
- getLogo = (): JSX.Element => {
- return (
-
- );
- };
+ getLogo(): undefined {
+ return undefined;
+ }
getRedirectURIOnProviderDashboard(): string | undefined {
const domain = SuperTokens.getInstanceOrThrow().appInfo.apiDomain.getAsStringDangerous();
diff --git a/lib/ts/recipe/thirdparty/providers/bitbucket.tsx b/lib/ts/recipe/thirdparty/providers/bitbucket.tsx
index 9d90f25af..bc9015872 100644
--- a/lib/ts/recipe/thirdparty/providers/bitbucket.tsx
+++ b/lib/ts/recipe/thirdparty/providers/bitbucket.tsx
@@ -41,32 +41,9 @@ export default class Bitbucket extends Provider {
});
}
- getLogo = (): JSX.Element => {
- return (
-
- );
- };
+ getLogo(): undefined {
+ return undefined;
+ }
/*
* Static Methods
diff --git a/lib/ts/recipe/thirdparty/providers/boxySaml.tsx b/lib/ts/recipe/thirdparty/providers/boxySaml.tsx
index a03ad2efe..2d1f3e0b2 100644
--- a/lib/ts/recipe/thirdparty/providers/boxySaml.tsx
+++ b/lib/ts/recipe/thirdparty/providers/boxySaml.tsx
@@ -16,19 +16,6 @@
* Imports.
*/
import { isTest } from "../../../utils";
-import {
- auth0Logo,
- genericSAMLLogo,
- googleLogo,
- jumpCloudLogo,
- microsoftADFSLogo,
- microsoftEntraIdLogo,
- oktaLogo,
- oneLoginLogo,
- openIdLogo,
- pingOneLogo,
- ripplingLogo,
-} from "../constants";
import type { BuiltInProviderConfig } from "./types";
@@ -54,42 +41,8 @@ export default class BoxySAML extends Provider {
});
}
- getLogo = (): JSX.Element => {
- switch (this.name.toLowerCase()) {
- 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;
- }
- }
+ getLogo = (): undefined => {
+ return undefined;
};
/*
diff --git a/lib/ts/recipe/thirdparty/providers/discord.tsx b/lib/ts/recipe/thirdparty/providers/discord.tsx
index 8f95cfa64..74e66f765 100644
--- a/lib/ts/recipe/thirdparty/providers/discord.tsx
+++ b/lib/ts/recipe/thirdparty/providers/discord.tsx
@@ -41,22 +41,8 @@ export default class Discord extends Provider {
});
}
- getLogo = (): JSX.Element => {
- return (
-
- );
+ getLogo = (): undefined => {
+ return undefined;
};
/*
diff --git a/lib/ts/recipe/thirdparty/providers/facebook.tsx b/lib/ts/recipe/thirdparty/providers/facebook.tsx
index 24340cae0..77c0f988d 100644
--- a/lib/ts/recipe/thirdparty/providers/facebook.tsx
+++ b/lib/ts/recipe/thirdparty/providers/facebook.tsx
@@ -41,12 +41,8 @@ export default class Facebook extends Provider {
});
}
- getLogo = (): JSX.Element => {
- return (
-
- );
+ getLogo = (): undefined => {
+ return undefined;
};
/*
diff --git a/lib/ts/recipe/thirdparty/providers/github.tsx b/lib/ts/recipe/thirdparty/providers/github.tsx
index 618c8a6c2..02c4487cc 100644
--- a/lib/ts/recipe/thirdparty/providers/github.tsx
+++ b/lib/ts/recipe/thirdparty/providers/github.tsx
@@ -41,17 +41,8 @@ export default class Github extends Provider {
});
}
- getLogo = (): JSX.Element => {
- return (
-
- );
+ getLogo = (): undefined => {
+ return undefined;
};
/*
diff --git a/lib/ts/recipe/thirdparty/providers/gitlab.tsx b/lib/ts/recipe/thirdparty/providers/gitlab.tsx
index 5054c23ca..8103a7eea 100644
--- a/lib/ts/recipe/thirdparty/providers/gitlab.tsx
+++ b/lib/ts/recipe/thirdparty/providers/gitlab.tsx
@@ -41,27 +41,8 @@ export default class Gitlab extends Provider {
});
}
- getLogo = (): JSX.Element => {
- return (
-
- );
+ getLogo = (): undefined => {
+ return undefined;
};
/*
diff --git a/lib/ts/recipe/thirdparty/providers/google.tsx b/lib/ts/recipe/thirdparty/providers/google.tsx
index 818c71504..ba3e19a55 100644
--- a/lib/ts/recipe/thirdparty/providers/google.tsx
+++ b/lib/ts/recipe/thirdparty/providers/google.tsx
@@ -16,7 +16,6 @@
* Imports.
*/
import { isTest } from "../../../utils";
-import { googleLogo } from "../constants";
import type { BuiltInProviderConfig } from "./types";
@@ -42,8 +41,8 @@ export default class Google extends Provider {
});
}
- getLogo = (): JSX.Element => {
- return googleLogo;
+ getLogo = (): undefined => {
+ return undefined;
};
/*
diff --git a/lib/ts/recipe/thirdparty/providers/googleWorkspaces.tsx b/lib/ts/recipe/thirdparty/providers/googleWorkspaces.tsx
index e81a717a5..de87309de 100644
--- a/lib/ts/recipe/thirdparty/providers/googleWorkspaces.tsx
+++ b/lib/ts/recipe/thirdparty/providers/googleWorkspaces.tsx
@@ -32,27 +32,8 @@ export default class GoogleWorkspaces extends Provider {
});
}
- getLogo = (): JSX.Element => {
- return (
-
- );
+ getLogo = (): undefined => {
+ return undefined;
};
/*
diff --git a/lib/ts/recipe/thirdparty/providers/index.tsx b/lib/ts/recipe/thirdparty/providers/index.tsx
index 8af23dba9..e534fabdc 100644
--- a/lib/ts/recipe/thirdparty/providers/index.tsx
+++ b/lib/ts/recipe/thirdparty/providers/index.tsx
@@ -51,7 +51,7 @@ export default abstract class Provider {
return undefined;
}
- getButton = (name?: string): JSX.Element => {
+ getButton = (name?: string, defaultLogo?: JSX.Element): JSX.Element => {
if (this.config.buttonComponent !== undefined) {
if (typeof this.config.buttonComponent === "function") {
return ;
@@ -60,7 +60,8 @@ export default abstract class Provider {
}
const providerName = name !== undefined ? name : this.name;
- return ;
+ const logo = this.getLogo() ?? defaultLogo;
+ return ;
};
abstract getLogo(): JSX.Element | undefined;
diff --git a/lib/ts/recipe/thirdparty/providers/linkedIn.tsx b/lib/ts/recipe/thirdparty/providers/linkedIn.tsx
index 46644b7e1..2a81e57c0 100644
--- a/lib/ts/recipe/thirdparty/providers/linkedIn.tsx
+++ b/lib/ts/recipe/thirdparty/providers/linkedIn.tsx
@@ -41,19 +41,8 @@ export default class LinkedIn extends Provider {
});
}
- getLogo = (): JSX.Element => {
- return (
-
- );
+ getLogo = (): undefined => {
+ return undefined;
};
/*
diff --git a/lib/ts/recipe/thirdparty/providers/okta.tsx b/lib/ts/recipe/thirdparty/providers/okta.tsx
index 94139abf2..61b0b1706 100644
--- a/lib/ts/recipe/thirdparty/providers/okta.tsx
+++ b/lib/ts/recipe/thirdparty/providers/okta.tsx
@@ -16,7 +16,6 @@
* Imports.
*/
import { isTest } from "../../../utils";
-import { oktaLogo } from "../constants";
import type { BuiltInProviderConfig } from "./types";
@@ -42,8 +41,8 @@ export default class Okta extends Provider {
});
}
- getLogo = (): JSX.Element => {
- return oktaLogo;
+ getLogo = (): undefined => {
+ return undefined;
};
/*
diff --git a/lib/ts/recipe/thirdparty/types.ts b/lib/ts/recipe/thirdparty/types.ts
index 89d177d90..0d0f04527 100644
--- a/lib/ts/recipe/thirdparty/types.ts
+++ b/lib/ts/recipe/thirdparty/types.ts
@@ -103,7 +103,7 @@ export type OnHandleEventContext =
};
export type SignInAndUpThemeProps = PartialAuthComponentProps & {
- providers: Pick[];
+ providers: (Pick & { name?: string })[];
recipeImplementation: WebJSRecipeInterface;
config: NormalisedConfig;
};
diff --git a/lib/ts/recipe/thirdparty/utils.ts b/lib/ts/recipe/thirdparty/utils.ts
index d641324b1..9ea4ba635 100644
--- a/lib/ts/recipe/thirdparty/utils.ts
+++ b/lib/ts/recipe/thirdparty/utils.ts
@@ -16,12 +16,14 @@
/*
* Imports.
*/
+
import SuperTokens from "../../superTokens";
import { redirectWithFullPageReload } from "../../utils";
import { normaliseAuthRecipe } from "../authRecipe/utils";
import { FactorIds } from "../multifactorauth/types";
import Multitenancy from "../multitenancy/recipe";
+import { getProviderLogo } from "./constants";
import Provider from "./providers";
import ActiveDirectory from "./providers/activeDirectory";
import Apple from "./providers/apple";
@@ -221,7 +223,10 @@ export const mergeProviders = ({
...provider.config,
id: tenantProvider.id,
name: tenantProvider.name,
- buttonComponent: provider.getButton(tenantProvider.name),
+ buttonComponent: provider.getButton(
+ tenantProvider.name,
+ getProviderLogo(tenantProvider.id, tenantProvider.name)
+ ),
})
);
} else {