How Can I Fix a Connection Error on my App Using Pipedream Connect?

Help
1

This topic was automatically generated from Slack. You can find the original thread here.

Hi all! Trying to connect my app using Pipedream connect and I am seeing this error, does anyone know how I can fix this? Thank you!

Pipedream error.gif

2

thanks for reaching out. Could you share two things?

  1. The frontend code you’re using to open the SDK
  2. The backend code that’s generating the Connect token
3

Hey ! Here is the code I am using, I have Bolt website builder helping me build this so let me know if you need more information on my end

Front end:

const handlePipedreamConnect = async (automationId: string) => {
  try {
    const connectUrl = PipedreamService.getConnectUrl(automationId);
    
    const width = 600;
    const height = 700;
    const left = window.screenX + (window.outerWidth - width) / 2;
    const top = window.screenY + (window.outerHeight - height) / 2;
    
    const connectWindow = window.open(
      connectUrl,
      'Pipedream Connect',
      `width=${width},height=${height},left=${left},top=${top}`
    );

    window.addEventListener('message', (event) => {
      if (event.origin !== window.location.origin) return;
      if (event.data.type === 'PIPEDREAM_CONNECT_CALLBACK') {
        setAutomations(current =>
          current.map(automation =>
            automation.id === automationId
              ? { ...automation, pipedreamConnected: true, enabled: true }
              : automation
          )
        );
        connectWindow?.close();
      }
    });
  } catch (error) {
    console.error('Error initiating Pipedream connection:', error);
  }
};

Backend:

import { PIPEDREAM_CONFIG } from '../config/pipedream';

export class PipedreamService {
  static async getAuthUrl(state: string): Promise<string> {
    const params = new URLSearchParams({
      client_id: PIPEDREAM_CONFIG.clientId,
      redirect_uri: PIPEDREAM_CONFIG.callbackUrl,
      response_type: 'code',
      state,
      scope: PIPEDREAM_CONFIG.scope
    });

    return `${PIPEDREAM_CONFIG.authUrl}?${params.toString()}`;
  }

  static async exchangeCodeForToken(code: string): Promise<any> {
    try {
      const response = await fetch(PIPEDREAM_CONFIG.tokenUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
          grant_type: 'authorization_code',
          client_id: PIPEDREAM_CONFIG.clientId,
          client_secret: PIPEDREAM_CONFIG.clientSecret,
          code,
          redirect_uri: PIPEDREAM_CONFIG.callbackUrl,
        }).toString(),
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message || 'Failed to exchange code for Pipedream token');
      }

      return await response.json();
    } catch (error) {
4

Bolt is architecting things a little different than we recommend in our quickstart, and some of the code it’s generating is incorrect, e.g. we don’t use any authorization_code grants. I’m curious — did you feed in our docs or just tell it you wanted to use Pipedream Connect?

5

I fed it images of the quick start guide section but it sounds like it did not follow them properly. I can go back and try it again with more specific instructions to see if it works and I can report back if I run into any issues

6

awesome! Yeah I think that might help. Maybe pasting in the Markdown content from the quickstart will help it work better: https://raw.githubusercontent.com/PipedreamHQ/pipedream/refs/heads/master/docs-v2/pages/connect/quickstart.mdx

7

you can do the same with any of those pages, e.g. adding the API / SDK docs may also help

8

Great idea! ill give that a try really appreciate the help