diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d5a072ca..360f302d1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- Added new social provider `twitter` + - 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. diff --git a/lib/build/recipe/thirdparty/index.d.ts b/lib/build/recipe/thirdparty/index.d.ts index 043dcba42..d8d4e16e0 100644 --- a/lib/build/recipe/thirdparty/index.d.ts +++ b/lib/build/recipe/thirdparty/index.d.ts @@ -69,6 +69,7 @@ export default class Wrapper { static ActiveDirectory: typeof ActiveDirectory; static BoxySAML: typeof BoxySAML; static Okta: typeof Okta; + static Twitter: typeof Twitter; static ComponentsOverrideProvider: import("react").FC< import("react").PropsWithChildren<{ components: import("./types").ComponentOverrideMap; diff --git a/lib/build/recipe/thirdparty/providers/twitter.d.ts b/lib/build/recipe/thirdparty/providers/twitter.d.ts index 62286315c..8042d592d 100644 --- a/lib/build/recipe/thirdparty/providers/twitter.d.ts +++ b/lib/build/recipe/thirdparty/providers/twitter.d.ts @@ -1,10 +1,14 @@ /// import type { BuiltInProviderConfig } from "./types"; import Provider from "."; +export declare type TwitterProviderConfig = BuiltInProviderConfig & { + useLegacyTwitterLogo?: boolean; +}; export default class Twitter extends Provider { + private useLegacyTwitterLogo; private static instance?; - constructor(config?: BuiltInProviderConfig); + constructor(config?: TwitterProviderConfig); getLogo: () => JSX.Element; - static init(config?: BuiltInProviderConfig): Provider; + static init(config?: TwitterProviderConfig): Provider; static reset(): void; } diff --git a/lib/build/recipe/thirdpartyemailpassword/index.d.ts b/lib/build/recipe/thirdpartyemailpassword/index.d.ts index f225db25e..79d711eb8 100644 --- a/lib/build/recipe/thirdpartyemailpassword/index.d.ts +++ b/lib/build/recipe/thirdpartyemailpassword/index.d.ts @@ -13,6 +13,7 @@ import { ActiveDirectory, BoxySAML, Okta, + Twitter, } from "../thirdparty/"; import { UserInput, GetRedirectionURLContext, PreAPIHookContext, OnHandleEventContext } from "./types"; import type { StateObject } from "supertokens-web-js/recipe/thirdparty"; @@ -180,6 +181,7 @@ export default class Wrapper { static ActiveDirectory: typeof ActiveDirectory; static BoxySAML: typeof BoxySAML; static Okta: typeof Okta; + static Twitter: typeof Twitter; static ComponentsOverrideProvider: import("react").FC< import("react").PropsWithChildren<{ components: import("./types").ComponentOverrideMap; @@ -217,6 +219,7 @@ export { ActiveDirectory, BoxySAML, Okta, + Twitter, ThirdpartyEmailPasswordComponentsOverrideProvider, signOut, submitNewPassword, diff --git a/lib/build/recipe/thirdpartypasswordless/index.d.ts b/lib/build/recipe/thirdpartypasswordless/index.d.ts index db4806266..ec3b47990 100644 --- a/lib/build/recipe/thirdpartypasswordless/index.d.ts +++ b/lib/build/recipe/thirdpartypasswordless/index.d.ts @@ -13,6 +13,7 @@ import { ActiveDirectory, BoxySAML, Okta, + Twitter, } from "../thirdparty/"; import { UserInput, GetRedirectionURLContext, PreAPIHookContext, OnHandleEventContext } from "./types"; import type { StateObject } from "supertokens-web-js/recipe/thirdparty"; @@ -171,6 +172,7 @@ export default class Wrapper { static ActiveDirectory: typeof ActiveDirectory; static BoxySAML: typeof BoxySAML; static Okta: typeof Okta; + static Twitter: typeof Twitter; static ComponentsOverrideProvider: import("react").FC< import("react").PropsWithChildren<{ components: import("./types").ComponentOverrideMap; @@ -212,6 +214,7 @@ export { ActiveDirectory, BoxySAML, Okta, + Twitter, redirectToThirdPartyLogin, thirdPartySignInAndUp, getThirdPartyStateAndOtherInfoFromStorage, diff --git a/lib/build/thirdparty-shared.js b/lib/build/thirdparty-shared.js index 03a381834..828d7dc14 100644 --- a/lib/build/thirdparty-shared.js +++ b/lib/build/thirdparty-shared.js @@ -1011,34 +1011,57 @@ var Twitter = /** @class */ (function (_super) { * Constructor. */ function Twitter(config) { - var _this = - _super.call(this, genericComponentOverrideContext.__assign({ id: "twitter", name: "Twitter" }, config)) || - this; + var _this = this; + var id = "x"; + var name = "X"; + var normalisedUseLegacyTwitterLogo = + (config === null || config === void 0 ? void 0 : config.useLegacyTwitterLogo) === true; + if (normalisedUseLegacyTwitterLogo) { + id = "twitter"; + name = "Twitter"; + } + _this = _super.call(this, genericComponentOverrideContext.__assign({ id: id, name: name }, config)) || this; + _this.useLegacyTwitterLogo = false; _this.getLogo = function () { + if (_this.useLegacyTwitterLogo === true) { + return jsxRuntime.jsx( + "svg", + genericComponentOverrideContext.__assign( + { + xmlns: "http://www.w3.org/2000/svg", + width: "20.129", + height: "16.356", + viewBox: "0 0 20.129 16.356", + }, + { + children: jsxRuntime.jsx("g", { + children: jsxRuntime.jsx("g", { + children: jsxRuntime.jsx("path", { + fill: "#04ABEE", + d: "M45.232 35.964a8.242 8.242 0 0 1-2.372.649 4.141 4.141 0 0 0 1.816-2.284 8.268 8.268 0 0 1-2.623 1 4.133 4.133 0 0 0-7.037 3.771 11.724 11.724 0 0 1-8.516-4.317 4.133 4.133 0 0 0 1.282 5.517 4.1 4.1 0 0 1-1.87-.517v.052a4.132 4.132 0 0 0 3.313 4.049 4.147 4.147 0 0 1-1.865.071 4.134 4.134 0 0 0 3.858 2.868 8.338 8.338 0 0 1-6.114 1.71 11.745 11.745 0 0 0 18.08-9.894q0-.268-.012-.534a8.374 8.374 0 0 0 2.061-2.137z", + transform: + "translate(34.799 -7.41) translate(2.201 4.266) translate(-62.103 -30.883)", + }), + }), + }), + } + ) + ); + } return jsxRuntime.jsx( "svg", genericComponentOverrideContext.__assign( + { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 1200 1227" }, { - xmlns: "http://www.w3.org/2000/svg", - width: "20.129", - height: "16.356", - viewBox: "0 0 20.129 16.356", - }, - { - children: jsxRuntime.jsx("g", { - children: jsxRuntime.jsx("g", { - children: jsxRuntime.jsx("path", { - fill: "#04ABEE", - d: "M45.232 35.964a8.242 8.242 0 0 1-2.372.649 4.141 4.141 0 0 0 1.816-2.284 8.268 8.268 0 0 1-2.623 1 4.133 4.133 0 0 0-7.037 3.771 11.724 11.724 0 0 1-8.516-4.317 4.133 4.133 0 0 0 1.282 5.517 4.1 4.1 0 0 1-1.87-.517v.052a4.132 4.132 0 0 0 3.313 4.049 4.147 4.147 0 0 1-1.865.071 4.134 4.134 0 0 0 3.858 2.868 8.338 8.338 0 0 1-6.114 1.71 11.745 11.745 0 0 0 18.08-9.894q0-.268-.012-.534a8.374 8.374 0 0 0 2.061-2.137z", - transform: - "translate(34.799 -7.41) translate(2.201 4.266) translate(-62.103 -30.883)", - }), - }), + children: jsxRuntime.jsx("path", { + d: "M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z", + fill: "#000", }), } ) ); }; + _this.useLegacyTwitterLogo = normalisedUseLegacyTwitterLogo; return _this; } /* diff --git a/lib/build/thirdparty.js b/lib/build/thirdparty.js index d4bf24c79..39d78aa94 100644 --- a/lib/build/thirdparty.js +++ b/lib/build/thirdparty.js @@ -129,6 +129,7 @@ var Wrapper = /** @class */ (function () { Wrapper.ActiveDirectory = recipe.ActiveDirectory; Wrapper.BoxySAML = recipe.BoxySAML; Wrapper.Okta = recipe.Okta; + Wrapper.Twitter = recipe.Twitter; Wrapper.ComponentsOverrideProvider = recipe.Provider; return Wrapper; })(); diff --git a/lib/build/thirdpartyemailpassword.js b/lib/build/thirdpartyemailpassword.js index 60d05e2bf..def27b758 100644 --- a/lib/build/thirdpartyemailpassword.js +++ b/lib/build/thirdpartyemailpassword.js @@ -199,6 +199,7 @@ var Wrapper = /** @class */ (function () { Wrapper.ActiveDirectory = recipe.ActiveDirectory; Wrapper.BoxySAML = recipe.BoxySAML; Wrapper.Okta = recipe.Okta; + Wrapper.Twitter = recipe.Twitter; Wrapper.ComponentsOverrideProvider = recipe$1.Provider; return Wrapper; })(); @@ -228,6 +229,7 @@ exports.Google = recipe.Google; exports.GoogleWorkspaces = recipe.GoogleWorkspaces; exports.LinkedIn = recipe.LinkedIn; exports.Okta = recipe.Okta; +exports.Twitter = recipe.Twitter; exports.ThirdpartyEmailPasswordComponentsOverrideProvider = ThirdpartyEmailPasswordComponentsOverrideProvider; exports.default = Wrapper; exports.doesEmailExist = doesEmailExist; diff --git a/lib/build/thirdpartypasswordless.js b/lib/build/thirdpartypasswordless.js index 280a332ec..7de9631c9 100644 --- a/lib/build/thirdpartypasswordless.js +++ b/lib/build/thirdpartypasswordless.js @@ -259,6 +259,7 @@ var Wrapper = /** @class */ (function () { Wrapper.ActiveDirectory = recipe.ActiveDirectory; Wrapper.BoxySAML = recipe.BoxySAML; Wrapper.Okta = recipe.Okta; + Wrapper.Twitter = recipe.Twitter; Wrapper.ComponentsOverrideProvider = recipe$1.Provider; return Wrapper; })(); @@ -293,6 +294,7 @@ exports.Google = recipe.Google; exports.GoogleWorkspaces = recipe.GoogleWorkspaces; exports.LinkedIn = recipe.LinkedIn; exports.Okta = recipe.Okta; +exports.Twitter = recipe.Twitter; exports.ThirdpartyPasswordlessComponentsOverrideProvider = ThirdpartyPasswordlessComponentsOverrideProvider; exports.clearPasswordlessLoginAttemptInfo = clearPasswordlessLoginAttemptInfo; exports.consumePasswordlessCode = consumePasswordlessCode; diff --git a/lib/ts/recipe/thirdparty/index.ts b/lib/ts/recipe/thirdparty/index.ts index 1ca8e57da..3a5547412 100644 --- a/lib/ts/recipe/thirdparty/index.ts +++ b/lib/ts/recipe/thirdparty/index.ts @@ -133,6 +133,7 @@ export default class Wrapper { static ActiveDirectory = ActiveDirectory; static BoxySAML = BoxySAML; static Okta = Okta; + static Twitter = Twitter; static ComponentsOverrideProvider = RecipeComponentsOverrideContextProvider; } diff --git a/lib/ts/recipe/thirdparty/providers/twitter.tsx b/lib/ts/recipe/thirdparty/providers/twitter.tsx index 2f29ce637..aaeacbc00 100644 --- a/lib/ts/recipe/thirdparty/providers/twitter.tsx +++ b/lib/ts/recipe/thirdparty/providers/twitter.tsx @@ -21,10 +21,15 @@ import type { BuiltInProviderConfig } from "./types"; import Provider from "."; +export type TwitterProviderConfig = BuiltInProviderConfig & { + useLegacyTwitterLogo?: boolean; +}; + /* * Class. */ export default class Twitter extends Provider { + private useLegacyTwitterLogo = false; /* * Static Attributes. */ @@ -33,26 +38,47 @@ export default class Twitter extends Provider { /* * Constructor. */ - constructor(config?: BuiltInProviderConfig) { + constructor(config?: TwitterProviderConfig) { + let id = "x"; + let name = "X"; + const normalisedUseLegacyTwitterLogo = config?.useLegacyTwitterLogo === true; + + if (normalisedUseLegacyTwitterLogo) { + id = "twitter"; + name = "Twitter"; + } + super({ - id: "twitter", - name: "Twitter", + id, + name, ...config, }); + + this.useLegacyTwitterLogo = normalisedUseLegacyTwitterLogo; } getLogo = (): JSX.Element => { - return ( - - + if (this.useLegacyTwitterLogo === true) { + return ( + - + + + - + + ); + } + return ( + + ); }; @@ -60,7 +86,7 @@ export default class Twitter extends Provider { /* * Static Methods */ - static init(config?: BuiltInProviderConfig): Provider { + static init(config?: TwitterProviderConfig): Provider { if (Twitter.instance !== undefined) { console.warn("Twitter Provider was already initialized"); return Twitter.instance; diff --git a/lib/ts/recipe/thirdpartyemailpassword/index.ts b/lib/ts/recipe/thirdpartyemailpassword/index.ts index f352812c9..c15a315cd 100644 --- a/lib/ts/recipe/thirdpartyemailpassword/index.ts +++ b/lib/ts/recipe/thirdpartyemailpassword/index.ts @@ -28,6 +28,7 @@ import { ActiveDirectory, BoxySAML, Okta, + Twitter, } from "../thirdparty/"; import { redirectToThirdPartyLogin as UtilsRedirectToThirdPartyLogin } from "../thirdparty/utils"; @@ -273,6 +274,7 @@ export default class Wrapper { static ActiveDirectory = ActiveDirectory; static BoxySAML = BoxySAML; static Okta = Okta; + static Twitter = Twitter; static ComponentsOverrideProvider = RecipeComponentsOverrideContextProvider; } @@ -304,6 +306,7 @@ export { ActiveDirectory, BoxySAML, Okta, + Twitter, ThirdpartyEmailPasswordComponentsOverrideProvider, signOut, submitNewPassword, diff --git a/lib/ts/recipe/thirdpartypasswordless/index.ts b/lib/ts/recipe/thirdpartypasswordless/index.ts index 7cb24c69c..8ec2e9739 100644 --- a/lib/ts/recipe/thirdpartypasswordless/index.ts +++ b/lib/ts/recipe/thirdpartypasswordless/index.ts @@ -28,6 +28,7 @@ import { ActiveDirectory, BoxySAML, Okta, + Twitter, } from "../thirdparty/"; import { redirectToThirdPartyLogin as UtilsRedirectToThirdPartyLogin } from "../thirdparty/utils"; @@ -277,6 +278,7 @@ export default class Wrapper { static ActiveDirectory = ActiveDirectory; static BoxySAML = BoxySAML; static Okta = Okta; + static Twitter = Twitter; static ComponentsOverrideProvider = RecipeComponentsOverrideContextProvider; } @@ -313,6 +315,7 @@ export { ActiveDirectory, BoxySAML, Okta, + Twitter, redirectToThirdPartyLogin, thirdPartySignInAndUp, getThirdPartyStateAndOtherInfoFromStorage, diff --git a/package-lock.json b/package-lock.json index 475fb8546..f63d95fb7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16253,9 +16253,9 @@ } }, "node_modules/supertokens-website": { - "version": "17.0.3", - "resolved": "https://registry.npmjs.org/supertokens-website/-/supertokens-website-17.0.3.tgz", - "integrity": "sha512-+5qMuii8mp3TEPX5HKLt48A4gzKM8cmnoYmFeoecLeylfY3mEAeL7AbAVjCp6On/s/xvvH6Q22fOEoCFf5Tu/g==", + "version": "17.0.4", + "resolved": "https://registry.npmjs.org/supertokens-website/-/supertokens-website-17.0.4.tgz", + "integrity": "sha512-ayWhEFvspUe26YhM1bq11ssEpnFCZIsoHZtJwJHgHsoflfMUKdgrzOix/bboI0PWJeNTUphHyZebw0ApctaS1Q==", "peer": true, "dependencies": { "browser-tabs-lock": "^1.3.0", @@ -29424,9 +29424,9 @@ } }, "supertokens-website": { - "version": "17.0.3", - "resolved": "https://registry.npmjs.org/supertokens-website/-/supertokens-website-17.0.3.tgz", - "integrity": "sha512-+5qMuii8mp3TEPX5HKLt48A4gzKM8cmnoYmFeoecLeylfY3mEAeL7AbAVjCp6On/s/xvvH6Q22fOEoCFf5Tu/g==", + "version": "17.0.4", + "resolved": "https://registry.npmjs.org/supertokens-website/-/supertokens-website-17.0.4.tgz", + "integrity": "sha512-ayWhEFvspUe26YhM1bq11ssEpnFCZIsoHZtJwJHgHsoflfMUKdgrzOix/bboI0PWJeNTUphHyZebw0ApctaS1Q==", "peer": true, "requires": { "browser-tabs-lock": "^1.3.0",