feat: add custom logo property on thirdparty custom providers (#741)

* feat: add logo property custom providers * bump version to v0.35.1 * test: custom icons for custom thirdparty providers * test: add more tests * bump v0.35.3
supertokens · Sep 26, 2023 · 0ad878b · 0ad878b
1 parent 2565f9b
commit 0ad878b
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,33 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+## [0.35.3] - 2023-09-26
+
+### Added
+
+-   Introduced a new option `logo` for thirdparty custom providers to set a custom logo, just like the `name` property.
+
+Following is an example of how to use this new `logo` property.
+
+```tsx
+ThirdPartyPasswordless.init({
+      signInUpFeature: {
+        providers: [
+          ThirdPartyPasswordless.Google.init(),
+          ThirdPartyPasswordless.Apple.init(),
+          {
+            id: "discord",
+            name: "Discord",
+            logo: <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        height="1em"
+                        viewBox="0 0 640 512"
+                      >
+                        <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z" />
+                      </svg>,
+...
+```
+
 ## [0.35.2] - 2023-09-24
 
 ### Test changes

diff --git a/lib/build/recipe/thirdparty/providers/custom.d.ts b/lib/build/recipe/thirdparty/providers/custom.d.ts
diff --git a/lib/build/recipe/thirdparty/providers/types.d.ts b/lib/build/recipe/thirdparty/providers/types.d.ts
diff --git a/lib/build/thirdparty-shared.js b/lib/build/thirdparty-shared.js
diff --git a/lib/build/version.d.ts b/lib/build/version.d.ts
diff --git a/lib/ts/recipe/thirdparty/providers/custom.tsx b/lib/ts/recipe/thirdparty/providers/custom.tsx
@@ -23,15 +23,17 @@ import Provider from ".";
  * Class.
  */
 export default class Custom extends Provider {
+    private logo: JSX.Element | undefined;
     /*
      * Constructor.
      */
     constructor(config: CustomProviderConfig) {
         super(config);
+        this.logo = config.logo;
     }
 
-    getLogo = (): undefined => {
-        return undefined;
+    getLogo = (): JSX.Element | undefined => {
+        return this.logo;
     };
 
     /*

diff --git a/lib/ts/recipe/thirdparty/providers/types.ts b/lib/ts/recipe/thirdparty/providers/types.ts
@@ -56,6 +56,11 @@ export type CustomProviderConfig = {
      */
     name: string;
 
+    /**
+     * Provider Logo.
+     */
+    logo?: JSX.Element;
+
     /*
      * Button Component
      */

diff --git a/lib/ts/version.ts b/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.35.2";
+export const package_version = "0.35.3";
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "supertokens-auth-react",
-    "version": "0.35.2",
+    "version": "0.35.3",
     "description": "ReactJS SDK that provides login functionality with SuperTokens.",
     "main": "./index.js",
     "engines": {

diff --git a/test/unit/recipe/thirdparty/signInUp.test.tsx b/test/unit/recipe/thirdparty/signInUp.test.tsx
@@ -53,7 +53,14 @@ describe("ThirdParty.SignInAndUp", () => {
             recipeList: [
                 Recipe.init({
                     signInAndUpFeature: {
-                        providers: [Github.init()],
+                        providers: [
+                            Github.init(),
+                            {
+                                id: "custom",
+                                name: "Custom",
+                                logo: "LOGO" as any,
+                            },
+                        ],
                     },
                     useShadowDom: false,
                 }),
@@ -86,6 +93,11 @@ describe("ThirdParty.SignInAndUp", () => {
         });
     });
 
+    test("check if the logo is rendered, when a logo is provided for custom providers", async () => {
+        const result = render(<SignInAndUp />);
+        expect(await result.findByText("LOGO")).toBeInTheDocument();
+    });
+
     test("not redirect if session exists but redirectOnSessionExists=false", async () => {
         // when
         const result = render(<SignInAndUp redirectOnSessionExists={false}> mockRenderedText </SignInAndUp>);

diff --git a/test/unit/recipe/thirdparty/thirdParty.test.ts b/test/unit/recipe/thirdparty/thirdParty.test.ts
@@ -256,6 +256,31 @@ describe("ThirdParty", function () {
         );
     });
 
+    it("Initializing ThirdParty with custom provider and custom logo if provided", async function () {
+        ThirdParty.init({
+            signInAndUpFeature: {
+                providers: [
+                    {
+                        id: "slack",
+                        name: "Slack",
+                        logo: "LOGO" as any,
+                    },
+                ],
+            },
+        }).authReact(SuperTokens.getInstanceOrThrow().appInfo, false);
+        assert.notDeepStrictEqual(ThirdParty.getInstanceOrThrow(), undefined);
+        assert.deepStrictEqual(ThirdParty.getInstanceOrThrow().config.recipeId, "thirdparty");
+        assert.deepStrictEqual(
+            ThirdParty.getInstanceOrThrow().config.appInfo,
+            SuperTokens.getInstanceOrThrow().appInfo
+        );
+        assert.deepStrictEqual(ThirdParty.getInstanceOrThrow().config.signInAndUpFeature.providers.length, 1);
+        assert.deepStrictEqual(
+            ThirdParty.getInstanceOrThrow().config.signInAndUpFeature.providers[0].getLogo(),
+            "LOGO"
+        );
+    });
+
     it("Initializing ThirdParty with Google twice only shows a warning and filters duplicate", async function () {
         ThirdParty.init({
             signInAndUpFeature: {

diff --git a/test/with-typescript/src/App.tsx b/test/with-typescript/src/App.tsx
@@ -453,6 +453,12 @@ function getThirdPartyConfigs() {
                     name: "Custom",
                     buttonComponent: <span>ASDF Custom</span>,
                 },
+                {
+                    id: "custom-2",
+                    name: "Custom-2",
+                    logo: <svg></svg>,
+                    buttonComponent: <span>ASDF Custom</span>,
+                },
             ],
         },
         oAuthCallbackScreen: {
@@ -493,6 +499,11 @@ function getThirdPartyEmailPasswordConfigs() {
                 {
                     id: "custom",
                     name: "Custom",
+                    logo: <svg></svg>,
+                },
+                {
+                    id: "custom-2",
+                    name: "Custom-2",
                 },
             ],
         },