How to Connect Supabase to Segment

1// Install via npm
2// npm install @segment/analytics-next
3
4import { AnalyticsBrowser } from '@segment/analytics-next'
5
6export const analytics = AnalyticsBrowser.load({
7  writeKey: process.env.NEXT_PUBLIC_SEGMENT_WRITE_KEY!
8})

1import { createClient } from '@supabase/supabase-js'
2import { analytics } from './segment'
3
4const supabase = createClient(
5  process.env.NEXT_PUBLIC_SUPABASE_URL!,
6  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
7)
8
9supabase.auth.onAuthStateChange(async (event, session) => {
10  if (event === 'SIGNED_IN' && session?.user) {
11    // Link Supabase user ID to Segment profile
12    analytics.identify(session.user.id, {
13      email: session.user.email,
14      provider: session.user.app_metadata?.provider,
15      created_at: session.user.created_at
16    })
17
18    analytics.track('User Signed In', {
19      method: session.user.app_metadata?.provider ?? 'email',
20      user_id: session.user.id
21    })
22  }
23
24  if (event === 'SIGNED_OUT') {
25    analytics.track('User Signed Out')
26    analytics.reset() // Clear Segment identity
27  }
28})

1// supabase/functions/segment-track/index.ts
2import { corsHeaders } from '../_shared/cors.ts'
3
4Deno.serve(async (req) => {
5  if (req.method === 'OPTIONS') {
6    return new Response('ok', { headers: corsHeaders })
7  }
8
9  const SEGMENT_WRITE_KEY = Deno.env.get('SEGMENT_WRITE_KEY')!
10  const payload = await req.json()
11
12  const segmentEvent = {
13    userId: payload.user_id || payload.record?.user_id,
14    event: payload.event_name || 'Database Event',
15    properties: {
16      table: payload.table,
17      type: payload.type,
18      ...payload.record
19    },
20    timestamp: new Date().toISOString()
21  }
22
23  const response = await fetch('https://api.segment.io/v1/track', {
24    method: 'POST',
25    headers: {
26      'Content-Type': 'application/json',
27      'Authorization': `Basic ${btoa(SEGMENT_WRITE_KEY + ':')}`
28    },
29    body: JSON.stringify(segmentEvent)
30  })
31
32  return new Response(
33    JSON.stringify({ success: response.ok }),
34    { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
35  )
36})

1-- Alternatively, create the webhook via SQL
2select
3  supabase_functions.http_request(
4    'https://<project-ref>.supabase.co/functions/v1/segment-track',
5    'POST',
6    '{"Content-Type": "application/json"}',
7    '{}',
8    '5000'
9  );

1import { analytics } from './segment'
2import { createClient } from '@supabase/supabase-js'
3
4const supabase = createClient(
5  process.env.NEXT_PUBLIC_SUPABASE_URL!,
6  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
7)
8
9async function handleCreateProject(projectName: string) {
10  const { data: { user } } = await supabase.auth.getUser()
11
12  // Insert into Supabase
13  const { data, error } = await supabase
14    .from('projects')
15    .insert({ name: projectName, user_id: user?.id })
16    .select()
17    .single()
18
19  if (!error && data) {
20    // Track in Segment
21    analytics.track('Project Created', {
22      project_id: data.id,
23      project_name: projectName,
24      user_id: user?.id
25    })
26  }
27}