From 721a3d5b3cb2e8b0dbe21fd9546859e2eac3ce4c Mon Sep 17 00:00:00 2001
From: Ben White <ben@posthog.com>
Date: Wed, 24 Apr 2024 13:36:39 +0200
Subject: [PATCH] chore: Update nextjs project to have more realistic controls
 (#1151)

---
 README.md                                     |  16 +-
 package.json                                  |   5 +-
 playground/nextjs/.gitignore                  |   2 +
 playground/nextjs/package.json                |   7 +-
 playground/nextjs/pages/_app.tsx              |  23 ++-
 playground/nextjs/pages/_document.tsx         |   3 +-
 playground/nextjs/pages/animations.tsx        |  57 -------
 playground/nextjs/pages/api/auth/login.ts     |  16 ++
 playground/nextjs/pages/api/auth/logout.ts    |  13 ++
 playground/nextjs/pages/iframe.tsx            |  41 -----
 playground/nextjs/pages/index.tsx             | 141 ++++++++----------
 playground/nextjs/pages/long.tsx              |  34 -----
 playground/nextjs/pages/longmain.tsx          |  70 ---------
 playground/nextjs/pages/media.tsx             |  29 ----
 .../pages/replay-examples/animations.tsx      |  46 ++++++
 .../pages/{ => replay-examples}/canvas.tsx    |  13 +-
 .../nextjs/pages/replay-examples/iframe.tsx   |  34 +++++
 .../nextjs/pages/replay-examples/long.tsx     |  27 ++++
 .../nextjs/pages/replay-examples/media.tsx    |  24 +++
 playground/nextjs/pnpm-lock.yaml              |  31 +++-
 playground/nextjs/src/AuthModal.tsx           |  95 ++++++++++++
 playground/nextjs/src/Header.tsx              |  44 ++++++
 playground/nextjs/src/auth.ts                 |  61 ++++++++
 playground/nextjs/src/posthog.ts              |  49 +++++-
 24 files changed, 530 insertions(+), 351 deletions(-)
 delete mode 100644 playground/nextjs/pages/animations.tsx
 create mode 100644 playground/nextjs/pages/api/auth/login.ts
 create mode 100644 playground/nextjs/pages/api/auth/logout.ts
 delete mode 100644 playground/nextjs/pages/iframe.tsx
 delete mode 100644 playground/nextjs/pages/long.tsx
 delete mode 100644 playground/nextjs/pages/longmain.tsx
 delete mode 100644 playground/nextjs/pages/media.tsx
 create mode 100644 playground/nextjs/pages/replay-examples/animations.tsx
 rename playground/nextjs/pages/{ => replay-examples}/canvas.tsx (91%)
 create mode 100644 playground/nextjs/pages/replay-examples/iframe.tsx
 create mode 100644 playground/nextjs/pages/replay-examples/long.tsx
 create mode 100644 playground/nextjs/pages/replay-examples/media.tsx
 create mode 100644 playground/nextjs/src/AuthModal.tsx
 create mode 100644 playground/nextjs/src/Header.tsx
 create mode 100644 playground/nextjs/src/auth.ts

diff --git a/README.md b/README.md
index 0f974354a..814401078 100644
--- a/README.md
+++ b/README.md
@@ -49,23 +49,15 @@ You can use the create react app setup in `playground/nextjs` to test posthog-js
 
 ## Developing together with another project
 
-Install Yalc to link a local version of `posthog-js` in another JS project: `npm install -g yalc` 
+Install pnpm to link a local version of `posthog-js` in another JS project: `npm install -g pnpm` 
 
 #### Run this to link the local version
 
-- In the `posthog-js` directory: `yalc publish`
-- In the other directory: `yalc add posthog-js`, then install dependencies  
-  (for `posthog` this means: `yalc add posthog-js && pnpm i && pnpm copy-scripts`)
 
-#### Run this to update the linked local version
+- In the `posthog-js` directory: `pnpm link --global`
+- (for `posthog` this means: `pnpm link --global posthog-js && pnpm i && pnpm copy-scripts`)
+- You can then remove the link with `pnpm link --global posthog-js
 
-- In the other directory: `yalc update`, then install dependencies  
-  (for `posthog` this means: `yalc update && pnpm i && pnpm copy-scripts`)
-
-#### Run this to unlink the local version
-
-- In the other directory: `yalc remove posthog-js`, then install dependencies  
-  (for `posthog` this means: `yalc remove posthog-js && pnpm i && pnpm copy-scripts`)
 
 ## Releasing a new version
 
diff --git a/package.json b/package.json
index 3086d7601..d2cf208a2 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
         "start": "pnpm build-react && pnpm build-rollup -w",
         "build": "pnpm build-rollup && pnpm build-react",
         "build-rollup": "rm -rf lib && tsc -b && rollup -c --bundleConfigAsCjs",
-        "build-react": "cd react; pnpm i; pnpm build;",
+        "build-react": "cd react; NODE_ENV=dev pnpm i; pnpm build;",
         "lint": "eslint src && eslint cypress",
         "prettier": "prettier --write src/ functional_tests/",
         "prepublishOnly": "pnpm lint && pnpm test && pnpm build && pnpm test:react",
@@ -20,8 +20,7 @@
         "test:functional": "jest functional_tests",
         "test-watch": "jest --watch src",
         "cypress": "cypress open",
-        "prepare": "husky install",
-        "yalc-publish": "yalc publish"
+        "prepare": "husky install"
     },
     "main": "dist/module.js",
     "module": "dist/es.js",
diff --git a/playground/nextjs/.gitignore b/playground/nextjs/.gitignore
index c87c9b392..81740d43d 100644
--- a/playground/nextjs/.gitignore
+++ b/playground/nextjs/.gitignore
@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.next/
+.yalc
\ No newline at end of file
diff --git a/playground/nextjs/package.json b/playground/nextjs/package.json
index 9182d4fe2..bd9ad14c5 100644
--- a/playground/nextjs/package.json
+++ b/playground/nextjs/package.json
@@ -5,9 +5,10 @@
     "scripts": {
         "clean-react": "cd ../../react && rm -rf ./node_modules/",
         "dev": "pnpm run link-posthog-js && pnpm run clean-react && next dev",
-        "build": "next build",
+        "build": "pnpm run build-posthog-js && pnpm run link-posthog-js && pnpm run clean-react && next build",
         "start": "next start",
         "lint": "next lint",
+        "build-posthog-js": "cd ../../ && NODE_ENV=dev pnpm i && pnpm run build",
         "link-posthog-js": "cd ../../ && pnpm link --global && cd playground/nextjs && pnpm link --global posthog-js"
     },
     "dependencies": {
@@ -15,15 +16,17 @@
         "@types/node": "18.13.0",
         "@types/react": "18.0.28",
         "@types/react-dom": "18.0.10",
+        "cookie": "^0.6.0",
         "eslint": "8.34.0",
         "eslint-config-next": "13.1.6",
         "next": "13.5.6",
-        "posthog-js": "1.120.3",
+        "posthog-js": "1.128.3",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "typescript": "4.9.5"
     },
     "devDependencies": {
+        "@types/cookie": "^0.6.0",
         "autoprefixer": "^10.4.17",
         "postcss": "^8.4.35",
         "tailwindcss": "^3.4.1"
diff --git a/playground/nextjs/pages/_app.tsx b/playground/nextjs/pages/_app.tsx
index 9c4a0e66b..d6d550995 100644
--- a/playground/nextjs/pages/_app.tsx
+++ b/playground/nextjs/pages/_app.tsx
@@ -8,10 +8,22 @@ import posthog from 'posthog-js'
 import { PostHogProvider } from 'posthog-js/react'
 import { CookieBanner } from '@/src/CookieBanner'
 import '@/src/posthog'
+import Head from 'next/head'
+import { PageHeader } from '@/src/Header'
+import { useUser } from '@/src/auth'
+import { posthogHelpers } from '@/src/posthog'
 
 export default function App({ Component, pageProps }: AppProps) {
     const router = useRouter()
 
+    const user = useUser()
+
+    useEffect(() => {
+        if (user) {
+            posthogHelpers.setUser(user)
+        }
+    }, [user])
+
     useEffect(() => {
         // Track page views
         const handleRouteChange = () => posthog.capture('$pageview')
@@ -24,9 +36,16 @@ export default function App({ Component, pageProps }: AppProps) {
 
     return (
         <PostHogProvider client={posthog}>
-            <Component {...pageProps} />
+            <Head>
+                <title>PostHog</title>
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+            </Head>
 
-            <CookieBanner />
+            <main>
+                <PageHeader />
+                <Component {...pageProps} />
+                <CookieBanner />
+            </main>
         </PostHogProvider>
     )
 }
diff --git a/playground/nextjs/pages/_document.tsx b/playground/nextjs/pages/_document.tsx
index 4984c17fa..d586b3595 100644
--- a/playground/nextjs/pages/_document.tsx
+++ b/playground/nextjs/pages/_document.tsx
@@ -5,10 +5,11 @@ export default function Document() {
     return (
         <Html lang="en">
             <Head />
+
             <body>
                 <Main />
-                <NextScript />
             </body>
+            <NextScript />
         </Html>
     )
 }
diff --git a/playground/nextjs/pages/animations.tsx b/playground/nextjs/pages/animations.tsx
deleted file mode 100644
index 73ca0d043..000000000
--- a/playground/nextjs/pages/animations.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import Head from 'next/head'
-import { useFeatureFlagEnabled, usePostHog } from 'posthog-js/react'
-import { useEffect, useState } from 'react'
-import { Player, Controls } from '@lottiefiles/react-lottie-player'
-
-export default function Home() {
-    const posthog = usePostHog()
-
-    return (
-        <>
-            <Head>
-                <title>PostHog</title>
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-            </Head>
-            <main>
-                <h1>Animations</h1>
-                <p>Useful testing for Replay handling heavy animations</p>
-                <Player
-                    src="https://lottie.host/7401522f-2d8b-4049-ad18-eb0edb6af224/CE9lFrNlEH.json"
-                    // className="ph-no-capture"
-                    background="Transparent"
-                    speed={3}
-                    style={{ width: 300, height: 300 }}
-                    direction={1}
-                    // mode="normal"
-                    loop
-                    // controls
-                    autoplay
-                />
-                <Player
-                    src="https://lottie.host/fb187981-8846-4ae9-98db-b95fc6347955/vO2S1YTZMn.json"
-                    // className="ph-no-capture"
-                    background="Transparent"
-                    speed={3}
-                    style={{ width: 300, height: 300 }}
-                    direction={1}
-                    // mode="normal"
-                    loop
-                    // controls
-                    autoplay
-                />
-                <Player
-                    src="https://lottie.host/3239c7de-e4de-4148-830d-e95b7f747f91/vftYOWDcUO.json"
-                    // className="ph-no-capture"
-                    background="Transparent"
-                    speed={3}
-                    style={{ width: 300, height: 300 }}
-                    direction={1}
-                    // mode="normal"
-                    loop
-                    // controls
-                    autoplay
-                />
-            </main>
-        </>
-    )
-}
diff --git a/playground/nextjs/pages/api/auth/login.ts b/playground/nextjs/pages/api/auth/login.ts
new file mode 100644
index 000000000..2c8ecdf9f
--- /dev/null
+++ b/playground/nextjs/pages/api/auth/login.ts
@@ -0,0 +1,16 @@
+import { serialize } from 'cookie'
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+    const sessionData = req.body
+    const encryptedSessionData = JSON.stringify(sessionData)
+
+    const cookie = serialize('session', encryptedSessionData, {
+        httpOnly: false,
+        secure: false,
+        maxAge: 60 * 60 * 24 * 7, // One week
+        path: '/',
+    })
+    res.setHeader('Set-Cookie', cookie)
+    res.status(200).json({ message: 'Successfully set cookie!' })
+}
diff --git a/playground/nextjs/pages/api/auth/logout.ts b/playground/nextjs/pages/api/auth/logout.ts
new file mode 100644
index 000000000..7820928bc
--- /dev/null
+++ b/playground/nextjs/pages/api/auth/logout.ts
@@ -0,0 +1,13 @@
+import { serialize } from 'cookie'
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+    const cookie = serialize('session', '', {
+        httpOnly: false,
+        secure: false,
+        maxAge: 1, // One week
+        path: '/',
+    })
+    res.setHeader('Set-Cookie', cookie)
+    res.status(200).json({ message: 'Successfully cleared cookie!' })
+}
diff --git a/playground/nextjs/pages/iframe.tsx b/playground/nextjs/pages/iframe.tsx
deleted file mode 100644
index f96c427b9..000000000
--- a/playground/nextjs/pages/iframe.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import Head from 'next/head'
-import { usePostHog } from 'posthog-js/react'
-import { useEffect, useState } from 'react'
-
-export default function Home() {
-    const posthog = usePostHog()
-
-    const [otherHost, setOtherHost] = useState('')
-
-    useEffect(() => {
-        setOtherHost(window.location.origin.includes('other-localhost') ? 'localhost' : 'other-localhost')
-    })
-
-    return (
-        <>
-            <Head>
-                <title>PostHog</title>
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-            </Head>
-            <main>
-                <h1>Iframes</h1>
-
-                <h2>Cross origin iframe</h2>
-                <p>
-                    This loads the same page but from <b>other-localhost</b> which you need to add to your hosts file.
-                </p>
-
-                {otherHost && (
-                    <iframe
-                        className="border rounded"
-                        src={`http://${otherHost}:3000/`}
-                        style={{ width: '100%', height: '500px' }}
-                        onLoad={() => {
-                            posthog.capture('iframe loaded')
-                        }}
-                    />
-                )}
-            </main>
-        </>
-    )
-}
diff --git a/playground/nextjs/pages/index.tsx b/playground/nextjs/pages/index.tsx
index 350c01053..f778ee510 100644
--- a/playground/nextjs/pages/index.tsx
+++ b/playground/nextjs/pages/index.tsx
@@ -1,13 +1,11 @@
-import Head from 'next/head'
-import { useFeatureFlagEnabled, usePostHog } from 'posthog-js/react'
+import { useActiveFeatureFlags, usePostHog } from 'posthog-js/react'
 import React, { useEffect, useState } from 'react'
-import Link from 'next/link'
-import { cookieConsentGiven } from '@/src/posthog'
+import { PERSON_PROCESSING_MODE, cookieConsentGiven } from '@/src/posthog'
 
 export default function Home() {
     const posthog = usePostHog()
     const [isClient, setIsClient] = useState(false)
-    const result = useFeatureFlagEnabled('test')
+    const flags = useActiveFeatureFlags()
 
     const [time, setTime] = useState('')
     const consentGiven = cookieConsentGiven()
@@ -27,80 +25,65 @@ export default function Home() {
 
     return (
         <>
-            <Head>
-                <title>PostHog</title>
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-            </Head>
-            <main>
-                <div className="sticky top-0 bg-white border-b mb-4">
-                    <h1 className="m-0">
-                        <b>PostHog</b> React
-                    </h1>
-                </div>
-
-                <p>The current time is {time}</p>
-
-                <div className="flex items-center gap-2 flex-wrap">
-                    <button onClick={() => posthog.capture('Clicked button')}>Capture event</button>
-                    <button data-attr="autocapture-button">Autocapture buttons</button>
-                    <a className="Button" data-attr="autocapture-button" href="#">
-                        <span>Autocapture a &gt; span</span>
-                    </a>
-
-                    <button className="ph-no-capture">Ignore certain elements</button>
-
-                    <button onClick={() => posthog?.identify('user-' + randomID())}>Identify</button>
-
-                    <button
-                        onClick={() =>
-                            posthog?.setPersonProperties({
-                                email: `user-${randomID()}@posthog.com`,
-                            })
-                        }
-                    >
-                        Set user properties
-                    </button>
-
-                    <button onClick={() => posthog?.reset()}>Reset</button>
-                </div>
-
-                <div className="flex items-center gap-2">
-                    <Link href="/animations">Animations</Link>
-                    <Link href="/iframe">Iframe</Link>
-                    <Link href="/canvas">Canvas</Link>
-                    <Link href="/media">Media</Link>
-                    <Link href="/long">Long</Link>
-                    <Link href="/longmain">Long Main</Link>
-                </div>
-
-                <p>Feature flag response: {JSON.stringify(result)}</p>
-
-                {isClient && (
-                    <>
-                        {!consentGiven && (
-                            <p className="border border-red-900 bg-red-200 rounded p-2">
-                                <b>Consent not given!</b> Session recording, surveys, and autocapture are disabled.
-                            </p>
-                        )}
-
-                        <h2 className="mt-4">PostHog info</h2>
-                        <ul className="text-xs bg-gray-100 rounded border-2 border-gray-800 p-4">
-                            <li className="font-mono">
-                                DistinctID: <b>{posthog.get_distinct_id()}</b>
-                            </li>
-                            <li className="font-mono">
-                                SessionID: <b>{posthog.get_session_id()}</b>
-                            </li>
-                            <code></code>
-                        </ul>
-
-                        <h2 className="mt-4">PostHog config</h2>
-                        <pre className="text-xs bg-gray-100 rounded border-2 border-gray-800 p-4">
-                            <code>{JSON.stringify(posthog.config, null, 2)}</code>
-                        </pre>
-                    </>
-                )}
-            </main>
+            <p className="italic my-2 text-gray-500">The current time is {time}</p>
+
+            <h2>Trigger posthog events</h2>
+            <div className="flex items-center gap-2 flex-wrap">
+                <button onClick={() => posthog.capture('Clicked button')}>Capture event</button>
+                <button data-attr="autocapture-button">Autocapture buttons</button>
+                <a className="Button" data-attr="autocapture-button" href="#">
+                    <span>Autocapture a &gt; span</span>
+                </a>
+
+                <button className="ph-no-capture">Ignore certain elements</button>
+
+                <button
+                    onClick={() =>
+                        posthog?.setPersonProperties({
+                            email: `user-${randomID()}@posthog.com`,
+                        })
+                    }
+                >
+                    Set user properties
+                </button>
+
+                <button onClick={() => posthog?.reset()}>Reset</button>
+            </div>
+
+            {isClient && (
+                <>
+                    {!consentGiven && (
+                        <p className="border border-red-900 bg-red-200 rounded p-2">
+                            <b>Consent not given!</b> Session recording, surveys, and autocapture are disabled.
+                        </p>
+                    )}
+
+                    <h2 className="mt-4">PostHog info</h2>
+                    <ul className="text-xs bg-gray-100 rounded border-2 border-gray-800 p-4 space-y-2">
+                        <li className="font-mono">
+                            Person Mode: <b>{PERSON_PROCESSING_MODE}</b>
+                        </li>
+                        <li className="font-mono">
+                            DistinctID: <b>{posthog.get_distinct_id()}</b>
+                        </li>
+                        <li className="font-mono">
+                            SessionID: <b>{posthog.get_session_id()}</b>
+                        </li>
+
+                        <li className="font-mono">
+                            Active flags:
+                            <pre className="text-xs">
+                                <code>{JSON.stringify(flags, null, 2)}</code>
+                            </pre>
+                        </li>
+                    </ul>
+
+                    <h2 className="mt-4">PostHog config</h2>
+                    <pre className="text-xs bg-gray-100 rounded border-2 border-gray-800 p-4">
+                        <code>{JSON.stringify(posthog.config, null, 2)}</code>
+                    </pre>
+                </>
+            )}
         </>
     )
 }
diff --git a/playground/nextjs/pages/long.tsx b/playground/nextjs/pages/long.tsx
deleted file mode 100644
index e08d77981..000000000
--- a/playground/nextjs/pages/long.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Head from 'next/head'
-import Link from 'next/link'
-import React from 'react'
-
-export default function Home() {
-    return (
-        <>
-            <Head>
-                <title>PostHog</title>
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-            </Head>
-            <main>
-                <h1>A long page</h1>
-                <div className="flex items-center gap-2">
-                    <Link href="/">Home</Link>
-                </div>
-
-                {Array.from({ length: 100 }, (_, i) => (
-                    <p key={i}>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                ))}
-
-                <div className="flex items-center gap-2">
-                    <Link href="/">Home</Link>
-                </div>
-            </main>
-        </>
-    )
-}
diff --git a/playground/nextjs/pages/longmain.tsx b/playground/nextjs/pages/longmain.tsx
deleted file mode 100644
index dcf5fb245..000000000
--- a/playground/nextjs/pages/longmain.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import Head from 'next/head'
-import Link from 'next/link'
-import React, { useEffect } from 'react'
-
-export default function Home() {
-    useEffect(() => {
-        const html = document.querySelector('html')
-        const body = document.querySelector('body')
-        const nextRoot = document.querySelector<HTMLDivElement>('div#__next')
-        if (!html || !body || !nextRoot) return
-        html.style.height = '100%'
-        html.style.overflow = 'hidden'
-        body.style.height = '100%'
-        nextRoot.style.height = '100%'
-        return () => {
-            html.style.height = ''
-            html.style.overflow = ''
-            body.style.height = ''
-            nextRoot.style.height = ''
-        }
-    }, [])
-
-    return (
-        <>
-            <Head>
-                <title>PostHog</title>
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-            </Head>
-            <main
-                id="scroll_element"
-                style={{
-                    height: '100%',
-                    overflow: 'scroll',
-                    margin: 0,
-                    padding: 0,
-                }}
-            >
-                <div
-                    style={{
-                        height: '4000px',
-                        overflow: 'hidden',
-                    }}
-                >
-                    <h1>A long page</h1>
-                    <p>
-                        The window itself does not scroll, the <code>main</code> element does. The content is exactly
-                        4000px tall.
-                    </p>
-                    <div className="flex items-center gap-2">
-                        <Link href="/">Home</Link>
-                    </div>
-
-                    {Array.from({ length: 100 }, (_, i) => (
-                        <p key={i}>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-                            voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-                            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                        </p>
-                    ))}
-
-                    <div className="flex items-center gap-2">
-                        <Link href="/">Home</Link>
-                    </div>
-                </div>
-            </main>
-        </>
-    )
-}
diff --git a/playground/nextjs/pages/media.tsx b/playground/nextjs/pages/media.tsx
deleted file mode 100644
index 963963925..000000000
--- a/playground/nextjs/pages/media.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import Head from 'next/head'
-
-export default function Home() {
-    return (
-        <>
-            <Head>
-                <title>PostHog</title>
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-            </Head>
-            <main>
-                <h1>Video</h1>
-                <p>Useful testing for Replay handling video elements</p>
-                <div style={{margin: 10}}>
-                    <h3>Video</h3>
-                    <video controls={true} style={{width: 500}}>
-                        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
-                    </video>
-                </div>
-
-                <div style={{margin: 10}}>
-                    <h3>Audio</h3>
-                    <audio controls={true}>
-                        <source src="https://github.com/rafaelreis-hotmart/Audio-Sample-files/raw/master/sample.mp3" type="audio/mp3" />
-                    </audio>
-                </div>
-            </main>
-        </>
-    )
-}
diff --git a/playground/nextjs/pages/replay-examples/animations.tsx b/playground/nextjs/pages/replay-examples/animations.tsx
new file mode 100644
index 000000000..8025b303d
--- /dev/null
+++ b/playground/nextjs/pages/replay-examples/animations.tsx
@@ -0,0 +1,46 @@
+import { Player } from '@lottiefiles/react-lottie-player'
+
+export default function Home() {
+    return (
+        <>
+            <h1>Animations</h1>
+            <p>Useful testing for Replay handling heavy animations</p>
+            <Player
+                src="https://lottie.host/7401522f-2d8b-4049-ad18-eb0edb6af224/CE9lFrNlEH.json"
+                // className="ph-no-capture"
+                background="Transparent"
+                speed={3}
+                style={{ width: 300, height: 300 }}
+                direction={1}
+                // mode="normal"
+                loop
+                // controls
+                autoplay
+            />
+            <Player
+                src="https://lottie.host/fb187981-8846-4ae9-98db-b95fc6347955/vO2S1YTZMn.json"
+                // className="ph-no-capture"
+                background="Transparent"
+                speed={3}
+                style={{ width: 300, height: 300 }}
+                direction={1}
+                // mode="normal"
+                loop
+                // controls
+                autoplay
+            />
+            <Player
+                src="https://lottie.host/3239c7de-e4de-4148-830d-e95b7f747f91/vftYOWDcUO.json"
+                // className="ph-no-capture"
+                background="Transparent"
+                speed={3}
+                style={{ width: 300, height: 300 }}
+                direction={1}
+                // mode="normal"
+                loop
+                // controls
+                autoplay
+            />
+        </>
+    )
+}
diff --git a/playground/nextjs/pages/canvas.tsx b/playground/nextjs/pages/replay-examples/canvas.tsx
similarity index 91%
rename from playground/nextjs/pages/canvas.tsx
rename to playground/nextjs/pages/replay-examples/canvas.tsx
index 7c96cd0a8..f24e4a98a 100644
--- a/playground/nextjs/pages/canvas.tsx
+++ b/playground/nextjs/pages/replay-examples/canvas.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import Head from 'next/head'
 import { useEffect, useRef } from 'react'
 
 export default function Canvas() {
@@ -110,15 +109,9 @@ export default function Canvas() {
 
     return (
         <>
-            <Head>
-                <title>PostHog</title>
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-            </Head>
-            <main>
-                <h1>Canvas</h1>
-
-                <canvas ref={ref} style={{ width: '200px', height: '200px', display: 'block' }}></canvas>
-            </main>
+            <h1>Canvas</h1>
+
+            <canvas ref={ref} style={{ width: '200px', height: '200px', display: 'block' }}></canvas>
         </>
     )
 }
diff --git a/playground/nextjs/pages/replay-examples/iframe.tsx b/playground/nextjs/pages/replay-examples/iframe.tsx
new file mode 100644
index 000000000..ca8b6e21b
--- /dev/null
+++ b/playground/nextjs/pages/replay-examples/iframe.tsx
@@ -0,0 +1,34 @@
+import { usePostHog } from 'posthog-js/react'
+import { useEffect, useState } from 'react'
+
+export default function Home() {
+    const posthog = usePostHog()
+
+    const [otherHost, setOtherHost] = useState('')
+
+    useEffect(() => {
+        setOtherHost(window.location.origin.includes('other-localhost') ? 'localhost' : 'other-localhost')
+    })
+
+    return (
+        <>
+            <h1>Iframes</h1>
+
+            <h2>Cross origin iframe</h2>
+            <p>
+                This loads the same page but from <b>other-localhost</b> which you need to add to your hosts file.
+            </p>
+
+            {otherHost && (
+                <iframe
+                    className="border rounded"
+                    src={`http://${otherHost}:3000/`}
+                    style={{ width: '100%', height: '500px' }}
+                    onLoad={() => {
+                        posthog.capture('iframe loaded')
+                    }}
+                />
+            )}
+        </>
+    )
+}
diff --git a/playground/nextjs/pages/replay-examples/long.tsx b/playground/nextjs/pages/replay-examples/long.tsx
new file mode 100644
index 000000000..de33d43b9
--- /dev/null
+++ b/playground/nextjs/pages/replay-examples/long.tsx
@@ -0,0 +1,27 @@
+import Link from 'next/link'
+import React from 'react'
+
+export default function Home() {
+    return (
+        <>
+            <h1>A long page</h1>
+            <div className="flex items-center gap-2">
+                <Link href="/">Home</Link>
+            </div>
+
+            {Array.from({ length: 100 }, (_, i) => (
+                <p key={i}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            ))}
+
+            <div className="flex items-center gap-2">
+                <Link href="/">Home</Link>
+            </div>
+        </>
+    )
+}
diff --git a/playground/nextjs/pages/replay-examples/media.tsx b/playground/nextjs/pages/replay-examples/media.tsx
new file mode 100644
index 000000000..97b886c56
--- /dev/null
+++ b/playground/nextjs/pages/replay-examples/media.tsx
@@ -0,0 +1,24 @@
+export default function Media() {
+    return (
+        <>
+            <h1>Video</h1>
+            <p>Useful testing for Replay handling video elements</p>
+            <div style={{ margin: 10 }}>
+                <h3>Video</h3>
+                <video controls={true} style={{ width: 500 }}>
+                    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
+                </video>
+            </div>
+
+            <div style={{ margin: 10 }}>
+                <h3>Audio</h3>
+                <audio controls={true}>
+                    <source
+                        src="https://github.com/rafaelreis-hotmart/Audio-Sample-files/raw/master/sample.mp3"
+                        type="audio/mp3"
+                    />
+                </audio>
+            </div>
+        </>
+    )
+}
diff --git a/playground/nextjs/pnpm-lock.yaml b/playground/nextjs/pnpm-lock.yaml
index 3565b880a..c79d028f3 100644
--- a/playground/nextjs/pnpm-lock.yaml
+++ b/playground/nextjs/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
 
 settings:
   autoInstallPeers: true
@@ -17,6 +17,9 @@ dependencies:
   '@types/react-dom':
     specifier: 18.0.10
     version: 18.0.10
+  cookie:
+    specifier: ^0.6.0
+    version: 0.6.0
   eslint:
     specifier: 8.34.0
     version: 8.34.0
@@ -27,8 +30,8 @@ dependencies:
     specifier: 13.5.6
     version: 13.5.6(react-dom@18.2.0)(react@18.2.0)
   posthog-js:
-    specifier: 1.120.3
-    version: 1.120.3
+    specifier: 1.128.3
+    version: 1.128.3
   react:
     specifier: 18.2.0
     version: 18.2.0
@@ -40,6 +43,9 @@ dependencies:
     version: 4.9.5
 
 devDependencies:
+  '@types/cookie':
+    specifier: ^0.6.0
+    version: 0.6.0
   autoprefixer:
     specifier: ^10.4.17
     version: 10.4.17(postcss@8.4.35)
@@ -295,6 +301,10 @@ packages:
       tslib: 2.6.0
     dev: false
 
+  /@types/cookie@0.6.0:
+    resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
+    dev: true
+
   /@types/json5@0.0.29:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: false
@@ -699,6 +709,11 @@ packages:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: false
 
+  /cookie@0.6.0:
+    resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -2249,15 +2264,15 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
-  /posthog-js@1.120.3:
-    resolution: {integrity: sha512-J5o2aRNIrSCt6/kei+UN9RhTpZDa9bcRkwkauhjrtCz9Ne3yjCP9phfIlP5HJrJBpNGIzK/YlFuy8/57Tw+piQ==}
+  /posthog-js@1.128.3:
+    resolution: {integrity: sha512-ES5FLTw/u2JTHocJZJtJibVkbk+xc4u9XTxWQPGE1ZVbUOH4lVjSXbEtI56fJvSJaaAuGSQ43kB5crJZ2gNG+g==}
     dependencies:
       fflate: 0.4.8
-      preact: 10.20.1
+      preact: 10.20.2
     dev: false
 
-  /preact@10.20.1:
-    resolution: {integrity: sha512-JIFjgFg9B2qnOoGiYMVBtrcFxHqn+dNXbq76bVmcaHYJFYR4lW67AOcXgAYQQTDYXDOg/kTZrKPNCdRgJ2UJmw==}
+  /preact@10.20.2:
+    resolution: {integrity: sha512-S1d1ernz3KQ+Y2awUxKakpfOg2CEmJmwOP+6igPx6dgr6pgDvenqYviyokWso2rhHvGtTlWWnJDa7RaPbQerTg==}
     dev: false
 
   /prelude-ls@1.2.1:
diff --git a/playground/nextjs/src/AuthModal.tsx b/playground/nextjs/src/AuthModal.tsx
new file mode 100644
index 000000000..c459be680
--- /dev/null
+++ b/playground/nextjs/src/AuthModal.tsx
@@ -0,0 +1,95 @@
+/* eslint-disable compat/compat */
+import { useState } from 'react'
+import { getUser, TEAMS, User, useUser } from './auth'
+import { posthogHelpers } from './posthog'
+
+export const AuthModal = ({ onClose }: { onClose: () => void }) => {
+    const actualUser = useUser()
+    const [user, setUser] = useState<Partial<User>>(getUser() ?? {})
+
+    async function handleLogin() {
+        const response = await fetch('/api/auth/login', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(user),
+        })
+
+        if (response.ok) {
+            posthogHelpers.onLogin(user as User)
+            onClose()
+        } else {
+            alert('Login failed')
+            // Handle errors
+        }
+    }
+
+    async function handleLogout() {
+        const response = await fetch('/api/auth/logout', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: '',
+        })
+
+        if (response.ok) {
+            posthogHelpers.onLogout()
+            onClose()
+        } else {
+            alert('Logout failed')
+            // Handle errors
+        }
+    }
+
+    return (
+        <div className={'fixed inset-0 z-10 flex justify-center items-center'}>
+            <div className="absolute inset-0 bg-slate-500 opacity-70 -z-10" onClick={() => onClose()} />
+
+            <div className="mx-auto w-[30rem] bg-white rounded shadow-md p-4">
+                <h2>User account</h2>
+
+                <form className="flex flex-col gap-2" onSubmit={(e) => e.preventDefault()}>
+                    <input
+                        className="border rounded p-2"
+                        type="email"
+                        name="email"
+                        placeholder="Email"
+                        required
+                        value={user.email}
+                        onChange={(e) => setUser({ ...user, email: e.target.value })}
+                    />
+                    <input
+                        className="border rounded p-2"
+                        type="name"
+                        name="name"
+                        placeholder="Name"
+                        required
+                        value={user.name}
+                        onChange={(e) => setUser({ ...user, name: e.target.value })}
+                    />
+
+                    <select
+                        name="team"
+                        value={user.team?.id}
+                        onChange={(e) => setUser({ ...user, team: TEAMS.find((t) => t.id === e.target.value) })}
+                        className="border rounded p-2"
+                    >
+                        <option value={undefined}>Please select</option>
+                        {TEAMS.map((team) => (
+                            <option key={team.id} value={team.id}>
+                                {team.name}
+                            </option>
+                        ))}
+                    </select>
+
+                    <div className="flex justify-end gap-2 mt-2">
+                        {actualUser ? <button onClick={() => handleLogout()}>Logout</button> : null}
+                        <div className="flex-1" />
+                        <button onClick={() => onClose()}>Cancel</button>
+                        <button className="button" onClick={() => handleLogin()}>
+                            {actualUser ? 'Update' : 'Login'}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    )
+}
diff --git a/playground/nextjs/src/Header.tsx b/playground/nextjs/src/Header.tsx
new file mode 100644
index 000000000..249b85600
--- /dev/null
+++ b/playground/nextjs/src/Header.tsx
@@ -0,0 +1,44 @@
+import Link from 'next/link'
+import { useState } from 'react'
+import { AuthModal } from './AuthModal'
+import { useUser } from './auth'
+export const PageHeader = () => {
+    const user = useUser()
+
+    const [showLogin, setShowLogin] = useState(false)
+
+    return (
+        <>
+            <div className="sticky top-0 bg-white border-b mb-4 z-10">
+                <div className="flex items-center gap-2">
+                    <Link href="/">
+                        <h1 className="m-0">
+                            <b>PostHog</b> React
+                        </h1>
+                    </Link>
+
+                    <div className="flex-1" />
+                    <div className="flex items-center gap-2">
+                        <Link href="/replay-examples/animations">Animations</Link>
+                        <Link href="/replay-examples/iframe">Iframe</Link>
+                        <Link href="/replay-examples/canvas">Canvas</Link>
+                        <Link href="/replay-examples/media">Media</Link>
+                        <Link href="/replay-examples/long">Long</Link>
+                    </div>
+
+                    <div>
+                        <button
+                            onClick={() => {
+                                setShowLogin(!showLogin)
+                            }}
+                        >
+                            {user ? `Hi, ${user.name}` : 'Login'}
+                        </button>
+                    </div>
+                </div>
+
+                {showLogin ? <AuthModal onClose={() => setShowLogin(false)} /> : null}
+            </div>
+        </>
+    )
+}
diff --git a/playground/nextjs/src/auth.ts b/playground/nextjs/src/auth.ts
new file mode 100644
index 000000000..6a0f28405
--- /dev/null
+++ b/playground/nextjs/src/auth.ts
@@ -0,0 +1,61 @@
+import { parse } from 'cookie'
+import { useEffect, useState } from 'react'
+
+export type Team = {
+    name: string
+    id: string
+}
+
+export type User = {
+    email: string
+    name: string
+    team?: Team
+}
+
+export const TEAMS: Team[] = [
+    {
+        id: 'team-pineapple',
+        name: 'Team Pineapple',
+    },
+    {
+        id: 'team-taste',
+        name: 'Team Taste',
+    },
+    {
+        id: 'team-onthefence',
+        name: 'Team OnTheFence',
+    },
+]
+
+export const getUser = (): User | null | undefined => {
+    if (typeof document !== 'undefined') {
+        const sessionCookie = parse(document.cookie)?.session
+        return sessionCookie ? (JSON.parse(sessionCookie) as User) : null
+    }
+
+    return undefined
+}
+
+export const useUser = () => {
+    // NOTE: This is hacky but its just meant to be a simple example
+    const [user, setUser] = useState<User | null | undefined>(undefined)
+
+    useEffect(() => {
+        let lastSessionString = ''
+
+        const updateIfChanged = () => {
+            const newSessionString = parse(document.cookie)?.session
+
+            if (newSessionString !== lastSessionString) {
+                setUser(newSessionString ? JSON.parse(newSessionString) : null)
+                lastSessionString = newSessionString
+            }
+        }
+
+        const interval = setInterval(updateIfChanged, 1000)
+        updateIfChanged()
+        return () => clearInterval(interval)
+    }, [])
+
+    return user
+}
diff --git a/playground/nextjs/src/posthog.ts b/playground/nextjs/src/posthog.ts
index aa7c2a590..865d7cfca 100644
--- a/playground/nextjs/src/posthog.ts
+++ b/playground/nextjs/src/posthog.ts
@@ -1,4 +1,8 @@
 import posthog, { PostHogConfig } from 'posthog-js'
+import { User } from './auth'
+
+export const PERSON_PROCESSING_MODE: 'always' | 'identified_only' | 'never' =
+    (process.env.NEXT_PUBLIC_POSTHOG_PERSON_PROCESSING_MODE as any) || 'identified_only'
 
 /**
  * Below is an example of a consent-driven config for PostHog
@@ -33,6 +37,7 @@ export const updatePostHogConsent = (consentGiven: boolean) => {
     posthog.set_config(configForConsent())
 }
 
+
 if (typeof window !== 'undefined') {
     posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || '', {
         api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com',
@@ -41,10 +46,48 @@ if (typeof window !== 'undefined') {
         },
         debug: true,
         scroll_root_selector: ['#scroll_element', 'html'],
-        // persistence: cookieConsentGiven() ? 'localStorage+cookie' : 'memory',
-        person_profiles: 'identified_only',
+        persistence: cookieConsentGiven() ? 'localStorage+cookie' : 'memory',
+        person_profiles: PERSON_PROCESSING_MODE === 'never' ? 'identified_only' : PERSON_PROCESSING_MODE,
         __preview_heatmaps: true,
+        persistence_name: `${process.env.NEXT_PUBLIC_POSTHOG_KEY}_nextjs`,
         ...configForConsent(),
     })
-    ;(window as any).posthog = posthog
+
+    // Help with debugging(window as any).posthog = posthog
+}
+
+export const posthogHelpers = {
+    onLogin: (user: User) => {
+        if (PERSON_PROCESSING_MODE === 'never') {
+            // We just set the user properties instead of identifying them
+            posthogHelpers.setUser(user)
+        } else {
+            posthog.identify(user.email, user)
+        }
+
+        posthog.capture('Logged in')
+    },
+    onLogout: () => {
+        posthog.capture('Logged out')
+        posthog.reset()
+    },
+    setUser: (user: User) => {
+        if (PERSON_PROCESSING_MODE === 'never') {
+            const eventProperties = {
+                person_id: user.email,
+                person_email: user.email,
+                person_name: user.name,
+                team_id: user.team?.id,
+                team_name: user.team?.name,
+            }
+            posthog.register(eventProperties)
+            posthog.setPersonPropertiesForFlags(user)
+
+        } else {
+            // NOTE: Would this always get set?
+            if (user.team) {
+                posthog.group('team', user.team.id, user.team)
+            }
+        }
+    },
 }