feat: add custom logo property on thirdparty custom providers

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;
     };
 
     /*

lib/ts/recipe/thirdparty/providers/types.ts

@@ -56,6 +56,11 @@ export type CustomProviderConfig = {
      */
     name: string;
 
+    /**
+     * Provider Logo.
+     */
+    logo?: JSX.Element;
+
     /*
      * Button Component
      */

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.0";
+export const package_version = "0.35.1";

package.json

@@ -1,6 +1,6 @@
 {
     "name": "supertokens-auth-react",
-    "version": "0.35.0",
+    "version": "0.35.1",
     "description": "ReactJS SDK that provides login functionality with SuperTokens.",
     "main": "./index.js",
     "engines": {

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>);

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: {

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",
                 },
             ],
         },