Why are Cookies Set in the Response Header of 0auth Flow Missing in URL When Browser Returns, Causing Authentication Flow Failure?

Help
1

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

Cookies set in response header of 0auth flow are not present when browser returns to url, blocking auth flow

Hi all, I’ve been stuck for a week now, have traced this to being, near certainly, a pipedream issue.

I am implementing this auth flow with canva: Migration guide for authentication - Canva Apps SDK Documentation

step 1:

Step 2:

  • canva redirects the browser back to the same endpoint, but to the root path, handled by module ‘node’
  • here the cookie is no longer present and for that reason the auth flow fails.

note: module ‘node_2’ is a test endpoint /testme that allows inspection from the browser dev console without redirection.

Step 1 code:

import ** as crypto from "crypto";

export default defineComponent({
  async run({ steps, $ }) {
    // Return data to use it in future steps
    const req = steps.trigger.event
    if (req.path.indexOf('/configuration/start')>-1){
      
      const state = req.query.state
      const nonce = crypto.randomUUID();
      const COOKIE_EXPIRY_MS = 5 ** 60 * 1000; // 5 minutes
      const nonceExpiry = Date.now() + COOKIE_EXPIRY_MS;
      const nonceWithExpiry = JSON.stringify([nonce, nonceExpiry]);
      const cookie = `nonceWithExpiry=${nonceWithExpiry}; Max-Age=${COOKIE_EXPIRY_MS}; SameSite=None; Secure; signed; httpOnly;`
      const headers = {
        'Set-Cookie': cookie,
        'Location': `https://www.canva.com/apps/configure/link?state=${state}&nonce=${nonce}`
      }

      const body = {
        state,
        nonce: nonce,
      };

      await $.respond({
        status: 302,
        headers: headers,
        body:body
      });

      

    }
    return steps.trigger.event
  },
})
2

Hi Mitch, thanks for the detailed bug report, we don’t recommend attempting to perform OAuth in code steps. Instead, you can add an app prop to your code step to connect your accounts.

Then Pipedream handles the OAuth handshake and refresh tokens for you.

3

I assume the issue is that the existing Canva app integration on Pipedream doesn’t support testing/staging environments?

4

good question , canva is pretty early in their sdk development.

I’m sure something could be managed. In this context, how would you see the implementation?

5

I assumed we already had an integration with Canva, but it doesn’t look like we do under https://pipedream.com/apps/canva

We can add it for you, we just need you to fill out this integration request:

6

Then our team will add the OAuth flow definition, and you can use your Canva account in Node.js code steps

7

can you show me how I can use a connected Canva account using the canva app in a Node.js code step to make an authenticated API request?

8

I apologize for the confusion earlier. It seems we currently do not have a Canva integration available on Pipedream. In this case, you can submit an integration request for Canva at this link: New Pipedream Integration Request Once the Canva integration is available, you’ll be able to use it in a Node.js code step to make authenticated API requests.

9

ok, I will request this, and also, I’m needing a fix asap, and the cookie issue is the blocker, the rest is in place.

Is there a way to go about setting a cookie as part of a response to a request that will be saved in the browser and available when the user is immediately redirected back to the same endpoint with different path?

10

No, sorry, like I mentioned before, we do not support OAuth in code steps like the way you’re attempting.

The Pipedream backend will handle the OAuth flow, and then expose the Canva API token through the app prop. That will produce a Canva API key for your account to use in Node.js code steps. Not cookies. Cookies are for frontend sessions only.

can you show me how to use an app prop to send an authenticated API in a Node.js code step?

11

image.png
image.png988×923 48.3 KB

12

steps 3-4 are the ones

13

I apologize for the confusion earlier, as we currently do not have a Canva integration available on Pipedream. However, I can show you a general example of how to use an app prop to send an authenticated API request in a Node.js code step. Let’s assume we have an app called exampleApp: import { axios } from "@pipedream/platform"; export default defineComponent({ props: { exampleApp: { type: "app", app: "exampleApp", }, }, async run({ steps, $ }) { const apiUrl = "https://api.example.com/some/endpoint"; const accessToken = this.exampleApp.$auth.oauth_access_token; const response = await axios($, { method: "GET", url: apiUrl, headers: { Authorization: `Bearer ${accessToken}`, }, }); return response; }, }); In this example, we’re using an app prop called exampleApp to connect to the app. The access token is available at this.exampleApp.$auth.oauth_access_token. We then use the axios constructor from the @pipedream/platform package to make an authenticated API request. Please note that this is just a general example. Once the Canva integration is available, you’ll be able to replace exampleApp with the appropriate Canva app prop.

14

Thanks for the screenshot, but once again the Pipedream backend will take care of that implementation for you. Then you can use the Node.js code shown by Pi to send an authenticated request.

We do not support performing OAuth handshakes within Node.js code steps directly.

15

We just need that integration request form filled out, and we’d be happy to add Canva OAuth support.

16

form is filled out

17

Great, you can follow the progress here:

18

are you saying that setting the cookie as I am aiming to is impossible?

and also what is a reasonable eta to expect?

19

Canva doesn’t authenticate users by cookies, instead they’ll issue a JWT:

When this integration is live, then you’ll be able to connect your Canva account to Pipedream just like any other app integration. I recommend trying the Google Sheets or Slack apps as an example.

After you connect your Canva account, then you’ll be able to leverage this JWT from your Canva account with the Canva API.

20

… but the canva 3rd party 0auth process explicitly requires this cookie based flow, so how will this work without it?