[BUGFIX] argilla frontend: redirect after login

argilla-frontend/middleware/route-guard.ts

@@ -17,23 +17,26 @@
 
 import { Context } from "@nuxt/types";
 import { useRunningEnvironment } from "~/v1/infrastructure/services/useRunningEnvironment";
+import { useLocalStorage } from "~/v1/infrastructure/services";
+
+const { set } = useLocalStorage();
 
 export default ({ $auth, route, redirect }: Context) => {
   const { isRunningOnHuggingFace } = useRunningEnvironment();
 
+  if (route.path.startsWith("/api/")) {
+    return;
+  }
+
   switch (route.name) {
     case "sign-in":
       if ($auth.loggedIn) return redirect("/");
 
       if (route.params.omitCTA) return;
 
       if (isRunningOnHuggingFace()) {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { redirect: _, ...query } = route.query;
-
         return redirect({
           name: "welcome-hf-sign-in",
-          query,
         });
       }
       break;
@@ -50,7 +53,7 @@ export default ({ $auth, route, redirect }: Context) => {
     default:
       if (!$auth.loggedIn) {
         if (route.path !== "/") {
-          route.query.redirect = route.fullPath;
+          set("redirectTo", route.path);
         }
 
         redirect({

argilla-frontend/pages/oauth/_provider/useOAuthViewModel.ts

@@ -2,7 +2,11 @@ import { useFetch, useRoute } from "@nuxtjs/composition-api";
 import { useResolve } from "ts-injecty";
 import { ProviderType } from "~/v1/domain/entities/oauth/OAuthProvider";
 import { OAuthLoginUseCase } from "~/v1/domain/usecases/oauth-login-use-case";
-import { useRoutes, useTranslate } from "~/v1/infrastructure/services";
+import {
+  useRoutes,
+  useTranslate,
+  useLocalStorage,
+} from "~/v1/infrastructure/services";
 import { useNotifications } from "~/v1/infrastructure/services/useNotifications";
 
 export const useOAuthViewModel = () => {
@@ -11,24 +15,30 @@ export const useOAuthViewModel = () => {
   const routes = useRoute();
   const router = useRoutes();
   const oauthLoginUseCase = useResolve(OAuthLoginUseCase);
+  const { pop } = useLocalStorage();
 
   useFetch(async () => {
     await tryLogin();
   });
 
+  const redirect = () => {
+    const redirect = pop("redirectTo");
+    router.go(redirect || "/");
+  };
+
   const tryLogin = async () => {
     const { params, query } = routes.value;
 
     const provider = params.provider as ProviderType;
 
     try {
       await oauthLoginUseCase.login(provider, query);
+      redirect();
     } catch {
       notification.notify({
         message: t("argilla.api.errors::UnauthorizedError"),
         type: "danger",
       });
-    } finally {
       router.go("/");
     }
   };

argilla-frontend/pages/sign-in.vue

@@ -98,18 +98,8 @@ export default {
     },
   },
   methods: {
-    nextRedirect() {
-      const redirect_url = this.$nuxt.$route.query.redirect || "/";
-      this.$router.push({
-        path: redirect_url,
-      });
-    },
     async loginUser({ username, password }) {
       await this.login(username, password);
-
-      this.$notification.clear();
-
-      this.nextRedirect();
     },
     async onLoginUser() {
       try {

argilla-frontend/pages/useSignInViewModel.ts

@@ -1,11 +1,23 @@
 import { useResolve } from "ts-injecty";
 import { AuthLoginUseCase } from "~/v1/domain/usecases/auth-login-use-case";
+import { useRoutes, useLocalStorage } from "~/v1/infrastructure/services";
+import { useNotifications } from "~/v1/infrastructure/services/useNotifications";
 
 export const useSignInViewModel = () => {
   const useCase = useResolve(AuthLoginUseCase);
+  const router = useRoutes();
+  const notification = useNotifications();
+  const { pop } = useLocalStorage();
+
+  const redirect = () => {
+    const redirect = pop("redirectTo");
+    router.go(redirect || "/");
+  };
 
   const login = async (username: string, password: string) => {
     await useCase.login(username, password);
+    notification.clear();
+    redirect();
   };
 
   return {

argilla-frontend/v1/infrastructure/services/useLocalStorage.ts

@@ -1,4 +1,4 @@
-type Options = "showShortcutsHelper" | "layout";
+type Options = "showShortcutsHelper" | "layout" | "redirectTo";
 
 const STORAGE_KEY = "argilla";
 
@@ -34,8 +34,15 @@ export const useLocalStorage = () => {
     } catch {}
   };
 
+  const pop = (key: Options) => {
+    const value = get(key);
+    set(key, null);
+    return value;
+  };
+
   return {
     get,
     set,
+    pop,
   };
 };

argilla-server/tests/unit/api/handlers/v1/test_oauth2.py

@@ -89,14 +89,15 @@ async def test_provider_huggingface_authentication(
     ):
         with mock.patch("argilla_server.security.settings.Settings.oauth", new_callable=lambda: default_oauth_settings):
             response = await async_client.get(
-                "/api/v1/oauth2/providers/huggingface/authentication", headers=owner_auth_header
+                "/api/v1/oauth2/providers/huggingface/authentication?extra=params", headers=owner_auth_header
             )
             assert response.status_code == 303
 
             redirect_url = URL(response.headers.get("location"))
             assert redirect_url.scheme == b"https"
             assert redirect_url.host == b"huggingface.co"
             assert b"/oauth/authorize?response_type=code&client_id=client_id" in redirect_url.target
+            assert b"&extra=params" in redirect_url.target
 
     async def test_provider_authentication_with_oauth_disabled(
         self,