From 0ad878b088f2c875ca30792340554ce5ff972404 Mon Sep 17 00:00:00 2001 From: Chakravarthy7102 Date: Tue, 26 Sep 2023 18:11:44 +0530 Subject: [PATCH] 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 --- CHANGELOG.md | 27 +++++++++++++++++++ .../recipe/thirdparty/providers/custom.d.ts | 4 ++- .../recipe/thirdparty/providers/types.d.ts | 4 +++ lib/build/thirdparty-shared.js | 3 ++- lib/build/version.d.ts | 2 +- lib/ts/recipe/thirdparty/providers/custom.tsx | 6 +++-- lib/ts/recipe/thirdparty/providers/types.ts | 5 ++++ lib/ts/version.ts | 2 +- package-lock.json | 4 +-- package.json | 2 +- test/unit/recipe/thirdparty/signInUp.test.tsx | 14 +++++++++- .../unit/recipe/thirdparty/thirdParty.test.ts | 25 +++++++++++++++++ test/with-typescript/src/App.tsx | 11 ++++++++ 13 files changed, 99 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index be75c2fe4..4d5a072ca 100644 --- 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: + + , +... +``` + ## [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 index b0d6b91c3..85d1a5e22 100644 --- a/lib/build/recipe/thirdparty/providers/custom.d.ts +++ b/lib/build/recipe/thirdparty/providers/custom.d.ts @@ -1,7 +1,9 @@ +/// import type { CustomProviderConfig } from "./types"; import Provider from "."; export default class Custom extends Provider { + private logo; constructor(config: CustomProviderConfig); - getLogo: () => undefined; + getLogo: () => JSX.Element | undefined; static init(config: CustomProviderConfig): Provider; } diff --git a/lib/build/recipe/thirdparty/providers/types.d.ts b/lib/build/recipe/thirdparty/providers/types.d.ts index da89e94e5..e1f85cd36 100644 --- a/lib/build/recipe/thirdparty/providers/types.d.ts +++ b/lib/build/recipe/thirdparty/providers/types.d.ts @@ -21,6 +21,10 @@ export declare type BuiltInProviderConfig = { export declare type CustomProviderConfig = { id: string; name: string; + /** + * Provider Logo. + */ + logo?: JSX.Element; buttonComponent?: | FC<{ name: string; diff --git a/lib/build/thirdparty-shared.js b/lib/build/thirdparty-shared.js index 9ecf3f819..03a381834 100644 --- a/lib/build/thirdparty-shared.js +++ b/lib/build/thirdparty-shared.js @@ -1114,8 +1114,9 @@ var Custom = /** @class */ (function (_super) { function Custom(config) { var _this = _super.call(this, config) || this; _this.getLogo = function () { - return undefined; + return _this.logo; }; + _this.logo = config.logo; return _this; } /* diff --git a/lib/build/version.d.ts b/lib/build/version.d.ts index 2930185f2..08244704e 100644 --- a/lib/build/version.d.ts +++ b/lib/build/version.d.ts @@ -1 +1 @@ -export declare const package_version = "0.35.2"; +export declare const package_version = "0.35.3"; diff --git a/lib/ts/recipe/thirdparty/providers/custom.tsx b/lib/ts/recipe/thirdparty/providers/custom.tsx index 395e8a4ad..c8c42beb2 100644 --- 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 index 94f3facc0..e10db10d3 100644 --- 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 index d6c04883e..d1f657eba 100644 --- 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 index ce8b7dfff..475fb8546 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "supertokens-auth-react", - "version": "0.35.2", + "version": "0.35.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "supertokens-auth-react", - "version": "0.35.2", + "version": "0.35.3", "license": "Apache-2.0", "dependencies": { "intl-tel-input": "^17.0.19", diff --git a/package.json b/package.json index 82ef8f647..d5a7c04f0 100644 --- 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 index 165450be8..79b1afcf8 100644 --- 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(); + expect(await result.findByText("LOGO")).toBeInTheDocument(); + }); + test("not redirect if session exists but redirectOnSessionExists=false", async () => { // when const result = render( mockRenderedText ); diff --git a/test/unit/recipe/thirdparty/thirdParty.test.ts b/test/unit/recipe/thirdparty/thirdParty.test.ts index c9720ac77..e77f8fa4e 100644 --- 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 index 5a3113718..65b0a3a5d 100644 --- a/test/with-typescript/src/App.tsx +++ b/test/with-typescript/src/App.tsx @@ -453,6 +453,12 @@ function getThirdPartyConfigs() { name: "Custom", buttonComponent: ASDF Custom, }, + { + id: "custom-2", + name: "Custom-2", + logo: , + buttonComponent: ASDF Custom, + }, ], }, oAuthCallbackScreen: { @@ -493,6 +499,11 @@ function getThirdPartyEmailPasswordConfigs() { { id: "custom", name: "Custom", + logo: , + }, + { + id: "custom-2", + name: "Custom-2", }, ], },