Identifying Users

"use client"

import { useAnalytics } from "@repo/analytics"
import { useEffect } from "react"

export function UserIdentifier({ user }) {
  const { identify } = useAnalytics()

  useEffect(() => {
    if (user) {
      identify(user.id, {
        email: user.email,
        name: user.name,
        plan: user.plan
      })
    }
  }, [user, identify])

  return null
}

"use client"

import { useAuth } from "@startupkit/auth"
import { useAnalytics } from "@repo/analytics"
import { useEffect } from "react"

export function AuthIdentifier() {
  const { user, isAuthenticated } = useAuth()
  const { identify } = useAnalytics()

  useEffect(() => {
    if (isAuthenticated && user) {
      identify(user.id, {
        email: user.email,
        name: user.name,
        createdAt: user.createdAt
      })
    }
  }, [isAuthenticated, user, identify])

  return null
}

"use client"

import type { ReactNode } from "react"
import { AuthProvider } from "@startupkit/auth"
import { AnalyticsProvider } from "@repo/analytics"
import { analyticsPlugins } from "@/lib/analytics"
import { authClient } from "@/lib/auth"

interface ProvidersProps {
  children: ReactNode
  user?: { id: string; email: string; name?: string }
  flags?: Record<string, boolean | string>
}

export function Providers({ children, user, flags }: ProvidersProps) {
  return (
    <AnalyticsProvider flags={flags} plugins={analyticsPlugins}>
      <AuthProvider 
        user={user}
        authClient={authClient}
        onIdentify={(user) => {
          // This is called when user signs in
          // The AnalyticsProvider handles the identify call
        }}
      >
        {children}
      </AuthProvider>
    </AnalyticsProvider>
  )
}

identify(user.id, {
  // Core info
  email: user.email,
  name: user.name,
  
  // Account info
  plan: "pro",
  role: "admin",
  teamId: team.id,
  
  // Lifecycle
  createdAt: user.createdAt,
  signupSource: "google",
  
  // Usage
  projectCount: 5,
  lastActiveAt: new Date().toISOString()
})

function PlanUpgrade({ newPlan }) {
  const { identify } = useAnalytics()
  const { user } = useAuth()

  const handleUpgrade = async () => {
    await upgradePlan(newPlan)
    
    // Update analytics with new plan
    identify(user.id, {
      plan: newPlan,
      upgradedAt: new Date().toISOString()
    })
  }

  return <button onClick={handleUpgrade}>Upgrade to {newPlan}</button>
}

"use client"

import { useAnalytics } from "@repo/analytics"

export function LogoutButton() {
  const { reset } = useAnalytics()

  const handleLogout = async () => {
    await signOut()
    reset() // Clear analytics identity
  }

  return <button onClick={handleLogout}>Sign Out</button>
}

// Good - necessary for analytics
identify(user.id, {
  plan: user.plan,
  role: user.role,
  createdAt: user.createdAt
})

// Avoid - sensitive data
identify(user.id, {
  ssn: user.ssn,              // Never
  creditCard: user.card,      // Never
  password: user.password,    // Never
  fullAddress: user.address   // Usually unnecessary
})