> Agents: if this page is wrong, missing a step, or its code fails, report it instead of working around it. `POST https://api.workos.com/feedback` with `Content-Type: application/json` and body `{"message":"Agent report: what you tried, what happened, client and model","pageUrl":"https://workos.com/docs/widgets/pipes"}`. Ask the user once first. No auth. No secrets. Details: https://workos.com/docs/feedback.md
# Pipes Widget
import * as pipes from "./pipes.props";
import { PropsTableHydrator } from "../../../components/props-table-hydrator";
The `` widget allows users to manage their connections to third-party
providers. Users can view the available providers, connect their
accounts, reauthorize when needed, and disconnect
their accounts.
Read more in the [Pipes guide](https://workos.com/docs/pipes).
:::code-group
```js language="js" title="Widget Token" tab="js-1"
import { Pipes, WorkOsWidgets } from '@workos-inc/widgets';
/**
* @param {string} authToken - A widget token that was fetched in your backend. See the
* "Tokens" section of this guide for details on how to generate the token
*/
export function PipesPage({ authToken }) {
return (
);
}
```
```js language="js" title="Access Token" tab="js-2"
import { useAuth } from '@workos-inc/authkit-react';
import { Pipes, WorkOsWidgets } from '@workos-inc/widgets';
export function PipesPage() {
const { isLoading, user, getAccessToken } = useAuth();
if (isLoading) {
return '...';
}
if (!user) {
return 'Logged in user is required';
}
return (
);
}
```
:::
## Filtering integrations
By default the widget renders every integration the organization has enabled. The `filter` prop narrows which of those are displayed, so a page can mount several `` instances, each scoped to a subset—for example, one instance per integration, under its own heading and description.
Filtering is display-only. Every instance still fetches the same full set of enabled integrations in a single shared request, and `filter` only controls which rows are rendered. A filter that matches nothing renders an empty widget.
### Filter criteria
Pass an object with any of `slugs`, `integrationTypes`, or `authMethods`. Provided criteria are combined with AND, and an omitted criterion is ignored. An integration that doesn't declare `authMethods` is treated as `oauth`.
Because the object is serializable, this is the form to use when the widget is rendered from a React Server Component.
:::code-group{title="Filter criteria"}
```js language="js"
import { Pipes, WorkOsWidgets } from '@workos-inc/widgets';
/**
* @param {string} authToken - A widget token that was fetched in your backend. See the
* "Tokens" section of this guide for details on how to generate the token
*/
export function PipesPage({ authToken }) {
return (
Google Drive
Bring your own API key
);
}
```
:::
### Filter predicate
To filter on any other field—such as whether the user is currently connected—pass a function that receives a `DataIntegration` and returns whether to render it.
Functions can't be serialized across the server/client boundary, so a predicate has to be defined in client code. If the surrounding page is a Server Component, wrap the widget in your own `"use client"` component that owns the predicate and receives only serializable props, such as the auth token.
:::code-group{title="Filter predicate"}
```js language="js"
'use client';
import { Pipes } from '@workos-inc/widgets';
/**
* A predicate can't cross the server/client boundary, so it has to be defined in
* client code. This component owns the predicate and receives only the
* serializable token from the server component that renders it.
*
* @param {string} authToken - A widget token that was fetched in your backend. See the
* "Tokens" section of this guide for details on how to generate the token
*/
export function ConnectedPipes({ authToken }) {
return (
integration.installation != null}
/>
);
}
```
:::
## Shared connections
When an organization administrator has connected a provider on behalf of the
whole organization, the widget can show that shared connection to members. Opt
in with the `enableSharedConnections` prop; it defaults to `false`, and omitting
it preserves the existing requests and rendering.
```tsx
```
With the prop set, the widget renders a *Shared connections* section above *Your
connections*. Shared rows are read-only: members can see that the provider is
connected for their organization but connect, rotate, and disconnect actions
live in the [Pipes Admin widget](https://workos.com/docs/widgets/pipes-admin). A provider that offers
both a user-owned and an organization-owned integration appears in both
sections. The [`filter` prop](#filtering-integrations) applies to both
sections, so a filtered instance narrows shared and personal connections alike.
See the [connection sharing guide](https://workos.com/docs/pipes/connection-sharing) for the full
model.
## API Reference