fix: log when incorrect and show error in login page (#1943)

* feat: Add logs for incorrect AUTH_PROVIDER and show in login page

* feat: format any entry to lower case for AUTH_PROVIDER

* fix: Change simple text to Alert element on login page

public/locales/en/authentication/login.json

@@ -14,7 +14,11 @@
     "buttons": {
       "submit": "Sign in"
     },
-    "afterLoginRedirection": "After login, you'll be redirected to {{url}}"
+    "afterLoginRedirection": "After login, you'll be redirected to {{url}}",
+    "providersEmpty": {
+      "title": "Auth Provider Error",
+      "message": "The provider(s) are unset, please check your logs for more information."
+    }
   },
   "alert": "Your credentials are incorrect or this account doesn't exist. Please try again."
 }

src/env.js

@@ -19,6 +19,7 @@ const portSchema = z
   .optional();
 const envSchema = z.enum(['development', 'test', 'production']);
 
+const validAuthProviders = ['credentials', 'ldap', 'oidc'];
 const authProviders = process.env.AUTH_PROVIDER?.replaceAll(' ', '').split(',') || ['credentials'];
 
 const env = createEnv({
@@ -45,8 +46,22 @@ const env = createEnv({
     // Authentication
     AUTH_PROVIDER: z
       .string()
+      .min(1)
       .default('credentials')
-      .transform((providers) => providers.replaceAll(' ', '').split(',')),
+      .transform((providers) =>
+        providers
+          .replaceAll(' ', '')
+          .toLowerCase()
+          .split(',')
+          .filter((provider) => {
+            if (validAuthProviders.includes(provider)) return provider;
+            else if (!provider)
+              console.log(
+                `One or more of the entries for AUTH_PROVIDER could not be parsed and/or returned null.`
+              );
+            else console.log(`The value entered for AUTH_PROVIDER "${provider}" is incorrect.`);
+          })
+      ),
     // LDAP
     ...(authProviders.includes('ldap')
       ? {

src/pages/auth/login.tsx

@@ -124,9 +124,19 @@ export default function LoginPage({
                 {t('title')}
               </Title>
 
-              <Text color="dimmed" size="sm" align="center" mt={5} mb="md">
-                {t('text')}
-              </Text>
+              {(providers.length < 1 && (
+                <Alert
+                  icon={<IconAlertTriangle size="1rem" />}
+                  title={t('form.providersEmpty.title')}
+                  mt={5}
+                >
+                  {t('form.providersEmpty.message')}
+                </Alert>
+              )) || (
+                <Text color="dimmed" size="sm" align="center" mt={5} mb="md">
+                  {t('text')}
+                </Text>
+              )}
 
               {isError && (
                 <Alert icon={<IconAlertTriangle size="1rem" />} color="red">