Merge branch 'develop' into feature/wv

Author: incorbador

.github/workflows/deploy-playground-and-test.yml

@@ -12,7 +12,7 @@ on:
 
 jobs:
   deploy:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
 
     steps:
       - name: Checkout code

.github/workflows/test-all.yml

@@ -12,7 +12,7 @@ on:
 jobs:
   test:
     timeout-minutes: 60
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout code
         uses: actions/checkout@v4

examples/nextjs/app/components/TelemetryClient.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { sendEvent, TelemetryEventType } from '@corbado/shared-util';
+import { useEffect, useRef } from 'react';
+
+export function TelemetryClient() {
+  const hasSentTelemetry = useRef(false);
+
+  useEffect(() => {
+    if (hasSentTelemetry.current) return;
+
+    void sendEvent({
+      type: TelemetryEventType.EXAMPLE_APPLICATION_OPENED,
+      payload: {
+        exampleName: 'corbado/javascript/examples/nextjs',
+      },
+      sdkVersion: '3.1.1',
+      sdkName: 'React SDK',
+      identifier: process.env.NEXT_PUBLIC_CORBADO_PROJECT_ID!,
+    });
+
+    hasSentTelemetry.current = true;
+  }, []);
+
+  return null;
+}

examples/nextjs/app/page.tsx

@@ -4,10 +4,12 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Suspense } from 'react';
 import RightIntroSection from './ui/right-intro-section';
+import { TelemetryClient } from './components/TelemetryClient';
 
 export default function Page() {
   return (
     <main className='flex min-h-screen flex-col p-6'>
+      <TelemetryClient />
       <div className='flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52'>
         <Image
           src='/corbado-logo.svg'