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 <[email protected]>

* fix: order of new config variables

---------

Signed-off-by: Marvin A. Ruder <[email protected]>
Co-authored-by: Elias Schneider <[email protected]>

Author: marvinruder

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;
     }
   }
 }

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 } },
     });

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>

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",

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",