Skip to main content

How to Reconnect Broken Plaid Connections with the Quiltt API

Due to changes in auth credentials, or changes from the provider, some connections will be left in a broken state where the user has to repair the connection. This guide aims to provide you with a way to allow your users to repair these connections.

This guide assumes that you followed along our previous guide, How to Implement Plaid Link to build the PlaidConnectWidget component.

Since we’ve built the PlaidConnectWidget to be very modular, this reconnect button will be much simpler.

The most important part of this component is to pass the connectionId as a prop. Check out the Plaid Docs for initializing Link to see other props that can be passed for configuring Link in Update Mode. However, the connectionId is the only prop that is required to open Connect in update mode.

If successful, the record.linkToken returned by the mutation will be used to open the widget in update mode to update a member’s credentials.


AnchorThe Component

import * as React from 'react'
import PlaidConnectWidget from './PlaidConnectWidget'
const PlaidNewConnectionButton = ({ connectionId, features = undefined, ...buttonProps }) => {
const linkOptions = {
connectionId,
features,
}
const handleLoad = () => {
// Do something onLoad.
}
const handleEvent = (eventName, metadata) => {
// Do something here. Typically, you would want to refetch the data after a successful reconnection.
}
const handleSuccess = (publicToken, metadata) => {
// Do something with the onSuccess metadata.
}
const handleExit = () => {
// Do something onExit.
}
return (
<PlaidConnectWidget
onLoad={handleLoad}
onEvent={handleEvent}
onSuccess={handleSuccess}
onExit={handleExit}
{...buttonProps}
{...linkOptions}
>
Reconnect
</PlaidConnectWidget>
)
}
export default PlaidNewConnectionButton