feat: twitter provider (#743)

* feat: twitter provider * chore: build files * chore: build again * feat: add option to use legacy twitter logo * incorporate review changes * fix naming confustion * update change log
supertokens · Sep 27, 2023 · fbad845 · fbad845
1 parent 0ad878b
commit fbad845
Show file tree

Hide file tree

Showing 14 changed files with 113 additions and 39 deletions.
diff --git 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
diff --git a/lib/build/recipe/thirdparty/providers/twitter.d.ts b/lib/build/recipe/thirdparty/providers/twitter.d.ts
diff --git a/lib/build/recipe/thirdpartyemailpassword/index.d.ts b/lib/build/recipe/thirdpartyemailpassword/index.d.ts
diff --git a/lib/build/recipe/thirdpartypasswordless/index.d.ts b/lib/build/recipe/thirdpartypasswordless/index.d.ts
diff --git a/lib/build/thirdparty-shared.js b/lib/build/thirdparty-shared.js
diff --git a/lib/build/thirdparty.js b/lib/build/thirdparty.js
diff --git a/lib/build/thirdpartyemailpassword.js b/lib/build/thirdpartyemailpassword.js
diff --git a/lib/build/thirdpartypasswordless.js b/lib/build/thirdpartypasswordless.js
diff --git 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
@@ -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,34 +38,55 @@ 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 (
-            <svg xmlns="http://www.w3.org/2000/svg" width="20.129" height="16.356" viewBox="0 0 20.129 16.356">
-                <g>
+        if (this.useLegacyTwitterLogo === true) {
+            return (
+                <svg xmlns="http://www.w3.org/2000/svg" width="20.129" height="16.356" viewBox="0 0 20.129 16.356">
                     <g>
-                        <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)"
-                        />
+                        <g>
+                            <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)"
+                            />
+                        </g>
                     </g>
-                </g>
+                </svg>
+            );
+        }
+        return (
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 1200 1227">
+                <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"
+                />
             </svg>
         );
     };
 
     /*
      * 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
@@ -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
@@ -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