🔄🔐 refactor: auth; style: match OpenAI; feat: custom social login order (#1421)

* refactor(Login & Registration)

* fix(Registration) test errors

* refactor(LoginForm & ResetPassword)

* fix(LoginForm): display 'undefined' when loading page; style(SocialButton): match OpenAI's graphics

* some refactor and style update for social logins

* style: width like OpenAI; feat: custom social login order; refactor: alphabetical socials

* fix(Registration & Login) test

* Update .env.example

* Update .env.example

* Update dotenv.md

* refactor: remove `SOCIAL_LOGIN_ORDER` for `socialLogins` configured from `librechat.yaml`
- initialized by AppService, attached as app.locals property
- rename socialLoginOrder and loginOrder to socialLogins app-wide for consistency
- update types and docs
- initialize config variable as array and not singular string to parse
- bump data-provider to 0.3.9

---------

Co-authored-by: Danny Avila <messagedaniel@protonmail.com>

api/server/routes/__tests__/config.spec.js

@@ -56,13 +56,14 @@ describe.skip('GET /', () => {
     expect(response.statusCode).toBe(200);
     expect(response.body).toEqual({
       appTitle: 'Test Title',
-      googleLoginEnabled: true,
+      socialLogins: ['google', 'facebook', 'openid', 'github', 'discord'],
+      discordLoginEnabled: true,
       facebookLoginEnabled: true,
+      githubLoginEnabled: true,
+      googleLoginEnabled: true,
       openidLoginEnabled: true,
       openidLabel: 'Test OpenID',
       openidImageUrl: 'http://test-server.com',
-      githubLoginEnabled: true,
-      discordLoginEnabled: true,
       serverDomain: 'http://test-server.com',
       emailLoginEnabled: 'true',
       registrationEnabled: 'true',

api/server/routes/config.js

@@ -10,18 +10,19 @@ router.get('/', async function (req, res) {
   try {
     const payload = {
       appTitle: process.env.APP_TITLE || 'LibreChat',
-      googleLoginEnabled: !!process.env.GOOGLE_CLIENT_ID && !!process.env.GOOGLE_CLIENT_SECRET,
+      socialLogins: req.app.locals.socialLogins,
+      discordLoginEnabled: !!process.env.DISCORD_CLIENT_ID && !!process.env.DISCORD_CLIENT_SECRET,
       facebookLoginEnabled:
         !!process.env.FACEBOOK_CLIENT_ID && !!process.env.FACEBOOK_CLIENT_SECRET,
+      githubLoginEnabled: !!process.env.GITHUB_CLIENT_ID && !!process.env.GITHUB_CLIENT_SECRET,
+      googleLoginEnabled: !!process.env.GOOGLE_CLIENT_ID && !!process.env.GOOGLE_CLIENT_SECRET,
       openidLoginEnabled:
         !!process.env.OPENID_CLIENT_ID &&
         !!process.env.OPENID_CLIENT_SECRET &&
         !!process.env.OPENID_ISSUER &&
         !!process.env.OPENID_SESSION_SECRET,
-      openidLabel: process.env.OPENID_BUTTON_LABEL || 'Login with OpenID',
+      openidLabel: process.env.OPENID_BUTTON_LABEL || 'Continue with OpenID',
       openidImageUrl: process.env.OPENID_IMAGE_URL,
-      githubLoginEnabled: !!process.env.GITHUB_CLIENT_ID && !!process.env.GITHUB_CLIENT_SECRET,
-      discordLoginEnabled: !!process.env.DISCORD_CLIENT_ID && !!process.env.DISCORD_CLIENT_SECRET,
       serverDomain: process.env.DOMAIN_SERVER || 'http://localhost:3080',
       emailLoginEnabled,
       registrationEnabled: isEnabled(process.env.ALLOW_REGISTRATION),

api/server/services/AppService.js

@@ -10,7 +10,15 @@ const paths = require('~/config/paths');
  * @param {Express.Application} app - The Express application object.
  */
 const AppService = async (app) => {
+  /** @type {TCustomConfig}*/
   const config = (await loadCustomConfig()) ?? {};
+  const socialLogins = config.registration.socialLogins ?? [
+    'google',
+    'facebook',
+    'openid',
+    'github',
+    'discord',
+  ];
   const fileStrategy = config.fileStrategy ?? FileSources.local;
   process.env.CDN_PROVIDER = fileStrategy;
 
@@ -19,6 +27,7 @@ const AppService = async (app) => {
   }
 
   app.locals = {
+    socialLogins,
     fileStrategy,
     paths,
   };

api/server/services/Config/loadCustomConfig.js

@@ -11,7 +11,7 @@ const configPath = path.resolve(projectRoot, 'librechat.yaml');
  * Load custom configuration files and caches the object if the `cache` field at root is true.
  * Validation via parsing the config file with the config schema.
  * @function loadCustomConfig
- * @returns {Promise<null | Object>} A promise that resolves to null or the custom config object.
+ * @returns {Promise<TCustomConfig | null>} A promise that resolves to null or the custom config object.
  * */
 
 async function loadCustomConfig() {