feat: Use dynamic sso provider logo

CHANGELOG.md

@@ -7,7 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
-## [0.42.3] - 2024-07-19
+## [0.43.0] - 2024-06-25
+
+### Changes
+
+-   Updated SAML third-party provider to use logo based on the provider name
+
+## [0.42.3] - 2024-06-24
 
 ### Changes
 

lib/ts/recipe/thirdparty/providers/boxySaml.tsx

@@ -16,6 +16,19 @@
  * Imports.
  */
 import { isTest } from "../../../utils";
+import {
+    auth0Logo,
+    genericSAMLLogo,
+    googleLogo,
+    jumpCloudLogo,
+    microsoftADFSLogo,
+    microsoftEntraIdLogo,
+    oktaLogo,
+    oneLoginLogo,
+    openIdLogo,
+    pingOneLogo,
+    ripplingLogo,
+} from "../constants";
 
 import type { BuiltInProviderConfig } from "./types";
 
@@ -42,16 +55,41 @@ export default class BoxySAML extends Provider {
     }
 
     getLogo = (): JSX.Element => {
-        return (
-            <svg width="18" height="18" viewBox="0 0 315 315" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M77.105 1.63917C73.508 2.90917 68.328 7.66517 48.6 27.8102C9.78001 67.4512 4.335 73.2352 2.366 76.9282C0.576997 80.2832 0.5 84.9492 0.5 189.428V298.428L2.653 302.428C5.419 307.568 8.402 310.306 14 312.844C18.441 314.857 19.926 314.884 127 314.884C234.09 314.884 235.558 314.858 240 312.843C245.891 310.171 310.072 246.476 313.03 240.366C314.954 236.392 314.999 233.722 314.978 126.862C314.957 22.7132 314.867 17.2322 313.114 13.3722C310.846 8.37917 304.317 2.63917 299.142 1.08917C296.299 0.237168 266.809 -0.0508316 188.384 0.00716838C94.448 0.0761684 80.968 0.274168 77.105 1.63917ZM299.587 16.2342L302 19.0402V126.895V234.75L298.923 237.339L295.847 239.928H188.569H81.292L78.712 237.537C77.293 236.221 75.859 233.634 75.527 231.787C75.195 229.939 75.053 181.338 75.211 123.783C75.496 20.7532 75.531 19.1032 77.5 16.9152C78.6 15.6922 80.4 14.3202 81.5 13.8662C82.6 13.4122 131.577 13.1282 190.337 13.2342L297.173 13.4282L299.587 16.2342ZM189.775 79.4872C188.276 80.3002 186.578 81.8482 186.001 82.9262C184.177 86.3332 173.018 165.844 174 168.429C177.035 176.411 188.093 177.229 192.086 169.767C192.692 168.635 195.809 149.655 199.012 127.59C205.461 83.1672 205.462 82.7702 199.128 79.4942C195.412 77.5722 193.306 77.5712 189.775 79.4872ZM147.151 92.3012C145.86 93.0182 138.78 100.089 131.419 108.016C117.072 123.464 115.535 126.23 118.33 131.557C119.159 133.136 126.097 140.616 133.749 148.178C146.43 160.712 147.978 161.928 151.253 161.928C153.66 161.928 155.863 161.073 157.923 159.339C160.53 157.146 161 156.054 161 152.194C161 147.768 160.716 147.349 151.011 137.487L141.022 127.337L151.011 116.416C160.041 106.543 161 105.125 161 101.646C161 96.5122 159.53 94.0472 155.452 92.3432C151.342 90.6262 150.183 90.6202 147.151 92.3012ZM219.923 94.8512C217.643 97.1312 217 98.6762 217 101.873C217 106.272 218.273 108.028 231.174 121.43L236.951 127.433L227.491 137.575C217.182 148.627 215.888 150.869 217.139 155.509C218.403 160.197 221.481 162.428 226.684 162.428C231.123 162.428 231.269 162.315 245.459 147.864C260.272 132.777 262.086 129.914 260.113 124.725C259.055 121.943 233.866 94.4622 230.937 92.8942C227.407 91.0052 222.983 91.7912 219.923 94.8512Z"
-                    fill="black"
-                />
-            </svg>
-        );
+        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;
+            }
+        }
     };
 
     /*

lib/ts/recipe/thirdparty/providers/google.tsx

@@ -16,6 +16,7 @@
  * Imports.
  */
 import { isTest } from "../../../utils";
+import { googleLogo } from "../constants";
 
 import type { BuiltInProviderConfig } from "./types";
 
@@ -42,26 +43,7 @@ export default class Google extends Provider {
     }
 
     getLogo = (): JSX.Element => {
-        return (
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="18px" height="18px">
-                <path
-                    fill="#FFC107"
-                    d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"
-                />
-                <path
-                    fill="#FF3D00"
-                    d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"
-                />
-                <path
-                    fill="#4CAF50"
-                    d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"
-                />
-                <path
-                    fill="#1976D2"
-                    d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"
-                />
-            </svg>
-        );
+        return googleLogo;
     };
 
     /*

lib/ts/version.ts

@@ -12,4 +12,4 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
-export const package_version = "0.42.3";
+export const package_version = "0.43.0";

package.json

@@ -1,6 +1,6 @@
 {
     "name": "supertokens-auth-react",
-    "version": "0.42.3",
+    "version": "0.43.0",
     "description": "ReactJS SDK that provides login functionality with SuperTokens.",
     "main": "./index.js",
     "engines": {
@@ -149,7 +149,7 @@
         },
         {
             "path": "recipe/thirdparty/index.js",
-            "limit": "30kb"
+            "limit": "33kb"
         },
         {
             "path": "recipe/emailpassword/index.js",
@@ -169,7 +169,7 @@
         },
         {
             "path": "recipe/thirdparty/prebuiltui.js",
-            "limit": "49kb"
+            "limit": "53kb"
         },
         {
             "path": "recipe/emailpassword/prebuiltui.js",