feat(auth): Allow to hide username / password login form when OAuth is enabled (#518)

* 🚀 Feature: Allow to hide username / password login form when OAuth is enabled * Hide “Sign in” password form * Disable routes related to password authentication * Change styling of OAuth provider buttons * Open OAuth page in same tab * Fix consistent usage of informal language in de-DE locale Fixes #489 Signed-off-by: Marvin A. Ruder <signed@mruder.dev> * fix: order of new config variables --------- Signed-off-by: Marvin A. Ruder <signed@mruder.dev> Co-authored-by: Elias Schneider <login@eliasschneider.com>
2026-04-05 07:47:01 +02:00 · 2024-07-07 23:08:14 +02:00
parent 9d9cc7b4ab
commit e1a68f75f7
5 changed files with 89 additions and 45 deletions
--- a/backend/prisma/seed/config.seed.ts
+++ b/backend/prisma/seed/config.seed.ts
@@ -71,7 +71,6 @@ const configVariables: ConfigVariables = {
    enableShareEmailRecipients: {
      type: "boolean",
      defaultValue: "false",
-
      secret: false,
    },
    shareRecipientsSubject: {
@@ -148,6 +147,11 @@ const configVariables: ConfigVariables = {
      type: "boolean",
      defaultValue: "true",
    },
+    "disablePassword": {
+      type: "boolean",
+      defaultValue: "false",
+      secret: false,
+    },
    "github-enabled": {
      type: "boolean",
      defaultValue: "false",
@@ -229,7 +233,7 @@ const configVariables: ConfigVariables = {
      defaultValue: "",
      obscured: true,
    },
-  }
+  },
 };

 type ConfigVariables = {
@@ -281,12 +285,15 @@ async function seedConfigVariables() {

 async function migrateConfigVariables() {
  const existingConfigVariables = await prisma.config.findMany();
+  const orderMap: { [category: string]: number } = {};

  for (const existingConfigVariable of existingConfigVariables) {
    const configVariable =
      configVariables[existingConfigVariable.category]?.[
-      existingConfigVariable.name
+        existingConfigVariable.name
      ];
+
+    // Delete the config variable if it doesn't exist in the seed
    if (!configVariable) {
      await prisma.config.delete({
        where: {
@@ -297,15 +304,11 @@ async function migrateConfigVariables() {
        },
      });

-      // Update the config variable if the metadata changed
-    } else if (
-      JSON.stringify({
-        ...configVariable,
-        name: existingConfigVariable.name,
-        category: existingConfigVariable.category,
-        value: existingConfigVariable.value,
-      }) != JSON.stringify(existingConfigVariable)
-    ) {
+      // Update the config variable if it exists in the seed
+    } else {
+      const variableOrder = Object.keys(
+        configVariables[existingConfigVariable.category]
+      ).indexOf(existingConfigVariable.name);
      await prisma.config.update({
        where: {
          name_category: {
@@ -318,8 +321,10 @@ async function migrateConfigVariables() {
          name: existingConfigVariable.name,
          category: existingConfigVariable.category,
          value: existingConfigVariable.value,
+          order: variableOrder,
        },
      });
+      orderMap[existingConfigVariable.category] = variableOrder + 1;
    }
  }
 }
--- a/backend/src/auth/auth.service.ts
+++ b/backend/src/auth/auth.service.ts
@@ -61,6 +61,9 @@ export class AuthService {
    if (!dto.email && !dto.username)
      throw new BadRequestException("Email or username is required");

+    if (this.config.get("oauth.disablePassword"))
+      throw new ForbiddenException("Password sign in is disabled");
+
    const user = await this.prisma.user.findFirst({
      where: {
        OR: [{ email: dto.email }, { username: dto.username }],
@@ -94,6 +97,9 @@ export class AuthService {
  }

  async requestResetPassword(email: string) {
+    if (this.config.get("oauth.disablePassword"))
+      throw new ForbiddenException("Password sign in is disabled");
+
    const user = await this.prisma.user.findFirst({
      where: { email },
      include: { resetPasswordToken: true },
@@ -119,6 +125,9 @@ export class AuthService {
  }

  async resetPassword(token: string, newPassword: string) {
+    if (this.config.get("oauth.disablePassword"))
+      throw new ForbiddenException("Password sign in is disabled");
+
    const user = await this.prisma.user.findFirst({
      where: { resetPasswordToken: { token } },
    });
--- a/frontend/src/components/auth/SignInForm.tsx
+++ b/frontend/src/components/auth/SignInForm.tsx
@@ -28,6 +28,19 @@ import toast from "../../utils/toast.util";
 import { safeRedirectPath } from "../../utils/router.util";

 const useStyles = createStyles((theme) => ({
+  signInWith: {
+    fontWeight: 500,
+    "&:before": {
+      content: "''",
+      flex: 1,
+      display: "block",
+    },
+    "&:after": {
+      content: "''",
+      flex: 1,
+      display: "block",
+    },
+  },
  or: {
    "&:before": {
      content: "''",
@@ -128,49 +141,58 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
        </Text>
      )}
      <Paper withBorder shadow="md" p={30} mt={30} radius="md">
-        <form
-          onSubmit={form.onSubmit((values) => {
-            signIn(values.emailOrUsername, values.password);
-          })}
-        >
-          <TextInput
-            label={t("signin.input.email-or-username")}
-            placeholder={t("signin.input.email-or-username.placeholder")}
-            {...form.getInputProps("emailOrUsername")}
-          />
-          <PasswordInput
-            label={t("signin.input.password")}
-            placeholder={t("signin.input.password.placeholder")}
-            mt="md"
-            {...form.getInputProps("password")}
-          />
-          {config.get("smtp.enabled") && (
-            <Group position="right" mt="xs">
-              <Anchor component={Link} href="/auth/resetPassword" size="xs">
-                <FormattedMessage id="resetPassword.title" />
-              </Anchor>
-            </Group>
-          )}
-          <Button fullWidth mt="xl" type="submit">
-            <FormattedMessage id="signin.button.submit" />
-          </Button>
-        </form>
+        {config.get("oauth.disablePassword") || (
+          <form
+            onSubmit={form.onSubmit((values) => {
+              signIn(values.emailOrUsername, values.password);
+            })}
+          >
+            <TextInput
+              label={t("signin.input.email-or-username")}
+              placeholder={t("signin.input.email-or-username.placeholder")}
+              {...form.getInputProps("emailOrUsername")}
+            />
+            <PasswordInput
+              label={t("signin.input.password")}
+              placeholder={t("signin.input.password.placeholder")}
+              mt="md"
+              {...form.getInputProps("password")}
+            />
+            {config.get("smtp.enabled") && (
+              <Group position="right" mt="xs">
+                <Anchor component={Link} href="/auth/resetPassword" size="xs">
+                  <FormattedMessage id="resetPassword.title" />
+                </Anchor>
+              </Group>
+            )}
+            <Button fullWidth mt="xl" type="submit">
+              <FormattedMessage id="signin.button.submit" />
+            </Button>
+          </form>
+        )}
        {oauth.length > 0 && (
-          <Stack mt="xl">
-            <Group align="center" className={classes.or}>
-              <Text>{t("signIn.oauth.or")}</Text>
-            </Group>
+          <Stack mt={config.get("oauth.disablePassword") ? undefined : "xl"}>
+            {config.get("oauth.disablePassword") ? (
+              <Group align="center" className={classes.signInWith}>
+                <Text>{t("signIn.oauth.signInWith")}</Text>
+              </Group>
+            ) : (
+              <Group align="center" className={classes.or}>
+                <Text>{t("signIn.oauth.or")}</Text>
+              </Group>
+            )}
            <Group position="center">
              {oauth.map((provider) => (
                <Button
                  key={provider}
                  component="a"
-                  target="_blank"
                  title={t(`signIn.oauth.${provider}`)}
                  href={getOAuthUrl(config.get("general.appUrl"), provider)}
                  variant="light"
+                  fullWidth
                >
                  {getOAuthIcon(provider)}
+                  {"\u2002" + t(`signIn.oauth.${provider}`)}
                </Button>
              ))}
            </Group>
--- a/frontend/src/i18n/translations/de-DE.ts
+++ b/frontend/src/i18n/translations/de-DE.ts
@@ -34,6 +34,7 @@ export default {
  "signIn.notify.totp-required.title": "Zwei-Faktor-Authentifizierung benötigt",
  "signIn.notify.totp-required.description": "Bitte füge deinen Zwei-Faktor-Authentifizierungscode ein",
  "signIn.oauth.or": "ODER",
+  "signIn.oauth.signInWith": "Anmelden mit",
  "signIn.oauth.github": "GitHub",
  "signIn.oauth.google": "Google",
  "signIn.oauth.microsoft": "Microsoft",
@@ -348,6 +349,9 @@ export default {
  "admin.config.oauth.allow-registration.description": "Benutzern erlauben, sich über Soziale Netzwerke zu registrieren",
  "admin.config.oauth.ignore-totp": "TOTP ignorieren",
  "admin.config.oauth.ignore-totp.description": "Gibt an, ob TOTP ignoriert werden soll, wenn sich der Benutzer über Soziale Netzwerke anmeldet",
+  "admin.config.oauth.disable-password": "Anmelden mit Passwort deaktivieren",
+  "admin.config.oauth.disable-password.description":
+    "Deaktiviert das Anmelden mit Passwort\nStelle vor Aktivierung dieser Konfiguration sicher, dass ein OAuth-Provider korrekt konfiguriert ist, um nicht ausgesperrt zu werden.",
  "admin.config.oauth.github-enabled": "GitHub",
  "admin.config.oauth.github-enabled.description": "GitHub Anmeldung erlaubt",
  "admin.config.oauth.github-client-id": "GitHub Client-ID",
@@ -401,7 +405,7 @@ export default {
  "error.msg.no_email": "Kann die E-Mail-Adresse von dem Konto {0} nicht abrufen.",
  "error.msg.already_linked": "Das Konto {0} ist bereits mit einem anderen Konto verknüpft.",
  "error.msg.not_linked": "Das Konto {0} wurde noch nicht mit einem Konto verknüpft.",
-  "error.msg.unverified_account": "Dieses Konto {0} wurde noch nicht verifiziert, bitte versuchen Sie es nach der Verifikation erneut.",
+  "error.msg.unverified_account": "Dieses Konto {0} wurde noch nicht verifiziert, bitte versuche es nach der Verifikation erneut.",
  "error.msg.discord_guild_permission_denied": "Du bist nicht berechtigt, Dich anzumelden.",
  "error.msg.cannot_get_user_info": "Deine Benutzerinformationen können nicht von diesem Konto {0} abgerufen werden.",
  "error.param.provider_github": "GitHub",
--- a/frontend/src/i18n/translations/en-US.ts
+++ b/frontend/src/i18n/translations/en-US.ts
@@ -44,6 +44,7 @@ export default {
  "signIn.notify.totp-required.description":
    "Please enter your two-factor authentication code",
  "signIn.oauth.or": "OR",
+  "signIn.oauth.signInWith": "Sign in with",
  "signIn.oauth.github": "GitHub",
  "signIn.oauth.google": "Google",
  "signIn.oauth.microsoft": "Microsoft",
@@ -479,6 +480,9 @@ export default {
  "admin.config.oauth.ignore-totp": "Ignore TOTP",
  "admin.config.oauth.ignore-totp.description":
    "Whether to ignore TOTP when user using social login",
+  "admin.config.oauth.disable-password": "Disable password login",
+  "admin.config.oauth.disable-password.description":
+    "Whether to disable password login\nMake sure that an OAuth provider is properly configured before activating this configuration to avoid being locked out.",
  "admin.config.oauth.github-enabled": "GitHub",
  "admin.config.oauth.github-enabled.description":
    "Whether GitHub login is enabled",