From 7142efc4baa11853d3be905b9570119b5a00a5c8 Mon Sep 17 00:00:00 2001
From: Ivan Starkov <istarkov@gmail.com>
Date: Wed, 29 Nov 2023 13:33:50 +0300
Subject: [PATCH] feat: Pass cookies and requestUrl to n8n (#2662)

## Description

Ref #2661

This allows us to extract posthog (and probably other trackers) cookies
distinct_id for the user on the server side
And then using aliasing to use in n8n schemas
https://posthog.com/docs/product-analytics/identify#alias-assigning-multiple-distinct-ids-to-the-same-user

See corresponding n8n schemas in saas repo



## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
---
 apps/builder/app/routes/n8n.$.tsx | 12 ++++++++++++
 apps/builder/package.json         |  1 +
 pnpm-lock.yaml                    |  8 ++++++++
 3 files changed, 21 insertions(+)

diff --git a/apps/builder/app/routes/n8n.$.tsx b/apps/builder/app/routes/n8n.$.tsx
index 67a3700400..85452d335c 100644
--- a/apps/builder/app/routes/n8n.$.tsx
+++ b/apps/builder/app/routes/n8n.$.tsx
@@ -5,6 +5,7 @@ import { findAuthenticatedUser } from "~/services/auth.server";
 import { loginPath } from "~/shared/router-utils";
 import env from "~/env/env.server";
 import { type LoaderArgs, json } from "@remix-run/server-runtime";
+import cookie from "cookie";
 
 const zN8NResponse = z.union([
   z.object({
@@ -52,6 +53,14 @@ export const loader = async ({ request, params }: LoaderArgs) => {
     .join("/");
   n8nWebhookUrl.search = new URL(request.url).search;
 
+  const requestUrl = new URL(request.url);
+  const host =
+    request.headers.get("x-forwarded-host") ?? request.headers.get("host");
+
+  if (host != null) {
+    requestUrl.host = host;
+  }
+
   const response = await fetch(n8nWebhookUrl.href, {
     method: "POST",
     headers: {
@@ -60,6 +69,9 @@ export const loader = async ({ request, params }: LoaderArgs) => {
     },
     body: JSON.stringify({
       userId: user.id,
+      // For anonymous tracking like posthog
+      cookies: cookie.parse(request.headers.get("cookie") ?? ""),
+      requestUrl: requestUrl.href,
     }),
   });
 
diff --git a/apps/builder/package.json b/apps/builder/package.json
index 44ff734088..52113ad428 100644
--- a/apps/builder/package.json
+++ b/apps/builder/package.json
@@ -72,6 +72,7 @@
     "@webstudio-is/trpc-interface": "workspace:*",
     "change-case": "^5.0.2",
     "colord": "^2.9.3",
+    "cookie": "^0.6.0",
     "date-fns": "^2.30.0",
     "debug": "^4.3.4",
     "detect-font": "^0.1.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9052ef8cbf..676e5e44f6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -217,6 +217,9 @@ importers:
       colord:
         specifier: ^2.9.3
         version: 2.9.3
+      cookie:
+        specifier: ^0.6.0
+        version: 0.6.0
       date-fns:
         specifier: ^2.30.0
         version: 2.30.0
@@ -9576,6 +9579,11 @@ packages:
     resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==}
     engines: {node: '>= 0.6'}
 
+  /cookie@0.6.0:
+    resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
   /copy-to-clipboard@3.3.1:
     resolution: {integrity: sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==}
     dependencies: