> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cevoid.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom customer authentication for program widgets

> Implement custom authentication to connect your store's user system with Cevoid program widgets.

<Note>
  Related articles:
  [Member access and login](/program/program-setup/member-access-login), [Member opt-in and enrollment](/program/program-setup/member-opt-in-enrollment), [On-site widgets](/program/on-site-widgets)
</Note>

Custom customer authentication allows you to authenticate users with your own system instead of using Shopify accounts or Cevoid email authentication. This is useful for headless setups or stores running on platforms other than Shopify.

The implementation involves encrypting a payload with a key provided by Cevoid and attaching the result to your widget embed code.

<Warning>
  This implementation requires server-side code. The encryption key must never be exposed to the client or shared with anyone.
</Warning>

***

## How it works

1. You retrieve user information from your authenticated session
2. You create an encrypted digest on the server using the user's ID and email
3. You pass the digest and user info to the Cevoid widget div code
4. Cevoid verifies the digest and authenticates the user

***

## Set up custom customer authentication

### Step 1: Enable custom customer authentication

1. Navigate to [Settings -> Rewards program -> General](https://app.cevoid.com/settings/program)
2. Under *Access and enrollment*, set **Authentication** to **Custom customer authentication**
3. Copy your **encryption key** and **tracking ID** from this page

### Step 2: Get your widget embed code

1. Navigate to [Rewards program -> On-site widgets](https://app.cevoid.com/program/widgets)
2. Select the widget you want to embed
3. Click **Embed** in the top right corner
4. Copy the div code

The base embed code looks like this:

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<div 
  class="cevoid-widget" 
  data-id="ew-3qGflV" 
  data-tracking-id="cv-1234-1"
></div>
```

### Step 3: Add user information to the embed code

Add the following data attributes with your authenticated user's information:

| Attribute         | Required | Description                  |
| ----------------- | -------- | ---------------------------- |
| `data-user-email` | Yes      | The user's email address     |
| `data-user-id`    | Yes      | The user's ID in your system |
| `data-user-name`  | No       | The user's display name      |

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<div
  class="cevoid-widget"
  data-id="ew-3qGflV"
  data-tracking-id="cv-1234-1"
  data-user-email="{{ EMAIL }}"
  data-user-id="{{ EXTERNAL_USER_ID }}"
  data-user-name="{{ NAME }}"
></div>
```

### Step 4: Create the digest

The digest authenticates the user and must be generated server-side.

**Payload format:** `{{ USER_ID }},{{ EMAIL }}`

For example, for a user with ID `1234` and email `viktor@cevoid.com`, the payload is:

```
1234,viktor@cevoid.com
```

**Encryption method:** HMAC with SHA256 algorithm, signed with your encryption key.

**Node.js example:**

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
const crypto = require('crypto');

const encryptionKey = 'YOUR_ENCRYPTION_KEY';
const userId = '1234';
const email = 'viktor@cevoid.com';

const digest = crypto
  .createHmac('sha256', encryptionKey)
  .update(`${userId},${email}`)
  .digest('hex');
```

### Step 5: Add the digest to the embed code

Add the generated digest as `data-digest`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<div
  class="cevoid-widget"
  data-id="ew-3qGflV"
  data-tracking-id="cv-1234-1"
  data-digest="{{ DIGEST }}"
  data-user-email="{{ EMAIL }}"
  data-user-id="{{ EXTERNAL_USER_ID }}"
  data-user-name="{{ NAME }}"
></div>
```

***

## Complete example

For a user with:

* ID: `1234`
* Email: `viktor@cevoid.com`
* Name: `Viktor`

The final embed code would look like:

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<div
  class="cevoid-widget"
  data-id="ew-3qGflV"
  data-tracking-id="cv-1234-1"
  data-digest="a1b2c3d4e5f6..."
  data-user-email="viktor@cevoid.com"
  data-user-id="1234"
  data-user-name="Viktor"
></div>
```