---
title: ClientIdAccessor Lightning component
slug: n6jg0305
canonical_url: https://docs.coveo.com/en/n6jg0305/
collection: coveo-for-salesforce
source_format: adoc
---
# ClientIdAccessor Lightning component

> **Available since**
>
> This feature was introduced in the August 2023 release of Coveo for Salesforce version [5.2](https://docs.coveo.com/en/n5bj0150#august-2023-release-v5-2-initial-release).

The Coveo `ClientIdAccessor` Lightning component reads and writes the [client ID](https://docs.coveo.com/en/lbjf0131/) in the `CoveoV2` namespace [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
Due to [Lightning Locker](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta.%20%20/lightning/security_code.htm) restrictions, a Lightning component that belongs to a different namespace can't directly access the client ID in the `CoveoV2` namespace localStorage.
The Coveo `ClientIdAccessor` Lightning component offers methods to access and manipulate the client ID in the `CoveoV2` namespace so it can be retrieved and reused across sites during a
[visit](https://docs.coveo.com/en/271/) (see [Integrate a Coveo ClientIdAccessor Lightning component](https://docs.coveo.com/en/n6jh0013/)).

## Usage

Reference it in a custom Aura component (for example, `LightningComponent.cmp`).

```xml
<!-- LightningComponent.cmp -->
<aura:component implements="forceCommunity:availableForAllPageTypes">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <CoveoV2:ClientIdAccessor aura:id="clientIdAccessor"/>
</aura:component>
```

Access and set the client ID in the `CoveoV2` namespace localStorage as follows:

```javascript
// LightningComponentController.js
({
    doInit: function(component) {
        const clientIdCmp = component.find("clientIdAccessor");
        // Access the ClientID value from the CoveoV2 namespace.
        const clientId = clientIdCmp.getClientId();
        // Access the ClientID value from the c namespace.
        const cClientId = localStorage.getItem('visitorId');

        const key = 'coveo_visitorId';
        if(clientId) {
            // If there's a value in the CoveoV2 namespace, use it.
            // Save the value in the c namespace localStorage so it
            // can be used by other components.
            localStorage.setItem('visitorId', clientId);
            const host = window.location.hostname;
            if (host.indexOf('.') === -1) {
                document.cookie =
                    `${key}=${encodeURIComponent(clientId)}` +
                    ';path=/;SameSite=Lax';
            } else {
                const domainParts = host.split('.');
                const domain = domainParts[domainParts.length - 2] + '.' + domainParts[domainParts.length - 1];
                document.cookie =
                    `${key}=${encodeURIComponent(clientId)}` +
                    (domain ? `;domain=$[domain](https://docs.coveo.com/en/2819/)` : '') +
                    ';path=/;SameSite=Lax';
            }
        } else if(cClientId) {
            // If there is no value in the CoveoV2 namespace,
            // but there is one in the c namespace, set it to the CoveoV2 namespace.
           clientIdCmp.setClientId(cClientId);
        }
    }
})
```

## Resources included with this component

This component doesn't include any resources.

## Aura methods

This component supports the Aura methods referenced in this section.

### getClientId

Reads the client ID in the `CoveoV2` namespace localStorage.

```javascript
const clientId = clientIdCmp.getClientId();
```

### setClientId

Writes the client ID in the `CoveoV2` namespace localStorage.

> **WARNING**
>
> This method will override any existing client ID already in the `CoveoV2` namespace localStorage.

This function requires a parameter:

- the client ID (String): The client ID value to set in the `CoveoV2` namespace localStorage.

```javascript
clientIdCmp.setClientId('123e4567-e89b-12d3-a456-426614174000');
```

## Aura events

This component doesn't include any Aura events.

## Options

This component doesn't include any options.