This topic was automatically generated from Slack. You can find the original thread here.
@U02A06JPKEH We’re looking to run our workflows using custom OAuth. How can the frontend Connect SDK help us integrate this into our React/Nuxt app?
Our basic use case is to allow end users to connect their Google account and select a specific spreadsheet and worksheet directly from the frontend.
so that an external user can use them to run a workflow which add multiple rows in google sheet
To integrate custom OAuth and let your end users connect their Google account (and select a spreadsheet/worksheet) directly from your React or Nuxt frontend using the Pipedream Connect SDK, here’s a step-by-step guide based on the official documentation: — ## How the Pipedream Connect SDK Helps The Pipedream Connect SDK allows you to: - Let end users securely connect their own Google accounts from your frontend (React/Nuxt). - Store and manage those connections on Pipedream, so you can run workflows on behalf of your users with their credentials. - Pass configuration (like spreadsheet/worksheet selection) from your frontend to your workflow. — ## High-Level Flow 1. Generate a short-lived token on your backend for the current user. 2. Use the Connect SDK in your frontend to let the user connect their Google account. 3. Store the returned account ID for the user. 4. Let the user select a spreadsheet/worksheet (either via your UI or by fetching their sheets using the connected account). 5. Invoke your workflow with the user’s account ID and spreadsheet/worksheet info to add rows. — ## Example: React/Nuxt Integration ### 1. Install the SDK bash npm i --save @pipedream/sdk ### 2. Generate a Token on Your Backend When your user is ready to connect their account, generate a token for them on your backend (see docs): // Example backend code (Node.js) const { createConnectToken } = require("@pipedream/sdk/server"); const { token, expires_at } = await createConnectToken({ external_user_id: "your-user-id", // Your user ID }); ### 3. Use the SDK in Your Frontend import { createFrontendClient } from "@pipedream/sdk/browser"; const pd = createFrontendClient(); function connectGoogleAccount() { pd.connectAccount({ app: "google", // App slug for Google token, // Token from your backend onSuccess: ({ id: accountId }) => { // Save this accountId for your user console.log(`Google account connected: ${accountId}`); } }); } - This opens a popup for the user to connect their Google account. - On success, you get an accountId to use in workflow invocations. ### 4. Let User Select Spreadsheet/Worksheet - You can fetch the list of spreadsheets using the Google Sheets API with the user’s connected account. - Present the list in your UI for selection. ### 5. Run Workflow with User’s Auth When running a workflow for your user, pass: - The connected account ID - The selected spreadsheet and worksheet info - The data to add You can pass these as parameters when invoking the workflow (see Configuring workflow steps). — ## Notes - When using end user auth, you’ll need to pass configuration (like spreadsheet/worksheet IDs) at runtime, since the connected account is determined dynamically. - In your workflow, reference these fields using step exports. — ## References - Pipedream Connect Docs - Managed Auth Quickstart - Configuring Workflow Steps — If you need more details or a code sample for a specific step (like fetching spreadsheets or adding rows), let me know!
What is the ideal thing here to get the spreadsheet id and worksheet info from REST API’s or from using it in frontend sdk?
To let users select a Google Spreadsheet and worksheet in your app, you have two main options: ### 1. Fetch Spreadsheet/Worksheet Info in the Frontend (using Google APIs) - Pros: - Immediate, interactive user experience. - Lets you build a UI for users to browse and select their files/sheets. - You can use the Connect SDK to get the user’s OAuth token/account, then call Google APIs from your frontend to list spreadsheets and worksheets. - Cons: - You must handle Google API calls in the frontend (requires handling auth tokens securely). - More frontend code to maintain. ### 2. Fetch Spreadsheet/Worksheet Info via Backend/Workflow (using REST APIs in Pipedream) - Pros: - Centralizes all Google API calls in your backend or Pipedream workflow. - Keeps your frontend simpler and avoids exposing tokens. - You can use Pipedream’s pre-built Google integration and actions to list spreadsheets and worksheets using the connected account. - Cons: - Requires building endpoints or workflow steps to fetch and return spreadsheet/worksheet lists to your frontend. - Adds a round-trip to your backend/workflow for selection. — ## Best Practice / Ideal Approach For most use cases, the ideal approach is: - Let users connect their Google account via the frontend using the Connect SDK. - Fetch the list of spreadsheets and worksheets from your backend or Pipedream workflow (using the connected account’s ID), and return that info to your frontend for user selection. Why? - Keeps OAuth tokens and sensitive API calls on the backend/workflow, improving security. - Lets you leverage Pipedream’s Google integration and actions (no need to implement Google API logic in your frontend). - Simplifies your frontend code. — ## How to Implement 1. User connects Google via Connect SDK in frontend. 2. Frontend sends the connected account ID to your backend or Pipedream workflow. 3. Backend/workflow uses the account ID to call Google APIs (via Pipedream) to list spreadsheets and worksheets. 4. Backend/workflow returns the list to the frontend for user selection. 5. Frontend sends the selected spreadsheet/worksheet info back to backend/workflow to run the workflow (e.g., add rows). — ## Summary Table | Approach | Security | User Experience | Code Complexity | |-------------------------------|----------|-----------------|-----------------| | Frontend (direct Google API) | Lower | High | Higher | | Backend/Workflow (Pipedream) | Higher | High | Lower | Recommendation: Use the backend/workflow (Pipedream) to fetch spreadsheet and worksheet info after the user connects their account in the frontend. — If you need example code for listing spreadsheets/worksheets in a Pipedream component, let me know!