Fix double mutation when non staff user logs in (#3565)

* Fix double externalObtainAccessTokens mutation when non-staff user logs in

* Fix double availableExternalAuthenticationsQuery

* Make available attributes query lazy

src/auth/hooks/useAuthParameters.ts

@@ -11,7 +11,8 @@ export const useAuthParameters = () => {
   );
 
   return {
-    requestedExternalPluginId,
+    requestedExternalPluginId:
+      requestedExternalPluginId === "null" ? null : requestedExternalPluginId,
     fallbackUri: fallbackUri === "null" || !fallbackUri ? "/" : fallbackUri,
     isCallbackPath: location.pathname.includes(loginCallbackPath),
     setRequestedExternalPluginId,

src/auth/hooks/useAuthProvider.ts

@@ -181,9 +181,12 @@ export function useAuthProvider({
   };
 
   const handleExternalLogin = async (
-    pluginId: string,
+    pluginId: string | undefined,
     input: ExternalLoginInput,
   ) => {
+    if (!pluginId) {
+      return;
+    }
     try {
       const result = await getExternalAccessToken({
         pluginId,

src/auth/views/Login.tsx

@@ -1,4 +1,4 @@
-import { useAvailableExternalAuthenticationsQuery } from "@dashboard/graphql";
+import { useAvailableExternalAuthenticationsLazyQuery } from "@dashboard/graphql";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { getAppMountUriForRedirect } from "@dashboard/utils/urls";
 import React, { useEffect } from "react";
@@ -25,11 +25,10 @@ const LoginView: React.FC<LoginViewProps> = ({ params }) => {
     authenticating,
     errors,
   } = useUser();
-  const {
+  const [
-    data: externalAuthentications,
+    queryExternalAuthentications,
-    loading: externalAuthenticationsLoading,
+    { data: externalAuthentications, loading: externalAuthenticationsLoading },
-  } = useAvailableExternalAuthenticationsQuery();
+  ] = useAvailableExternalAuthenticationsLazyQuery();
-
   const {
     fallbackUri,
     requestedExternalPluginId,
@@ -72,6 +71,15 @@ const LoginView: React.FC<LoginViewProps> = ({ params }) => {
     setFallbackUri(null);
   };
 
+  useEffect(() => {
+    const { code, state } = params;
+    const externalAuthParamsExist = code && state && isCallbackPath;
+
+    if (!externalAuthParamsExist) {
+      queryExternalAuthentications();
+    }
+  }, [isCallbackPath, params, queryExternalAuthentications]);
+
   useEffect(() => {
     const { code, state } = params;
     const externalAuthParamsExist = code && state && isCallbackPath;