Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 4 additions & 10 deletions docs-v2/pages/connect/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,7 @@ import VideoPlayer from "@/components/VideoPlayer";
<Callout type="info">
**Pipedream Connect is currently in preview, and we're looking for feedback!**

In the preview phase,

- **Connect is free to use for any workspace**. [Pricing will come later](#plans-and-pricing), likely at a per-user or per-account charge.
- **The API will change without notice, which may cause breaking changes**. We'll do our best to communicate these changes.
**During the preview phase, Connect is free to use for any workspace. The API may change without notice, which may cause breaking changes**. We'll do our best to communicate these changes.

Please reach out at `[email protected]` or our [Slack community](https://pipedream.com/support) to let us know how you're using it, what's not working, and what else you'd like to see.
</Callout>
Expand All @@ -27,7 +24,7 @@ Connect lets your users authorize access to any API, directly in your app. You c

You have full, code-level control over how these integrations work. You handle the product, Pipedream takes care of the auth. Connect provides:

1. A [Client SDK](https://github.com/PipedreamHQ/pipedream/tree/master/packages/sdk) to initiate authorization or accept API keys on behalf of your users, for any of the [{process.env.PUBLIC_APPS}+ APIs](https://pipedream.com/apps) available on Pipedream
1. A [Client SDK](https://github.com/PipedreamHQ/pipedream/tree/master/packages/sdk) or [Connect Link](/connect/quickstart#use-connect-link) to initiate authorization or accept API keys on behalf of your users, for any of the [{process.env.PUBLIC_APPS}+ APIs](https://pipedream.com/apps) available on Pipedream
2. A [REST API](/connect/api) to retrieve credentials for your end users — OAuth access tokens, API keys, and other credentials stored for them
3. The Pipedream platform and its [workflow builder](/workflows), [serverless runtime](/), and thousands of no-code [triggers](/workflows/triggers) and [actions](/workflows/actions)

Expand All @@ -54,8 +51,6 @@ Watch [the demo](https://www.youtube.com/embed/xhUagMsogkQ) or visit [the quicks

During the preview phase, **Connect is free to use for any workspace**.

After the preview phase, Pipedream is likely to charge on the number of end users who have active accounts in your workspace's projects. Any pricing changes will be clearly communicated, and you can delete unused end user accounts at any time.

Please let us know if you have any feedback on the value of Connect and how you'd like to see it priced.

## Security
Expand All @@ -76,9 +71,8 @@ All credentials and tokens are sent to Pipedream securely over HTTPS, and encryp
## Product roadmap for Connect

- Address bugs and feedback during the preview phase
- Simplify the developer experience and SDK integration
- Invoke Pipedream workflows on behalf of end users
- Support hosted UIs for connecting accounts — native support for mobile environments that can't execute JavaScript or load iframes.
- Use Pipedream OAuth clients while in development, to make it easier to get started
- Invoke Pipedream workflows on behalf of your end users
- Improve error handling for Connect developers and end users
- And more!

Expand Down
30 changes: 24 additions & 6 deletions docs-v2/pages/connect/quickstart.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ You'll need these when configuring the SDK and making API requests.
You'll need to do two things to integrate Pipedream Connect into your app:

1. [Connect to the Pipedream API from your server](#connect-to-the-pipedream-api-from-your-server-and-create-a-token). This lets you make secure calls to the Pipedream API to initiate the account connection flow and retrieve account credentials. If you're running a JavaScript framework like Node.js on the server, you can use the Pipedream SDK.
2. [Add the Pipedream SDK to your frontend](#connect-your-account-from-the-frontend). This lets you start the account connection flow for your end users.
2. [Add the Pipedream SDK to your frontend](#connect-your-account-from-the-frontend) or deliver a URL to your users to start the account connection flow.

We'll walk through these steps below, using [an example Next.js app](https://github.com/PipedreamHQ/pipedream-connect-examples/tree/master/next-app/). To follow along, clone [the repo](https://github.com/PipedreamHQ/pipedream-connect-examples/) and follow the instructions in [the app's `README`](https://github.com/PipedreamHQ/pipedream-connect-examples/tree/master/next-app/). That will run the app on `localhost:3000`.

Expand All @@ -86,8 +86,8 @@ If you're building your own app, you'll need to provide these values to the envi

You need to secure specific operations, for example:

- You need to initiate the account connection flow for your end users. In Pipedream Connect, **you exchange your project keys for a short-lived token that allows a specific user to connect a specific app**, and return that token to your frontend.
- If you expose your Pipedream project keys directly to the frontend, anyone could initiate the account connection flow for any user, and you'd be charged for those accounts.
- You need to initiate the account connection flow for your end users. In Pipedream Connect, **you exchange your project keys for a short-lived token that allows a specific user to connect a specific app**, and return either that token or the `connect_link_url` to your frontend.
- If you expose your Pipedream project keys directly to the frontend, anyone could initiate the account connection flow for any user.
- You need to retrieve account credentials for your end users. Again, this should happen securely on your server, not in the frontend, to protect your users' data.

</Callout>
Expand Down Expand Up @@ -489,7 +489,7 @@ class Client
"Basic #{encoded}"
end

def connect_token_create(app_slug, oauth_app_id, external_id)
def connect_token_create(external_id)
uri = URI("#{@base_url}/v1/connect/tokens")
req = Net::HTTP::Post.new(uri)
req['Authorization'] = authorization_header
Expand All @@ -516,7 +516,7 @@ response = client.connect_token_create(connect_token_opts[:external_id])
</Tabs.Tab>
</Tabs>

In our Next.js app, we call the `serverConnectTokenCreate` method from the frontend to retrieve a token **for a specific user, and a specific app**.
In our Next.js app, we call the `serverConnectTokenCreate` method from the frontend to retrieve a token **for a specific user**.

```typescript
import { serverConnectTokenCreate } from "./server"
Expand All @@ -528,8 +528,13 @@ const { token, expires_at } = await serverConnectTokenCreate({

If you're using a different server / API framework, you'll need to make secure calls to that API to create a new token for your users. For example, you might validate a user's session, then call the Pipedream API to create a new token for that user.

### Connect your account from the frontend
### Connect your account

To actually connect an account, you have two options:
1. [Use the Pipedream SDK](#use-the-pipedream-sdk-in-your-frontend) in your frontend
2. [Use Connect Link](#use-connect-link) to deliver a hosted URL to your user

#### Use the Pipedream SDK in your frontend
First, install the [Pipedream SDK](https://www.npmjs.com/package/@pipedream/sdk) in your frontend:

```bash
Expand Down Expand Up @@ -569,6 +574,19 @@ export default function Home() {

Press that button to connect an account for the app you configured.

#### Use Connect Link
- Avoid any frontend implementation
- If you aren't able to execute JavaScript or open an iFrame in your frontend, you can use the `connect_link_url` that's returned from the `connectTokenCreate` method to deliver a URL to your users.
- Before returning the URL to your user, you'll need to include the `app` on the URL. For example, see below.
- Users can open this URL in a browser window to connect their account.

```
https://pipedream.com/_static/connect.html?token={token}&connectLink=true&app={appSlug}
```

**To test this code, check out this workflow:**
[https://pipedream.com/new?h=tch_6Lf9Dn](https://pipedream.com/new?h=tch_6Lf9Dn)

### Retrieve the credentials from the backend

Once the user connects an account, you can retrieve their credentials from your backend with your project keys.
Expand Down
Loading