[REFACTOR][ENHANCEMENT] argilla server: better OAuth2 integration (#…

…5689)

# Description
<!-- Please include a summary of the changes and the related issue.
Please also include relevant motivation and context. List any
dependencies that are required for this change. -->

This PR improves the `social_core` integration, making setup backends
simpler.

Improvements:
- Reading `SOCIAL_AUTH_*` environment variables
- Remove unnecessary settings attribute `enabled`
- Add more backends with no-code: `extra_backends`* (some backends may
be not fully supported, but users can create issues for that)

**Type of change**
<!-- Please delete options that are not relevant. Remember to title the
PR according to the type of change -->

- Refactor (change restructuring the codebase without changing
functionality)
- Improvement (change adding some improvement to an existing
functionality)
- Documentation update

**How Has This Been Tested**
<!-- Please add some reference about how your feature has been tested.
-->

**Checklist**
<!-- Please go over the list and make sure you've taken everything into
account -->

- I added relevant documentation
- I followed the style guidelines of this project
- I did a self-review of my code
- I made corresponding changes to the documentation
- I confirm My changes generate no new warnings
- I have added tests that prove my fix is effective or that my feature
works
- I have added relevant notes to the CHANGELOG.md file (See
https://keepachangelog.com/)

---------

Co-authored-by: Leire Aguirre <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Paul Bauriegel <[email protected]>

argilla-frontend/components/features/login/OAuthLogin.vue

@@ -1,13 +1,19 @@
 <template>
   <div class="oauth__container" v-if="providers.length">
     <BaseSeparator />
-
-    <div v-for="provider in providers" :key="provider.name">
-      <HuggingFaceButton
-        v-if="provider.isHuggingFace"
-        @click="authorize(provider.name)"
-      />
-    </div>
+    <ul class="oauth__container__providers">
+      <li v-for="provider in providers" :key="provider.name">
+        <HuggingFaceButton
+          v-if="provider.isHuggingFace"
+          @click="authorize(provider.name)"
+        />
+        <OAuthLoginButton
+          v-else
+          :provider="provider.name"
+          @click="authorize(provider.name)"
+        />
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -29,6 +35,14 @@ export default {
     display: flex;
     flex-direction: column;
     gap: $base-space * 3;
+    &__providers {
+      display: flex;
+      flex-direction: column;
+      gap: $base-space;
+      justify-content: center;
+      padding: 0;
+      list-style: none;
+    }
   }
 }
 </style>

argilla-frontend/components/features/login/components/HuggingFaceButton.vue

@@ -16,6 +16,7 @@ export default {
   background: var(--color-black);
   color: var(--color-white);
   width: 100%;
+  min-height: $base-space * 6;
   padding: calc($base-space / 2) $base-space * 4;
   justify-content: center;
   &:hover {

argilla-frontend/components/features/login/components/KeycloakLogo.vue

@@ -0,0 +1,164 @@
+<template>
+  <!--https://github.com/keycloak/keycloak-misc/blob/main/logo/icon.svg-->
+  <svg
+    width="256"
+    height="256"
+    viewBox="0 0 44.216 39.861"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="m88.61 138.456 5.716-9.865 23.018-.004 5.686 9.965.007 19.932-5.691 9.957-23.012.008-5.782-9.965z"
+      style="
+        display: inline;
+        fill: #4d4d4d;
+        fill-opacity: 1;
+        stroke-width: 0.264583;
+      "
+      transform="translate(-82.815 -128.588)"
+    />
+    <path
+      d="M88.552 158.481h10.375l-5.699-10.041 4.634-9.982-9.252-.002-5.795 10.065"
+      style="
+        fill: #ededed;
+        fill-opacity: 1;
+        fill-rule: nonzero;
+        stroke: none;
+        stroke-width: 0.330729;
+      "
+      transform="translate(-82.815 -128.588)"
+    />
+    <path
+      d="M102.073 158.481h7.582l6.706-9.773-6.589-10.156h-8.921l-5.373 9.814z"
+      style="
+        fill: #e0e0e0;
+        fill-opacity: 1;
+        fill-rule: nonzero;
+        stroke: none;
+        stroke-width: 0.330729;
+      "
+      transform="translate(-82.815 -128.588)"
+    />
+    <path
+      d="m82.815 148.52 5.738 9.964h10.374l-5.636-9.93z"
+      style="
+        fill: #acacac;
+        fill-opacity: 1;
+        fill-rule: nonzero;
+        stroke: none;
+        stroke-width: 0.330729;
+      "
+      transform="translate(-82.815 -128.588)"
+    />
+    <path
+      d="m95.589 148.522 6.484 9.963h7.582l6.601-9.959z"
+      style="
+        fill: #9e9e9e;
+        fill-opacity: 1;
+        fill-rule: nonzero;
+        stroke: none;
+        stroke-width: 0.330729;
+      "
+      transform="translate(-82.815 -128.588)"
+    />
+    <path
+      d="m98.157 148.529-1.958.569-1.877-.572 7.667-13.288 1.918 3.316"
+      style="
+        fill: #00b8e3;
+        fill-opacity: 1;
+        fill-rule: nonzero;
+        stroke: none;
+        stroke-width: 0.330729;
+      "
+      transform="translate(-82.815 -128.588)"
+    />
+    <path
+      d="m103.9 158.482-1.909 3.332-5.093-5.487-2.58-7.797v-.004h3.838"
+      style="
+        fill: #33c6e9;
+        fill-opacity: 1;
+        fill-rule: nonzero;
+        stroke: none;
+        stroke-width: 0.330729;
+      "
+      transform="translate(-82.815 -128.588)"
+    />
+    <path
+      d="M94.322 148.526h-.003v.003l-1.918 3.322-1.925-3.307 1.952-3.386 5.728-9.92h3.834"
+      style="
+        fill: #008aaa;
+        fill-opacity: 1;
+        fill-rule: nonzero;
+        stroke: none;
+        stroke-width: 0.330729;
+      "
+      transform="translate(-82.815 -128.588)"
+    />
+    <path
+      d="M115.42 158.481h11.611l-.007-19.93h-11.605z"
+      style="
+        fill: #d4d4d4;
+        fill-opacity: 1;
+        fill-rule: nonzero;
+        stroke: none;
+        stroke-width: 0.330729;
+      "
+      transform="translate(-82.815 -128.588)"
+    />
+    <path
+      d="M115.42 148.554v9.93h11.59v-9.93z"
+      style="
+        fill: #919191;
+        fill-opacity: 1;
+        fill-rule: nonzero;
+        stroke: none;
+        stroke-width: 0.330729;
+      "
+      transform="translate(-82.815 -128.588)"
+    />
+    <path
+      d="M101.992 161.817h-3.836l-5.755-9.966 1.918-3.321z"
+      style="
+        fill: #00b8e3;
+        fill-opacity: 1;
+        fill-rule: nonzero;
+        stroke: none;
+        stroke-width: 0.330729;
+      "
+      transform="translate(-82.815 -128.588)"
+    />
+    <path
+      d="m117.333 148.526-7.669 13.289c-.705-1.036-1.913-3.331-1.913-3.331l5.753-9.959z"
+      style="
+        fill: #008aaa;
+        fill-opacity: 1;
+        fill-rule: nonzero;
+        stroke: none;
+        stroke-width: 0.330729;
+      "
+      transform="translate(-82.815 -128.588)"
+    />
+    <path
+      d="m113.495 161.815-3.831-.001 7.67-13.288 1.917-3.317 1.921 3.34m-3.839-.023h-3.828l-5.755-9.973 1.905-3.314 4.658 5.922z"
+      style="
+        fill: #00b8e3;
+        fill-opacity: 1;
+        fill-rule: nonzero;
+        stroke: none;
+        stroke-width: 0.330729;
+      "
+      transform="translate(-82.815 -128.588)"
+    />
+    <path
+      d="M119.25 145.205v.003l-1.917 3.318-7.677-13.286 3.841.002z"
+      style="
+        fill: #33c6e9;
+        fill-opacity: 1;
+        fill-rule: nonzero;
+        stroke: none;
+        stroke-width: 0.330729;
+      "
+      transform="translate(-82.815 -128.588)"
+    />
+  </svg>
+</template>

argilla-frontend/components/features/login/components/OAuthLoginButton.vue

@@ -0,0 +1,52 @@
+<template>
+  <BaseButton class="sign-in-button" @click="$emit('click')">
+    <KeycloakLogo v-if="provider === 'keycloak'" />
+    {{ signinText }}
+  </BaseButton>
+</template>
+
+<script>
+import KeycloakLogo from "./KeycloakLogo.vue";
+
+export default {
+  name: "OAuthLoginButton",
+  components: {
+    KeycloakLogo,
+  },
+  props: {
+    provider: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    providerName() {
+      return this.provider.charAt(0).toUpperCase() + this.provider.slice(1);
+    },
+    signinText() {
+      return this.$t("button.signin_with_provider", {
+        provider: this.providerName,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.sign-in-button {
+  @extend %button !optional;
+  background: var(--color-black);
+  color: var(--color-white);
+  width: 100%;
+  min-height: $base-space * 6;
+  padding: calc($base-space / 2) $base-space * 4;
+  justify-content: center;
+  &:hover {
+    background: hsl(from var(--color-black) h s l / 80%);
+  }
+  svg {
+    width: 30px;
+    height: auto;
+  }
+}
+</style>

argilla-frontend/translation/de.js

@@ -120,6 +120,7 @@ export default {
   button: {
     ignore_and_continue: "Ignorieren und fortfahren",
     login: "Anmelden",
+    signin_with_provider: "Mit {provider} anmelden",
     "hf-login": "Mit Hugging Face anmelden",
     sign_in_with_username: "Mit Benutzername anmelden",
     cancel: "Abbrechen",

argilla-frontend/translation/en.js

@@ -123,6 +123,7 @@ export default {
   button: {
     ignore_and_continue: "Ignore and continue",
     login: "Sign in",
+    signin_with_provider: "Sign in with {provider}",
     "hf-login": "Sign in with Hugging Face",
     sign_in_with_username: "Sign in with username",
     cancel: "Cancel",

argilla-frontend/translation/es.js

@@ -117,6 +117,7 @@ export default {
   button: {
     ignore_and_continue: "Ignorar y continuar",
     login: "Iniciar sesión",
+    signin_with_provider: "Iniciar sesión con {provider}",
     "hf-login": "Iniciar sesión con Hugging Face",
     sign_in_with_username: "Iniciar sesión con nombre de usuario",
     cancel: "Cancelar",

argilla-server/src/argilla_server/_app.py

@@ -306,9 +306,6 @@ def _show_telemetry_warning():
 async def _create_oauth_allowed_workspaces(db: AsyncSession):
     from argilla_server.security.settings import settings as security_settings
 
-    if not security_settings.oauth.enabled:
-        return
-
     for allowed_workspace in security_settings.oauth.allowed_workspaces:
         if await Workspace.get_by(db, name=allowed_workspace.name) is None:
             _LOGGER.info(f"Creating workspace with name {allowed_workspace.name!r}")