danny-avila · berry-13 · Aug 9, 2023 · Aug 10, 2023 · Aug 10, 2023 · Aug 10, 2023
diff --git a/.env.example b/.env.example
@@ -240,15 +240,23 @@ SESSION_EXPIRY=(1000 * 60 * 60 * 24) * 7
 
 GITHUB_CLIENT_ID=your_client_id
 GITHUB_CLIENT_SECRET=your_client_secret
-GITHUB_CALLBACK_URL=/oauth/github/callback # this should be the same for everyone
+GITHUB_CALLBACK_URL=/oauth/github/callback # this should be the same for everyone so dont change it
 
 # Discord:
 # Get the Client ID and Secret from your Discord Application
 # Add your Github Client ID and Client Secret here:
 
 DISCORD_CLIENT_ID=your_client_id
 DISCORD_CLIENT_SECRET=your_client_secret
-DISCORD_CALLBACK_URL=/oauth/discord/callback # this should be the same for everyone
+DISCORD_CALLBACK_URL=/oauth/discord/callback # this should be the same for everyone so dont change it
+
+# Twitter:
+# Get the API Key and Secret from your Twitter Application
+# Add your "API Key" in Client ID and your "Secret" in Client Secret here:
+
+TWITTER_API_KEY=your_api_key
+TWITTER_API_SECRET=your_secret
+TWITTER_CALLBACK_URL=/oauth/twitter/callback # this should be the same for everyone so dont change it
 
 ###########################
 # Application Domains

diff --git a/README.md b/README.md
@@ -69,8 +69,8 @@ Keep up with the latest updates by visiting the releases page - [Releases](https
     * [Mac Install🍎](docs/install/mac_install.md)
     * [Windows Install💙](docs/install/windows_install.md)
   * Configuration
-    * [APIs and Tokens](docs/install/apis_and_tokens.md)
-    * [User Auth System](docs/install/user_auth_system.md)
+    * [APIs and Tokens](docs/install/API_&_Auth/apis_and_tokens.md)
+    * [User Auth System](docs/install/API_&_Auth/user_auth_system.md)
     * [Online MongoDB Database](docs/install/mongodb.md)
     * [Languages](docs/install/languages.md)
 </details>

diff --git a/api/models/User.js b/api/models/User.js
@@ -80,6 +80,11 @@ const userSchema = mongoose.Schema(
       unique: true,
       sparse: true,
     },
+    twitterId: {
+      type: String,
+      unique: true,
+      sparse: true,
+    },
     plugins: {
       type: Array,
       default: [],

diff --git a/api/package.json b/api/package.json
@@ -63,7 +63,7 @@
   },
   "devDependencies": {
     "jest": "^29.5.0",
-    "nodemon": "^2.0.20",
+    "nodemon": "^3.0.1",
     "path": "^0.12.7",
     "supertest": "^6.3.3"
   }

diff --git a/api/server/index.js b/api/server/index.js
@@ -16,6 +16,7 @@ const {
   googleLogin,
   githubLogin,
   discordLogin,
+  twitterLogin,
   facebookLogin,
   setupOpenId,
 } = require('../strategies');
@@ -61,6 +62,9 @@ config.validate(); // Validate the config
   if (process.env.DISCORD_CLIENT_ID && process.env.DISCORD_CLIENT_SECRET) {
     passport.use(await discordLogin());
   }
+  if (process.env.TWITTER_API_KEY && process.env.TWITTER_API_SECRET) {
+    passport.use(await twitterLogin());
+  }
   if (
     process.env.OPENID_CLIENT_ID &&
     process.env.OPENID_CLIENT_SECRET &&

diff --git a/api/server/routes/__tests__/config.spec.js b/api/server/routes/__tests__/config.spec.js
@@ -18,6 +18,8 @@ afterEach(() => {
   delete process.env.GITHUB_CLIENT_SECRET;
   delete process.env.DISCORD_CLIENT_ID;
   delete process.env.DISCORD_CLIENT_SECRET;
+  delete process.env.TWITTER_API_KEY;
+  delete process.env.TWITTER_API_SECRET;
   delete process.env.DOMAIN_SERVER;
   delete process.env.ALLOW_REGISTRATION;
   delete process.env.ALLOW_SOCIAL_LOGIN;
@@ -41,6 +43,8 @@ describe.skip('GET /', () => {
     process.env.GITHUB_CLIENT_SECRET = 'Test Github client Secret';
     process.env.DISCORD_CLIENT_ID = 'Test Discord client Id';
     process.env.DISCORD_CLIENT_SECRET = 'Test Discord client Secret';
+    process.env.TWITTER_API_KEY = 'Test Twitter api key';
+    process.env.TWITTER_API_SECRET = 'Test Twitter api Secret';
     process.env.DOMAIN_SERVER = 'http://test-server.com';
     process.env.ALLOW_REGISTRATION = 'true';
     process.env.ALLOW_SOCIAL_LOGIN = 'true';
@@ -56,6 +60,7 @@ describe.skip('GET /', () => {
       openidImageUrl: 'http://test-server.com',
       githubLoginEnabled: true,
       discordLoginEnabled: true,
+      twitterLoginEnabled: true,
       serverDomain: 'http://test-server.com',
       registrationEnabled: 'true',
       socialLoginEnabled: 'true',

diff --git a/api/server/routes/config.js b/api/server/routes/config.js
@@ -15,6 +15,7 @@ router.get('/', async function (req, res) {
     const githubLoginEnabled = !!process.env.GITHUB_CLIENT_ID && !!process.env.GITHUB_CLIENT_SECRET;
     const discordLoginEnabled =
       !!process.env.DISCORD_CLIENT_ID && !!process.env.DISCORD_CLIENT_SECRET;
+    const twitterLoginEnabled = !!process.env.TWITTER_API_KEY && !!process.env.TWITTER_API_SECRET;
     const serverDomain = process.env.DOMAIN_SERVER || 'http://localhost:3080';
     const registrationEnabled = process.env.ALLOW_REGISTRATION === 'true';
     const socialLoginEnabled = process.env.ALLOW_SOCIAL_LOGIN === 'true';
@@ -32,6 +33,7 @@ router.get('/', async function (req, res) {
       openidImageUrl,
       githubLoginEnabled,
       discordLoginEnabled,
+      twitterLoginEnabled,
       serverDomain,
       registrationEnabled,
       socialLoginEnabled,

diff --git a/api/server/routes/oauth.js b/api/server/routes/oauth.js
@@ -141,4 +141,24 @@ router.get(
   },
 );
 
+router.get('/twitter', passport.authenticate('twitter'));
+
+router.get(
+  '/twitter/callback',
+  passport.authenticate('twitter', {
+    failureRedirect: `${domains.client}/login`,
+    failureMessage: true,
+    session: false,
+  }),
+  (req, res) => {
+    const token = req.user.generateToken();
+    res.cookie('token', token, {
+      expires: new Date(Date.now() + eval(process.env.SESSION_EXPIRY)),
+      httpOnly: false,
+      secure: isProduction,
+    });
+    res.redirect(domains.client);
+  },
+);
+
 module.exports = router;
diff --git a/api/strategies/index.js b/api/strategies/index.js
@@ -2,6 +2,7 @@ const passportLogin = require('./localStrategy');
 const googleLogin = require('./googleStrategy');
 const githubLogin = require('./githubStrategy');
 const discordLogin = require('./discordStrategy');
+const twitterLogin = require('./twitterStrategy');
 const jwtLogin = require('./jwtStrategy');
 const facebookLogin = require('./facebookStrategy');
 const setupOpenId = require('./openidStrategy');
@@ -11,6 +12,7 @@ module.exports = {
   googleLogin,
   githubLogin,
   discordLogin,
+  twitterLogin,
   jwtLogin,
   facebookLogin,
   setupOpenId,

diff --git a/api/strategies/twitterStrategy.js b/api/strategies/twitterStrategy.js
@@ -0,0 +1,42 @@
+const { Strategy: TwitterStrategy } = require('passport-twitter');
+const config = require('../../config/loader');
+const domains = config.domains;
+
+const User = require('../models/User');
+
+const twitterLogin = async () =>
+  new TwitterStrategy(
+    {
+      consumerKey: process.env.TWITTER_API_KEY,
+      consumerSecret: process.env.TWITTER_API_SECRET,
+      callbackURL: `${domains.server}${process.env.TWITTER_CALLBACK_URL}`,
+      proxy: false,
+      includeEmail: true, // Richiedi il campo email
+    },
+    async (token, tokenSecret, profile, cb) => {
+      try {
+        const email = profile.emails && profile.emails.length > 0 ? profile.emails[0].value : null;
+
+        const oldUser = await User.findOne({ email });
+        if (oldUser) {
+          return cb(null, oldUser);
+        }
+
+        const newUser = await new User({
+          provider: 'twitter',
+          twitterId: profile.id,
+          username: profile.username,
+          email,
+          name: profile.displayName,
+          avatar: profile.photos && profile.photos.length > 0 ? profile.photos[0].value : null,
+        }).save();
+
+        cb(null, newUser);
+      } catch (err) {
+        console.error(err);
+        cb(err);
+      }
+    },
+  );
+
+module.exports = twitterLogin;
diff --git a/client/src/components/Auth/Login.tsx b/client/src/components/Auth/Login.tsx
@@ -7,7 +7,7 @@ import { useRecoilValue } from 'recoil';
 import store from '~/store';
 import { localize } from '~/localization/Translation';
 import { useGetStartupConfig } from 'librechat-data-provider';
-import { GoogleIcon, OpenIDIcon, GithubIcon, DiscordIcon } from '~/components';
+import { GoogleIcon, OpenIDIcon, GithubIcon, DiscordIcon, TwitterXIcon } from '~/components';
 
 function Login() {
   const { login, error, isAuthenticated } = useAuthContext();
@@ -115,6 +115,20 @@ function Login() {
             </div>
           </>
         )}
+        {startupConfig?.twitterLoginEnabled && startupConfig?.socialLoginEnabled && (
+          <>
+            <div className="mt-2 flex gap-x-2">
+              <a
+                aria-label="Login with Twitter"
+                className="justify-left flex w-full items-center space-x-3 rounded-md border border-gray-300 px-5 py-3 hover:bg-gray-50 focus:ring-2 focus:ring-violet-600 focus:ring-offset-1"
+                href={`${startupConfig.serverDomain}/oauth/twitter`}
+              >
+                <TwitterXIcon />
+                <p>{localize(lang, 'com_auth_twitter_login')}</p>
+              </a>
+            </div>
+          </>
+        )}
       </div>
     </div>
   );

diff --git a/client/src/components/Auth/Registration.tsx b/client/src/components/Auth/Registration.tsx
@@ -9,7 +9,7 @@ import {
   TRegisterUser,
   useGetStartupConfig,
 } from 'librechat-data-provider';
-import { GoogleIcon, OpenIDIcon, GithubIcon, DiscordIcon } from '~/components';
+import { GoogleIcon, OpenIDIcon, GithubIcon, DiscordIcon, TwitterXIcon } from '~/components';
 
 function Registration() {
   const navigate = useNavigate();
@@ -356,6 +356,20 @@ function Registration() {
             </div>
           </>
         )}
+        {startupConfig?.twitterLoginEnabled && startupConfig?.socialLoginEnabled && (
+          <>
+            <div className="mt-2 flex gap-x-2">
+              <a
+                aria-label="Login with Twitter"
+                className="justify-left flex w-full items-center space-x-3 rounded-md border border-gray-300 px-5 py-3 hover:bg-gray-50 focus:ring-2 focus:ring-violet-600 focus:ring-offset-1"
+                href={`${startupConfig.serverDomain}/oauth/twitter`}
+              >
+                <TwitterXIcon />
+                <p>{localize(lang, 'com_auth_twitter_login')}</p>
+              </a>
+            </div>
+          </>
+        )}
       </div>
     </div>
   );

diff --git a/client/src/components/Auth/__tests__/Login.spec.tsx b/client/src/components/Auth/__tests__/Login.spec.tsx
@@ -28,6 +28,7 @@ const setup = ({
       openidImageUrl: 'http://test-server.com',
       githubLoginEnabled: true,
       discordLoginEnabled: true,
+      twitterLoginEnabled: true,
       registrationEnabled: true,
       socialLoginEnabled: true,
       serverDomain: 'mock-server',

diff --git a/client/src/components/Auth/__tests__/Registration.spec.tsx b/client/src/components/Auth/__tests__/Registration.spec.tsx
@@ -29,6 +29,7 @@ const setup = ({
       openidImageUrl: 'http://test-server.com',
       githubLoginEnabled: true,
       discordLoginEnabled: true,
+      twitterLoginEnabled: true,
       registrationEnabled: true,
       socialLoginEnabled: true,
       serverDomain: 'mock-server',

diff --git a/client/src/components/svg/TwitterXIcon.tsx b/client/src/components/svg/TwitterXIcon.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+export default function TwitterXIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="twitterx" className="h-6 w-6">
+      <g transform="translate(-46.815 -17.104) scale(.13283)">
+        <circle
+          cx={834.28}
+          cy={610.6}
+          r={481.33}
+          style={{
+            stroke: '#fff',
+            strokeMiterlimit: 10,
+          }}
+        />
+        <path
+          d="m485.39 356.79 230.07 307.62-231.52 250.11h52.11l202.7-218.98 163.77 218.98h177.32L836.82 589.6l215.5-232.81h-52.11L813.54 558.46 662.71 356.79zm76.63 38.38h81.46l359.72 480.97h-81.46z"
+          style={{
+            fill: '#fff',
+          }}
+          transform="translate(52.39 -25.059)"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/client/src/components/svg/index.ts b/client/src/components/svg/index.ts
@@ -14,6 +14,7 @@ export { default as GoogleIcon } from './GoogleIcon';
 export { default as OpenIDIcon } from './OpenIDIcon';
 export { default as GithubIcon } from './GithubIcon';
 export { default as DiscordIcon } from './DiscordIcon';
+export { default as TwitterXIcon } from './TwitterXIcon';
 export { default as AnthropicIcon } from './AnthropicIcon';
 export { default as LinkIcon } from './LinkIcon';
 export { default as DotsIcon } from './DotsIcon';

diff --git a/client/src/localization/languages/Eng.tsx b/client/src/localization/languages/Eng.tsx
@@ -38,6 +38,7 @@ export default {
   com_auth_google_login: 'Login with Google',
   com_auth_github_login: 'Login with Github',
   com_auth_discord_login: 'Login with Discord',
+  com_auth_twitter_login: 'Login with Twitter',
   com_auth_email: 'Email',
   com_auth_email_required: 'Email is required',
   com_auth_email_min_length: 'Email must be at least 6 characters',

diff --git a/docs/install/apis_and_tokens.md → docs/install/API_&_Auth/apis_and_tokens.md b/docs/install/apis_and_tokens.md → docs/install/API_&_Auth/apis_and_tokens.md
diff --git a/docs/install/free_ai_apis.md → docs/install/API_&_Auth/free_ai_apis.md b/docs/install/free_ai_apis.md → docs/install/API_&_Auth/free_ai_apis.md
diff --git a/docs/install/API_&_Auth/twitter-text.md b/docs/install/API_&_Auth/twitter-text.md
@@ -0,0 +1,9 @@
+# Twitter example text for Twitter Developer Portal
+
+### Copy and paste this:
+
+I want to integrate the "Login with Twitter" feature on my website to make registration simpler and faster for users. Allowing users to log in with their Twitter account eliminates the need for them to create separate usernames and passwords just for my site. This way I reduce friction in the sign-up process and encourage more users to register and try out my website.
+
+Once a user logs in via Twitter, I can securely collect publicly available profile data like their name, username, profile picture and more. This allows me to personalize and improve the experience for each user without requiring them to fill out long and boring forms. I can also give them the ability to post content from my site directly to Twitter, which could help drive more traffic back to my site.
+
+Overall, adding Twitter login makes the user experience more seamless, helps acquire more users, provides valuable insights into their public profiles and opens opportunities for engagement and sharing on Twitter. It's a win for all parties involved. By properly implementing Twitter's APIs, I can take advantage of Twitter's huge user base and established social identity without compromising security. This will help my business grow and attract a wider audience.
diff --git a/docs/install/user_auth_system.md → docs/install/API_&_Auth/user_auth_system.md b/docs/install/user_auth_system.md → docs/install/API_&_Auth/user_auth_system.md
@@ -113,7 +113,7 @@ OPENID_CALLBACK_URL=/oauth/openid/callback
 ```
 GITHUB_CLIENT_ID=your_client_id
 GITHUB_CLIENT_SECRET=your_client_secret
-GITHUB_CALLBACK_URL=/oauth/github/callback # this should be the same for everyone
+GITHUB_CALLBACK_URL=/oauth/github/callback # this should be the same for everyone so dont change it
 ```
 9. Save the .env file
 ---
@@ -129,10 +129,36 @@ GITHUB_CALLBACK_URL=/oauth/github/callback # this should be the same for everyon
 ```
 DISCORD_CLIENT_ID=your_client_id
 DISCORD_CLIENT_SECRET=your_client_secret
-DISCORD_CALLBACK_URL=/oauth/discord/callback # this should be the same for everyone
+DISCORD_CALLBACK_URL=/oauth/discord/callback # this should be the same for everyone so dont change it
 ```
 8. Save the .env file
 ---
+
+## Twitter Authentication
+
+1. Go to [Twitter Developer Portal](https://developer.twitter.com/)
+2. Sign in and create a free account 
+3. Describe all of your use cases of Twitter’s data and API (if you don't know what to write, copy and paste [this](./twitter-text.md))
+4. In the Project & Apps tab, select "Default project ..." If you want, modify your project name to something like "LibreChat Login" in settings.
+5. Under the Default Project..., open the app. If you want, modify the App Name and upload an App Icon.
+6. In "User authentication settings," click on "Set up."
+7. In the App permissions, select "Read" and "Request email from users." In Type of App, select "Web App, Automated App, or Bot."
+8. In the App Info, put the provided information and save.
+```
+Callback URI / Redirect URL= your-domain/oauth/twitter/callback
+Website URL= your-domain
+Terms of service= https://example.com
+Privacy policy= https://example.com
+```
+9. In the Keys and tokens, click on Regenerate (the API Key and Secret), copy it and save it somewhere
+10. Put the API Key and API Secret in the .env file:
+```
+TWITTER_API_KEY=your_api_key
+TWITTER_API_SECRET=your_api_secret
+TWITTER_CALLBACK_URL=/oauth/twitter/callback # this should be the same for everyone so dont change it
+```
+11. Save the .env file
+
 ## **Email and Password Reset** 
 
 ### General setup

diff --git a/mkdocs.yml b/mkdocs.yml
@@ -87,9 +87,9 @@ nav:
         - Mac Install: 'install/mac_install.md'
         - Windows Install: 'install/windows_install.md'
     - Configuration:
-        - Free AI APIs: 'install/free_ai_apis.md'
-        - APIs and Tokens: 'install/apis_and_tokens.md'
-        - User Auth System: 'install/user_auth_system.md'
+        - Free AI APIs: 'install/API_&_Auth/free_ai_apis.md'
+        - APIs and Tokens: 'install/API_&_Auth/apis_and_tokens.md'
+        - User Auth System: 'install/API_&_Auth/user_auth_system.md'
         - Online MongoDB Database: 'install/mongodb.md'
         - Languages: 'install/languages.md'
   - Features: