Auth - Attribute

Identify users by passing identity attributes directly on the widget element. No backend required.

How it works

The widget reads data-* attributes from its HTML element and sends them to Returning.AI to identify the user. No server-side code is needed.

<script
  src="https://unpkg.com/@returningai/widget-sdk/dist/rai-widget.iife.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-widget-type="store"
  data-container="returning-ai-widget-YOUR_WIDGET_ID"
  data-api-url="YOUR_API_URL"
  data-widget-url="YOUR_WIDGET_URL"
  data-email="user@example.com"
></script>

Common attributes

Attribute	Description
data-email	User email address. The most common identifier.
data-userId	Your internal user ID.
data-firstname	User first name.
data-lastname	User last name.

Custom attributes

Any field that exists on both the client side and the Returning.AI platform can be used as an identity attribute. Custom fields can be created in the Returning.AI admin panel to add additional layers of identity verification.

Security through stacking

The more attributes you add, the harder it is for someone to reverse-engineer the identity. A single data-email is easy to guess. A combination of email + userId + custom field is much harder to spoof.

<script
  src="https://unpkg.com/@returningai/widget-sdk/dist/rai-widget.iife.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-widget-type="store"
  data-container="returning-ai-widget-YOUR_WIDGET_ID"
  data-api-url="YOUR_API_URL"
  data-widget-url="YOUR_WIDGET_URL"
  data-email="user@example.com"
  data-userId="USR-9a3f2b"
  data-firstname="Jane"
  data-lastname="Doe"
  data-custom-tier="gold"
></script>

Stack for stronger identity

Each additional attribute acts as another factor. For most integrations, data-email + data-userId provides a good balance of simplicity and security.

Web Component usage

The same attributes work on the Web Component tag:

<rai-channel-widget
  widget-id="YOUR_WIDGET_ID"
  widget-type="channel"
  api-url="YOUR_API_URL"
  widget-url="YOUR_WIDGET_URL"
  data-email="user@example.com"
  data-userId="USR-9a3f2b"
  data-firstname="Jane"
></rai-channel-widget>

Framework examples

React

LoyaltyWidget.tsx

import '@returningai/widget-sdk'

export function LoyaltyWidget({ user }: { user: { email: string; id: string; firstName: string } }) {
  return (
    <rai-store-widget
      widget-id="YOUR_WIDGET_ID"
      api-url="YOUR_API_URL"
      widget-url="YOUR_WIDGET_URL"
      data-email={user.email}
      data-userId={user.id}
      data-firstname={user.firstName}
    />
  )
}

Vue

LoyaltyWidget.vue

<script setup>
import '@returningai/widget-sdk'

const user = inject('user')
</script>

<template>
  <rai-store-widget
    widget-id="YOUR_WIDGET_ID"
    api-url="YOUR_API_URL"
    widget-url="YOUR_WIDGET_URL"
    :data-email="user.email"
    :data-userId="user.id"
    :data-firstname="user.firstName"
  />
</template>

When to use

Quick integrations where you already know the user on the client side.
Internal tools and admin dashboards.
Environments where you control who accesses the page.
Prototyping and development before implementing token auth.

Need server-verified identity? See Auth - Token for the backend token flow.