# anonymize

Learn how to anonymize an identified user using a standalone function.

This method dissociates the current session from the identified user, serving as the equivalent of the [`anonymize`](/reference/sdk/javascript/api/plug/anonymize) method available on the client side.

You should call this method when a user logs out to start a new anonymous session.

To keep the Croct token in sync with your auth system between requests, pair this with the [`userIdResolver`](with-croct#middleware-options-useridresolver-prop) option in the middleware.

## Signature

This function has the following signature:

```ts
function anonymize(route?: RouteContext): Promise<void>
```

## Example

Here is an example of how to use this function:

**App router — JavaScript**

**components/LogoutButton.jsx**

```jsx
'use client';

import {logout} from '@/app/services';
import {anonymizeUser} from '@/app/actions';

export function LogoutButton() {
  const onClick = async () => {
    // Your logout logic
    await logout();
    // Anonymize the user
    await anonymizeUser();
  };

  return (<button onClick={onClick}>Logout</button>);
}
```

**app/actions.js**

```jsx
'use server';

import {anonymize} from '@croct/plug-next/server';

export async function anonymizeUser() {
  await anonymize();
}
```

**App router — TypeScript**

**components/LogoutButton.tsx**

```tsx
'use client';

import type {ReactElement} from 'react';
import {logout} from '@/app/services';
import {anonymizeUser} from '@/app/actions';

export function LogoutButton(): ReactElement {
  const onClick = async () => {
     // Your logout logic
     await logout();
     // Anonymize the user
     await anonymizeUser();
  };

  return (<button onClick={onClick}>Logout</button>);
};
```

**app/actions.ts**

```tsx
'use server';

import {anonymize} from '@croct/plug-next/server';

export async function anonymizeUser(): Promise<void> {
  await anonymize();
}
```

**Page router — JavaScript**

**components/LogoutButton.jsx**

```jsx
export function LogoutButton() {
  const onClick = async () => {
    await fetch('/api/logout');
  };

  return (<button onClick={onClick}>Logout</button>);
}
```

**pages/api/login.js**

```jsx
import {logout} from '@/app/services';
import {anonymize} from "@croct/plug-next/server";

export default async function handler(req, res) {
  // Your logout logic
  if (await logout()) {
    // Anonymize the user
    await anonymize({req, res});
  }

  res.status(200).end();
}
```

**Page router — TypeScript**

**components/LogoutButton.tsx**

```tsx
import type {ReactElement} from 'react';

export function LogoutButton(): ReactElement {
  const onClick = async () => {
    await fetch('/api/logout');
  };

  return (<button onClick={onClick}>Logout</button>);
}
```

**pages/api/logout.ts**

```tsx
import type {NextApiRequest, NextApiResponse} from 'next';
import {logout} from '@/app/services';
import {anonymize} from "@croct/plug-next/server";

export default async function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
  if (!await logout()) {
    res.status(401).end();

    return;
  }

  await anonymize({req, res});

  res.status(200).end();
}
```

## Parameters

The following list describes the supported parameters:

- `route`: `object` (optional)

  The context of the current route.

  > **Conditional requirement**
  >
  > This option is only needed for [Page router](https://nextjs.org/docs/pages) or [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes), as the current request scope is only accessible through the [App router](https://nextjs.org/docs/app) and [Server actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations).

  The property names are aligned with those in Next.js for easy forwarding, as shown in the [Page router example](#example).

  - `req`: `NextApiRequest|NextRequest|GetServerSidePropsRequest`

    The request object.

  - `res`: `NextApiResponse|NextResponse|GetServerSidePropsResponse`

    The response object.