How to Obtain an OAuth Token to Display Google Drive Picker Using Pipedream SDK and API?

Help
1

This topic was automatically generated from Slack. You can find the original thread here.

Hey Guys, I need help in one thing that when i connect to google drive using pipedream then i want to show a google drive picker to show his folders and files. Now to show the google drive picker i need OAuth Token but i am not able to get the google drive token from the sdk and api.

Need your help

2

How are you trying to get the OAuth token from the sdk/api?

3

I tried getting the OAuth Token from the API and SDK but i think they dont support giving us the token.
Can you help me in this?
from my frontend i am connecting to google drive after that i want to open a google drive picker for that user.
But i can’t do it without the OAuth Google Drive token.

4

Can you share the code you’re using?

5

Without any sensitive info

6

And are you in the Connect plan?

7

This feature requires the Connect plan, though you can test anything in the development environment in any plan

8

yeah im using dev env and i using free plan as of now.
i am able to connect to google drive but i want to get that Oauth token from pipedream so i can open the picker

“use client”;
import { Button } from “@/components/ui/button”;
import { createFrontendClient } from “@pipedream/sdk/browser”;
import { useEffect, useState } from “react”;

const external_user_id = “65900b51f516229bb1a84de4”;

export default function PipedreamPage() {
const [token, setToken] = useState<string | null>(null);

useEffect(() => {
async function fetchToken() {
const res = await fetch(“/api/pd”, {
method: “POST”,
body: JSON.stringify({ external_user_id }),
headers: {
“Content-Type”: “application/json”,
},
});

  console.log("res =>", res);
  if (res.ok) {
    const { token } = await res.json();
    console.log("token =>", token);
    setToken(token);
  } else {
    console.error("Failed to fetch token");
  }
}

fetchToken();

}, );

const pd = createFrontendClient({
externalUserId: external_user_id,
});

console.log(“pd ===>”, pd);

function connectAccount() {
if (!token) return;

pd.connectAccount({
  app: "google_drive",
  // oauthAppId: process.env.NEXT_PUBLIC_API_KEY, // replace or remove this
  token,
  onSuccess: (data) => {
    debugger;
    console.log(":white_check_mark: Full onSuccess data:", data);
    const { id: accountId } = data;
    console.log(`Account successfully connected: ${accountId}`);
  },
});

}

return (


Connect your account


);
}

9

Thanks, what is the response you’re getting?

10

Just to confirm, are you using a custom OAuth client?

11

Or Pipedream’s client? (it won’t work)

12

I am using pipedream’s client. Can you suggest me a better way to do it?
How can i fit the custom OAuth client fit with pipedream approach.

13

Yeah check this docs: OAuth Clients — Pipedream

14

You’ll have to create a custom OAuth client and use it in order to retrieve the tokens

15

Thanks for sharing this. I really appreciate this.
using the above method Will i get the Oauth token of my connected apps (google drive) and using that token i can open the picker? right? (just wanted to confirm)

16

Yeah I’m not sure if you’d have to implement the account selector, but yes you could by handling the account information

17

Using the email address or something

18

Not the token itself

19

I didn’t get what you said right now.
I use case is simple.
connect to google drive
get the OAuth token from pipedream (<- this is where i am stuck)
open the google drive picker to show files and folders of that drive.
simple

20

Yes you should be able to