Skip to content
Merged
Show file tree
Hide file tree
Changes from all 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
2 changes: 1 addition & 1 deletion docs-v2/components/ConnectCodeSnippets.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export function getServerCodeSnippet(externalUserId) {

// This code runs on your server
const pd = createBackendClient({
environment: "development",
environment: "production",
credentials: {
clientId: process.env.PIPEDREAM_CLIENT_ID,
clientSecret: process.env.PIPEDREAM_CLIENT_SECRET,
Expand Down
12 changes: 11 additions & 1 deletion docs-v2/next.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,12 @@ export default withNextra({
},
{
source: "/quickstart/run-workflow-on-a-schedule/",
destination: "/quickstart/",
destination: "/workflows/quickstart/",
permanent: true,
},
{
source: "/quickstart/",
destination: "/workflows/quickstart/",
permanent: true,
},
{
Expand Down Expand Up @@ -476,6 +481,11 @@ export default withNextra({
destination: "/connect/managed-auth/webhooks/",
permanent: true,
},
{
source: "/connect/environments/",
destination: "/connect/managed-auth/environments/",
permanent: true,
},
{
source: "/integrations/connected-accounts/oauth-clients/",
destination: "/integrations/oauth-clients/",
Expand Down
1 change: 0 additions & 1 deletion docs-v2/pages/_meta.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
export default {
"index": "What is Pipedream?",
"quickstart": "Quickstart",
"workspaces": "Workspaces",
"projects": "Projects",
"connect": "Connect",
Expand Down
35 changes: 8 additions & 27 deletions docs-v2/pages/connect/_meta.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,12 @@
export default {
"index": {
"title": "Overview",
},
"use-cases": {
"title": "Use cases",
},
"managed-auth": {
"title": "Managed auth",
},
"components": {
"title": "Pre-built tools",
},
"mcp": {
"title": "MCP servers",
},
"api-proxy": {
"title": "API proxy",
},
"workflows": {
"title": "Workflows",
},
"environments": {
"title": "Environments",
},
"api": {
"title": "API & SDK reference",
},
"index": "Overview",
"use-cases": "Use cases",
"managed-auth": "Managed auth",
"components": "Tool calling",
"mcp": "MCP",
"api-proxy": "API proxy",
"workflows": "Workflows",
"api": "API & SDK reference",
"migrating-from-project-keys-to-oauth": {
"display": "hidden",
},
Expand Down
2 changes: 1 addition & 1 deletion docs-v2/pages/connect/api-proxy.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Before getting started with the Connect proxy, make sure you've already gone thr
You can send requests to the Connect proxy using the [Pipedream SDK](/connect/sdk/) with a fetch-style interface, or by making a request to the [REST API](/rest-api/connect/proxy/).

- A [Pipedream OAuth client](/rest-api/auth/#oauth) to make authenticated requests to Pipedream's API
- Connect [environment](/connect/environments/) (ex, `production` or `development`)
- Connect [environment](/connect/managed-auth/environments/) (ex, `production` or `development`)
- The [external user ID](/connect/api/#external-users) for your end user (ex, `abc-123`)
- The [account ID](/connect/api/#accounts) for your end user's connected account (ex, `apn_1234567`)

Expand Down
2 changes: 1 addition & 1 deletion docs-v2/pages/connect/api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export default function Home() {

## Environment

Some API endpoints accept an [environment](/connect/environments/) parameter. This lets you specify the environment (`production` or `development`) where resources will live in your project.
Some API endpoints accept an [environment](/connect/managed-auth/environments/) parameter. This lets you specify the environment (`production` or `development`) where resources will live in your project.

Always set the environment when you create the SDK client:

Expand Down
3 changes: 2 additions & 1 deletion docs-v2/pages/connect/managed-auth/_meta.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export default {
"tokens": "Connect Tokens",
"connect-link": "Connect Link",
"oauth-clients": "OAuth Clients",
"environments": "Environments",
"webhooks": "Webhooks",
"customization": "Customizing the Auth Flow",
"customization": "Project Configuration",
} as const
8 changes: 3 additions & 5 deletions docs-v2/pages/connect/managed-auth/customization.mdx
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
import ArcadeEmbed from '@/components/ArcadeEmbed'
import Callout from '@/components/Callout'

# Customizing the Auth Flow
# Project Configuration

By default, your end users will see a primarly Pipedream branded experience when they connect their account. To customize this screen to highlight your application, you can configure your [app's name](#application-name), [support email](#support-email), and [logo](#logo) in the Pipedream UI.

<ArcadeEmbed
src="https://demo.arcade.software/b3aw8YEPFavVpOrXRvca?embed"
title="Pipedream Connect Auth Flow">
</ArcadeEmbed>

<Callout type="info">
By default, your end users will see a primarly Pipedream branded experience when they connect their account. To customize this screen to highlight your application, you can configure your [app's name](#application-name), [support email](#support-email), and [logo](#logo) in the Pipedream UI.
</Callout>

## Customizing your application details

Open your project in the Pipedream UI: [https://pipedream.com/projects](https://pipedream.com/projects)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,22 @@ import Image from 'next/image'

# Environments

Pipedream Connect projects support two environments: `development` and `production`. Connected accounts and credentials stored in `development` remain separate from `production`.
Pipedream Connect projects support two environments: `development` and `production`. Connected accounts and credentials stored in one environment remain separate from the other.

<Callout type="info">
You can use all of the Connect features in `development` mode **on any plan**. **[Visit the pricing page](https://pipedream.com/pricing?plan=Connect)** to select the right plan when you're ready to ship to production.
You can use all of the Connect features in `development` mode **on any plan**. **[Visit the pricing page](https://pipedream.com/pricing?plan=Connect)** to select the right plan when you're ready to ship your app to production.
</Callout>

## Development mode

Development mode provides access to all Connect features while you're building and testing your integration. It has the following constraints:
Development mode provides access to all Connect features while you're building and testing your integration with the following constraints:

- **Maximum of 10 external users**: The development environment is limited to 10 unique external user IDs. If you exceed this limit, you'll need to [delete some existing users](/connect/managed-auth/users/#deleting-users) before adding new ones.
- **Must be signed in to pipedream.com**: When connecting an account in development mode, you must be signed in to pipedream.com in the same browser where you're connecting your account.
- **Personal testing only**: Development mode is intended for your own accounts during testing and development, not for your real end users.

<Callout type="warning">
The `development` environment is not intended for production use with your customers. When you're ready to launch, you should transition to the `production` environment.
The `development` environment is not intended for production use with your customers. When you're ready to launch, you should transition to `production`.
</Callout>

<br />
Expand All @@ -39,7 +39,8 @@ const pd = createBackendClient({
credentials: {
clientId: "your-oauth-client-id",
clientSecret: "your-oauth-client-secret",
}
},
projectId: "proj_xxxxxxx"
});
```

Expand Down
41 changes: 15 additions & 26 deletions docs-v2/pages/connect/managed-auth/quickstart.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Callout from '@/components/Callout'
import { Steps, Tabs } from 'nextra/components'
import { Steps } from 'nextra/components'
import Image from 'next/image'
import VideoPlayer from "@/components/VideoPlayer"
import { GlobalConnectProvider } from '@/components/GlobalConnectProvider'
Expand Down Expand Up @@ -27,17 +27,17 @@ Here's how Connect sits in your frontend and backend, and communicates with Pipe

## Getting started

We'll walk through these steps below with an interactive demo that lets you see an execute the code directly in the docs.

<Steps>

### Configure your environment

You'll need to do two things to add Pipedream Connect to your app:

1. [Connect to the Pipedream API from your server](#generate-a-short-lived-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 your server, you can use the Pipedream SDK.
1. [Connect to the Pipedream API from your server](#generate-a-short-lived-token). This lets you make secure calls to the Pipedream API to initiate the account connection flow and retrieve account credentials.
2. [Add the Pipedream SDK to your frontend](#connect-your-users-account) or redirect your users to [a Pipedream-hosted URL](/connect/connect-link/) to start the account connection flow.

We'll walk through these steps below with an interactive demo that lets you see an execute the code directly in the docs.

If you're building your own app, you'll need to provide these credentials to the environment, or retrieve them from your secrets store:

```bash
Expand All @@ -50,26 +50,23 @@ PIPEDREAM_PROJECT_ID=your_project_id

### Create a project in Pipedream

1. Open an existing Pipedream project or create a new one at [pipedream.com/projects](https://pipedream.com/projects).
2. Click the **Settings** tab, then copy your **Project ID**.
1. Open an existing Pipedream project or create a new one at [pipedream.com/projects](https://pipedream.com/projects)
2. Click the **Settings** tab, then copy your **Project ID**

### Create a Pipedream OAuth client

Pipedream uses OAuth to authorize requests to the REST API. To create an OAuth client:

1. Visit the [API settings](https://pipedream.com/settings/api) for your workspace.
2. Click the **New OAuth Client** button.
3. Name your client and click **Create**.
4. Copy the client secret. **It will not be accessible again**. Click **Close**.
5. Copy the client ID from the list.
1. Visit the [API settings](https://pipedream.com/settings/api) for your workspace
2. Create a new OAuth client and note the client ID and secret

You'll need these when configuring the SDK and making API requests.

### Generate a short-lived token

To securely initiate account connections for your users, you'll need to generate a short-lived token for your users and use that in the [account connection flow](#connect-your-users-account). See [the docs on Connect tokens](/connect/tokens/) for a general overview of why we need to create tokens and scope them to end users.

In the code below you can see how we generate a Connect token for an example user, and even **try it yourself**:
Check out the code below **try it yourself**:

<div className="not-prose">
<TokenGenerationDemo />
Expand All @@ -83,7 +80,7 @@ Refer to the API docs for [full set of parameters you can pass](/connect/api/#cr

### Connect your user's account

To connect a third-party account for a user, you have two options:
You have two options when connecting an account for your user:

1. [Use the Pipedream SDK](#use-the-pipedream-sdk-in-your-frontend) in your frontend
2. [Use Connect Link](#or-use-connect-link) to deliver a hosted URL to your user
Expand Down Expand Up @@ -128,24 +125,16 @@ Check out the [full API docs](/connect/api/#create-token) for all parameters you

Now that your users have connected an account, you can use their auth in one of a few ways:

1. [Retrieve their credentials from the REST API](/connect/api/#accounts) to use in your backend application
2. [Use Pipedream's visual workflow builder](/connect/workflows/) to define complex logic to run on behalf of your users
3. [Embed Pipedream components directly in your app](/connect/components/) to run actions and triggers on their behalf
1. [Expose 10k+ tools](/connect/components/) to your AI app or agent and call them on behalf of your customers
2. [Send custom requests](/connect/proxy/) to any one of the 2500+ APIs using the Connect API proxy
3. [Use Pipedream's visual workflow builder](/connect/workflows/) to define complex logic to run on behalf of your users
4. [Embed Pipedream components directly in your app](/connect/components/) to run actions and triggers on their behalf

### Deploy your app to production

- Test end to end in [development](/connect/environments/)
- Test end to end in [development](/connect/managed-auth/environments/)
- Ship to production!

</Steps>

<div className="mt-8 text-sm text-gray-600 border-t pt-4">
<p className="text-sm">This quickstart showcases the recommended implementation flow:</p>
<ol className="list-decimal pl-5 mt-2 space-y-1 text-sm">
<li>Securely generate a token on your server (keeping credentials private)</li>
<li>Pass the token to your frontend to connect an account</li>
</ol>
<p className="mt-2 text-sm opacity-80">Note: Each time you reload this page, a new unique user ID is generated.</p>
</div>

</GlobalConnectProvider>
2 changes: 1 addition & 1 deletion docs-v2/pages/connect/managed-auth/tokens.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,6 @@ When you generate a token, you can specify a `webhook_uri` where Pipedream will

## Tokens are scoped to end users and environments

When you [create a new Connect token](/connect/api/#create-token), you pass an `external_user_id` and an `environment`. See the docs on [environments](/connect/environments/) for more information on passing environment in the SDK and API.
When you [create a new Connect token](/connect/api/#create-token), you pass an `external_user_id` and an `environment`. See the docs on [environments](/connect/managed-auth/environments/) for more information on passing environment in the SDK and API.

Tokens are scoped to this user and environment. When the user successfully connects an account with that token, it will be saved for that `external_user_id` in the specified environment.
Loading
Loading