🐛 Fix Redirect uri bug in magic-link for contributors

:wq

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<number | ReturnType<typeof setInterval> | null>(null);
-  const authWindowRef = useRef<Window | null>(null);
+  const authWindowRef = useRef<Window | null>(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);
 

apps/magic-link/src/lib/ProviderModal.tsx

@@ -63,7 +63,7 @@ const ProviderModal = () => {
   const [openSuccessDialog,setOpenSuccessDialog] = useState<boolean>(false);
   const [currentProviderLogoURL,setCurrentProviderLogoURL] = useState<string>('')
   const [currentProvider,setCurrentProvider] = useState<string>('')
-
+  const [redirectIngressUri, setRedirectIngressUri] = useState<string | null>(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);

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 (
     <>
       <div className="hidden h-full flex-1 flex-col space-y-8 md:flex">
@@ -114,7 +115,7 @@ export default function ConnectionTable() {
               </div>
             </div>
             <DialogFooter>
-              <Button variant="outline" size="sm" className="h-7 gap-1" type="submit" onClick={() => window.open(`${config.MAGIC_LINK_DOMAIN}/?uniqueLink=${uniqueLink}`, '_blank')}>
+              <Button variant="outline" size="sm" className="h-7 gap-1" type="submit" onClick={() => window.open(`${config.MAGIC_LINK_DOMAIN}/?uniqueLink=${uniqueLink}&redirectIngressUri=${INGRESS_REDIRECT}`, '_blank')}>
                 <p className="mr-2">Open Link</p>
                 <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
               </Button>

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://' ? 
       <>
         <Input
-          defaultValue={`${config.MAGIC_LINK_DOMAIN}/?uniqueLink=${uniqueLink}`}
+          defaultValue={`${config.MAGIC_LINK_DOMAIN}/?uniqueLink=${uniqueLink}&redirectIngressUri=${INGRESS_REDIRECT}`}
           readOnly
           className="col-span-3 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none  focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"                              
         /> 

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,

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

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

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