Is "token expired" a common error after installing SDK on back and front?

Help
21

for example we are sending emails, names and other data from our platform to connected apps. how can user connect and say name from us to go to X field in app

22

I mean how can users match (map) fields from our data to fields in their app? For example, map our ‘name’ field to their ‘first_name’ field, or our ‘email’ to their ‘user_email’. How do they define these mappings in Pipedream after they connect?

23

These mapping are defined by your app

24

Since you have specific apps and fields you want your users to map

25

Btw I don’t believe * will work for allowed_origins

26

hi so im sucsesfully geting token but now i cant make sense on how i can have integrations marketplace or show available integrations.

27

Have you seen the API to list apps?
https://pipedream.com/docs/connect/components/#find-the-app-you-want-to-use

28

yes sir. Im watching demo video rn you recorded. Installed react sdk too.

29

Hi @U05FUC30Q01 i was able to connect frontend. yay. not question remains how do we map fields or how do users map? for example slack, where we need to send notifications how users choose which channel to send to ? or for hubspot which field is email from us which is name?

30

Usually you display the options in your frontend and your users select the option themselves

31

Hmm how? How do i know which fields do they have after connection?

32

Have you tried the Connect Demo app? It can be a very good tool to direct and show the API requests you need

33

Screenshot 2025-07-10 at 21.04.31.png
Screenshot 2025-07-10 at 21.04.31.png3456×1376 655 KB

34

What is that, can you share the context of the current configuration, which API request is it making?

35 
import { ComponentForm, useFrontendClient, useComponent } from "@pipedream/connect-react"
import { useState } from "react"

function MyComponent() {
  const frontendClient = useFrontendClient()
  const [configuredProps, setConfiguredProps] = useState({})

  const { component } = useComponent({
    key: "google_sheets-add-single-row"
  })

  const handleSubmit = async (ctx) => {
    const result = await frontendClient.actionRun({
      externalUserId: "demo-0b9ab177-54f2-4d17-828f-9a77f50562b9",
      actionId: "google_sheets-add-single-row",
      configuredProps: ctx.configuredProps,
    })
    
    // Handle success - show toast, redirect, etc.
  }

  return (
    <div className="max-w-2xl mx-auto p-6">
      <ComponentForm
        externalUserId="demo-0b9ab177-54f2-4d17-828f-9a77f50562b9"
        component={component}
        configuredProps={configuredProps}
        onUpdateConfiguredProps={setConfiguredProps}
        onSubmit={handleSubmit}
      />
    </div>
  )
}
New
8:11
Vakhtang Tchkadua
import { FrontendClientProvider } from "@pipedream/connect-react"
import { createFrontendClient } from "@pipedream/sdk/browser"

export function ClientProvider({ children }) {
  const client = createFrontendClient({
    environment: process.env.PIPEDREAM_PROJECT_ENVIRONMENT
    tokenCallback: async ({ externalUserId }) => {
      // Call your backend to get a Connect token for this user
      const response = await fetch('/api/connect/token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ externalUserId }),
      })
      const { token } = await response.json()
      return token
    },
    externalUserId: "demo-0b9ab177-54f2-4d17-828f-9a77f50562b9", // Your user's unique ID
  })

  return (
    <FrontendClientProvider client={client}>
      {children}
    </FrontendClientProvider>
  )
}
36
37

That just shows the default action tab

38

Hello everyone

39

so I tried to make @pipedream/connect-react work

40

but i get this error