Your backend can pass a Connect token to the frontend to make those calls too
Just like this right? server pass a token and expire at, and frontend sdk use this token to make connection, make proxy calls, and everything?
Yea that generally looks / sounds right
Thank you!
Assuming serverConnetTokenCreate is a server function, you’d want to call it inside the tokenCallback.
This is because the token returned by the server will expire after several hours. When that happens, the sdk calls tokenCallback again to fetch a new token. In the current code snippet, it will just return the expired token.
This serverConnectTOkeCreate is to call my server to create a new token that i can use for connect in my frontend. I thought everytime when my external user want to connect to an app, we generate a new token for it solely for the connection purpose (invoke the SDK).
Are you saying that there is better way to maintain a valid refreshed token on my frontend? Whats the benefit of doing that? Side note: I will need to call proxy.post in my frontend which (I suppose) will need a valid token on my frontend. But ive not figured out how to do so using this client
const client = new PipedreamClient({
externalUserId: user?.id,
tokenCallback: () => connectToken,
});
to do that in my frontend
If you call serverConnetTokenCreate in the tokenCallback it should handle it for you and make sure you always have a valid token. Whenever the token is expired, it’ll call your backend to fetch a new token.
Like this?
const client = new PipedreamClient({
externalUserId: external_user_id,
tokenCallback: serverConnectTokenCreate,
});
BUt in this way, how do i get the connectToken and use this in the following
client.connectAccount({
app: appSlug,
token: connectToken,
onSuccess: async (account) => {
console.log(`${appName} successfully connected: ${account.id}`);
// Verify connection using your function
const isConnected = await isUserConnectedOneApp(user.id, appSlug);
console.log(`Connection verified for ${appName}: ${isConnected}`);
// Update connected status
setConnectedApps((prev) => ({ ...prev, [appSlug]: isConnected }));
// Optionally reload all connection statuses
loadUserAndAccounts();
},
onError: (err) => {
console.error(`${appName} connection error: ${err.message}`);
alert(`Failed to connect ${appName}: ${err.message}`);
},
});
Where I need to access the connectToken?
tokenCallback needs to return the token string. So you need to have a function that calls your server, then extracts the actual token and returns it.
If you do this, then I believe calling client.connectAccount doesn’t need the token. The sdk handles it (by calling tokenCallback when needed).
And i can just initialize the client for 1 external user only once, and let it persist globally, reuse it for many whatever purpose (such as making calls, getting accounts,etc.), and it will auto call serverConnectTokenCreate whenever it is needed, right?
Like this will save many frontend backend communication on token creation, if previous token is not expired yet right?
do you have any documentation on the frontend client?
const client = new PipedreamClient({
externalUserId: external_user_id,
tokenCallback: serverConnectTokenCreate,
});
It looks like everything you show is the server side one. Any instruction on how to use frontned client like the above?
I pinged the team about the missing docs. But you can see an example in this readme here.