---
title: "Client Identity Sync"
description: "Mirror the server-side user identity into client-side logs by watching the Better Auth session and calling setIdentity."
canonical_url: "https://www.evlog.dev/use-cases/better-auth/client-sync"
---
# Client Identity Sync

> Mirror the server-side user identity into client-side logs by watching the Better Auth session and calling setIdentity.

The middleware identifies users on the server. To get the same identity on **client-side logs** (clicks, navigation, errors caught in the browser), watch the Better Auth session and forward the user to evlog's client identity store.

## Vue / Nuxt

```typescript [composables/useAuthIdentity.ts]
import { authClient } from '~/lib/auth-client'

export function useAuthIdentity() {
  const session = authClient.useSession()

  watch(() => session.value?.data?.user, (user) => {
    if (user) {
      setIdentity({ userId: user.id, userName: user.name })
    } else {
      clearIdentity()
    }
  }, { immediate: true })
}
```

Call it once in your root layout:

```vue [app.vue]
<script setup>
useAuthIdentity()
</script>
```

## React

```tsx [hooks/useAuthIdentity.tsx]
import { useEffect } from 'react'
import { setIdentity, clearIdentity } from 'evlog/http'
import { authClient } from '@/lib/auth-client'

export function useAuthIdentity() {
  const { data } = authClient.useSession()

  useEffect(() => {
    if (data?.user) {
      setIdentity({ userId: data.user.id, userName: data.user.name })
    } else {
      clearIdentity()
    }
  }, [data?.user?.id])
}
```

Wire it up at the root of your app (in `_app.tsx`, the root layout, or a top-level provider).

## Svelte

```typescript [src/lib/auth-identity.ts]
import { setIdentity, clearIdentity } from 'evlog/http'
import { authClient } from '$lib/auth-client'

export function setupAuthIdentity() {
  const session = authClient.useSession()

  session.subscribe(({ data }) => {
    if (data?.user) {
      setIdentity({ userId: data.user.id, userName: data.user.name })
    } else {
      clearIdentity()
    }
  })
}
```

Run `setupAuthIdentity()` once when the app boots.

## What the browser sends

Client-side logs now include the user identity:

```json [Client Log]
{
  "level": "info",
  "tag": "checkout",
  "message": "User clicked checkout",
  "userId": "QBX9tPjJQExWawAbNll75",
  "userName": "Hugo Richard"
}
```

<tip>

`setIdentity` is part of evlog's [client logging](https://www.evlog.dev/use-cases/client-logging) layer. The same fields are picked up by the HTTP drain when client logs are forwarded to your server, so a single user shows up identified across browser **and** API logs.

</tip>

---

- [Overview](https://www.evlog.dev/use-cases/better-auth/overview)
- [Client Logging](https://www.evlog.dev/use-cases/client-logging)


## Sitemap

See the full [sitemap](https://www.evlog.dev/sitemap.md) for all pages.