diff --git a/apps/magic-link/src/hooks/useOAuth.ts b/apps/magic-link/src/hooks/useOAuth.ts index c048607ec..50e6f6012 100644 --- a/apps/magic-link/src/hooks/useOAuth.ts +++ b/apps/magic-link/src/hooks/useOAuth.ts @@ -9,14 +9,14 @@ type UseOAuthProps = { returnUrl: string; // Return URL after OAuth flow projectId: string; // Project ID linkedUserId: string; // Linked User ID - optionalApiUrl?: string; // URL of the User's Server + redirectIngressUri: string | null; // URL of the User's Server onSuccess: () => void; }; -const useOAuth = ({ providerName, vertical, returnUrl, projectId, linkedUserId, onSuccess }: UseOAuthProps) => { +const useOAuth = ({ providerName, vertical, returnUrl, projectId, linkedUserId, redirectIngressUri, onSuccess }: UseOAuthProps) => { const [isReady, setIsReady] = useState(false); const intervalRef = useRef | null>(null); - const authWindowRef = useRef(null); + const authWindowRef = useRef(null); useEffect(() => { // Perform any setup logic here @@ -41,12 +41,12 @@ const useOAuth = ({ providerName, vertical, returnUrl, projectId, linkedUserId, } }; + const openModal = async (onWindowClose: () => void) => { const apiUrl = config.API_URL!; const authUrl = await constructAuthUrl({ - projectId, linkedUserId, providerName, returnUrl, apiUrl, vertical + projectId, linkedUserId, providerName, returnUrl, apiUrl , vertical, rediectUriIngress: redirectIngressUri }); - console.log('auth url is '+ authUrl) if (!authUrl) { throw new Error("Auth Url is Invalid " + authUrl); @@ -56,7 +56,7 @@ const useOAuth = ({ providerName, vertical, returnUrl, projectId, linkedUserId, const left = (window.innerWidth - width) / 2; const top = (window.innerHeight - height) / 2; const authWindow = window.open(authUrl as string, '_blank', `width=${width},height=${height},top=${top},left=${left}`); - authWindowRef.current = authWindow; + authWindowRef.current = authWindow; clearExistingInterval(false); diff --git a/apps/magic-link/src/lib/ProviderModal.tsx b/apps/magic-link/src/lib/ProviderModal.tsx index 5f24cfb63..c3d7e0cfd 100644 --- a/apps/magic-link/src/lib/ProviderModal.tsx +++ b/apps/magic-link/src/lib/ProviderModal.tsx @@ -63,7 +63,7 @@ const ProviderModal = () => { const [openSuccessDialog,setOpenSuccessDialog] = useState(false); const [currentProviderLogoURL,setCurrentProviderLogoURL] = useState('') const [currentProvider,setCurrentProvider] = useState('') - + const [redirectIngressUri, setRedirectIngressUri] = useState(null); const {mutate : createApiKeyConnection} = useCreateApiKeyConnection(); const {data: magicLink} = useUniqueMagicLink(uniqueMagicLinkId); const {data: connectorsForProject} = useProjectConnectors(isProjectIdReady ? projectId : null); @@ -86,6 +86,14 @@ const ProviderModal = () => { } }, []); + useEffect(() => { + const queryParams = new URLSearchParams(window.location.search); + const redirectIngressUri = queryParams.get('redirectIngressUri'); + if (redirectIngressUri) { + setRedirectIngressUri(redirectIngressUri); + } + }, []); + useEffect(() => { if (magicLink) { setProjectId(magicLink?.id_project); @@ -118,6 +126,7 @@ const ProviderModal = () => { returnUrl: window.location.href, projectId: projectId, linkedUserId: magicLink?.id_linked_user as string, + redirectIngressUri, onSuccess: () => { console.log('OAuth successful'); setOpenSuccessDialog(true); diff --git a/apps/webapp/src/components/Connection/ConnectionTable.tsx b/apps/webapp/src/components/Connection/ConnectionTable.tsx index 69c583b63..6371a21eb 100644 --- a/apps/webapp/src/components/Connection/ConnectionTable.tsx +++ b/apps/webapp/src/components/Connection/ConnectionTable.tsx @@ -55,7 +55,8 @@ export default function ConnectionTable() { connectionToken: connection.connection_token! })) - + const INGRESS_REDIRECT = config.DISTRIBUTION == 'selfhost' && config.REDIRECT_WEBHOOK_INGRESS; + return ( <>
@@ -114,7 +115,7 @@ export default function ConnectionTable() {
- diff --git a/apps/webapp/src/components/Connection/CopyLinkInput.tsx b/apps/webapp/src/components/Connection/CopyLinkInput.tsx index 538861246..067f2f6b5 100644 --- a/apps/webapp/src/components/Connection/CopyLinkInput.tsx +++ b/apps/webapp/src/components/Connection/CopyLinkInput.tsx @@ -12,10 +12,11 @@ const CopyLinkInput = () => { const [copied, setCopied] = useState(false); const {uniqueLink} = useMagicLinkStore(); + const INGRESS_REDIRECT = config.DISTRIBUTION == 'selfhost' && config.REDIRECT_WEBHOOK_INGRESS; const handleCopy = async () => { try { - await navigator.clipboard.writeText(`${config.MAGIC_LINK_DOMAIN}/?uniqueLink=${uniqueLink}`); + await navigator.clipboard.writeText(`${config.MAGIC_LINK_DOMAIN}/?uniqueLink=${uniqueLink}&redirectIngressUri=${INGRESS_REDIRECT}`); toast.success("Magic link copied", { action: { label: "Close", @@ -34,7 +35,7 @@ const CopyLinkInput = () => { {uniqueLink !== 'https://' ? <> diff --git a/apps/webapp/src/lib/config.ts b/apps/webapp/src/lib/config.ts index abf350b1b..201afaa65 100644 --- a/apps/webapp/src/lib/config.ts +++ b/apps/webapp/src/lib/config.ts @@ -1,6 +1,7 @@ const config = { API_URL: process.env.NEXT_PUBLIC_BACKEND_DOMAIN, MAGIC_LINK_DOMAIN: process.env.NEXT_PUBLIC_MAGIC_LINK_DOMAIN, + REDIRECT_WEBHOOK_INGRESS: process.env.NEXT_PUBLIC_REDIRECT_WEBHOOK_INGRESS, POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST, POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY, DISTRIBUTION: process.env.NEXT_PUBLIC_DISTRIBUTION, diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml index 0341c7383..064ea2ff9 100644 --- a/docker-compose.dev.yml +++ b/docker-compose.dev.yml @@ -206,6 +206,7 @@ services: NEXT_PUBLIC_BACKEND_DOMAIN: ${NEXT_PUBLIC_BACKEND_DOMAIN} NEXT_PUBLIC_MAGIC_LINK_DOMAIN: ${NEXT_PUBLIC_MAGIC_LINK_DOMAIN} NEXT_PUBLIC_WEBAPP_DOMAIN: ${NEXT_PUBLIC_WEBAPP_DOMAIN} + NEXT_PUBLIC_REDIRECT_WEBHOOK_INGRESS: ${REDIRECT_TUNNEL_INGRESS} restart: unless-stopped ports: - 80:8090 diff --git a/docker-compose.source.yml b/docker-compose.source.yml index 3d21e7b8a..0d830a2ae 100644 --- a/docker-compose.source.yml +++ b/docker-compose.source.yml @@ -204,6 +204,7 @@ services: NEXT_PUBLIC_BACKEND_DOMAIN: ${NEXT_PUBLIC_BACKEND_DOMAIN} NEXT_PUBLIC_FRONTEND_DOMAIN: ${NEXT_PUBLIC_FRONTEND_DOMAIN} NEXT_PUBLIC_WEBAPP_DOMAIN: ${NEXT_PUBLIC_WEBAPP_DOMAIN} + NEXT_PUBLIC_REDIRECT_WEBHOOK_INGRESS: ${REDIRECT_TUNNEL_INGRESS} restart: unless-stopped ports: - 80:8090 diff --git a/packages/shared/src/authUrl.ts b/packages/shared/src/authUrl.ts index bc98e4cec..d13e05add 100644 --- a/packages/shared/src/authUrl.ts +++ b/packages/shared/src/authUrl.ts @@ -10,15 +10,13 @@ interface AuthParams { returnUrl: string; apiUrl: string; vertical: string; - redirectUrlIngressWhenLocalDev?: string; + rediectUriIngress?: string | null; } // make sure to check wether its api_key or oauth2 to build the right auth // make sure to check if client has own credentials to connect or panora managed ones -export const constructAuthUrl = async ({ projectId, linkedUserId, providerName, returnUrl, apiUrl, vertical }: AuthParams) => { - const redirectUrlIngressWhenLocalDev = CONNECTORS_METADATA[vertical][providerName].options?.local_redirect_uri_in_https === true && 'https://prepared-wildcat-infinitely.ngrok-free.app'; - const localEnv = apiUrl.startsWith('http://localhost:3000') || apiUrl.includes('localhost'); - const encodedRedirectUrl = encodeURIComponent(`${localEnv && redirectUrlIngressWhenLocalDev ? redirectUrlIngressWhenLocalDev : apiUrl}/connections/oauth/callback`); +export const constructAuthUrl = async ({ projectId, linkedUserId, providerName, returnUrl, apiUrl, vertical, rediectUriIngress }: AuthParams) => { + const encodedRedirectUrl = encodeURIComponent(`${rediectUriIngress ? rediectUriIngress : apiUrl}/connections/oauth/callback`); const state = encodeURIComponent(JSON.stringify({ projectId, linkedUserId, providerName, vertical, returnUrl })); // console.log('State : ', JSON.stringify({ projectId, linkedUserId, providerName, vertical, returnUrl })); // console.log('encodedRedirect URL : ', encodedRedirectUrl); @@ -72,10 +70,10 @@ const handleOAuth2Url = async (input: HandleOAuth2Url) => { config, encodedRedirectUrl, state, - apiUrl + apiUrl, } = input; - const type = providerToType(providerName, vertical, authStrategy); + const type = providerToType(providerName, vertical, authStrategy); // 1. env if selfhost and no custom // 2. backend if custom credentials