diff --git a/src/auth/hooks/useAuthParameters.ts b/src/auth/hooks/useAuthParameters.ts index d02ece4b2..2365242be 100644 --- a/src/auth/hooks/useAuthParameters.ts +++ b/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, diff --git a/src/auth/hooks/useAuthProvider.ts b/src/auth/hooks/useAuthProvider.ts index acf46ff9a..8f65a2127 100644 --- a/src/auth/hooks/useAuthProvider.ts +++ b/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, diff --git a/src/auth/views/Login.tsx b/src/auth/views/Login.tsx index 7e733ed65..23a15c623 100644 --- a/src/auth/views/Login.tsx +++ b/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 = ({ params }) => { authenticating, errors, } = useUser(); - const { - data: externalAuthentications, - loading: externalAuthenticationsLoading, - } = useAvailableExternalAuthenticationsQuery(); - + const [ + queryExternalAuthentications, + { data: externalAuthentications, loading: externalAuthenticationsLoading }, + ] = useAvailableExternalAuthenticationsLazyQuery(); const { fallbackUri, requestedExternalPluginId, @@ -72,6 +71,15 @@ const LoginView: React.FC = ({ 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;