Authentication

The SDK supports three authentication modes. Choose the one that fits your application.

Built-in Auth (Default)

By default, the widget shows a login screen with email/password fields, registration, and password reset. No configuration needed beyond the API URL.

<saytv-chat app-id="your-app-id"></saytv-chat>

The built-in auth UI handles:

• Email/password login
• New user registration
• Password reset (forgot password)
• Email verification flow

User sessions are persisted during the page session, so users stay logged in within the same tab.

External JWT Token

If your application already has a logged-in user, pass their JWT token to the widget. The SDK exchanges it for a SayTV session token automatically.

<saytv-chat
  app-id="your-app-id"
  auth-token="eyJhbGciOiJIUzI1NiIs..."
  built-in-auth="false"
></saytv-chat>

Once authenticated, the SayTV session is stored for the duration of the page session.

Updating the Token

The auth-token attribute is reactive. Update it at any time:

const chat = document.querySelector('saytv-chat');
chat.setAttribute('auth-token', newToken);

Rapid token changes are handled efficiently to prevent unnecessary re-authentication.

React

<SayTVChat
  appId="your-app-id"
  authToken={userToken}
  builtInAuth={false}
/>

Or use the hook:

const { setToken } = useSayTVChat();
setToken(newToken);

Vue

<SayTVChat
  app-id="your-app-id"
  :auth-token="userToken"
  :built-in-auth="false"
/>

Or use the composable:

const { setToken } = useSayTVChat();
setToken(newToken);

Disable Built-in Auth

Set built-in-auth="false" to skip the login screen entirely. The widget will go straight to the episodes list.

<saytv-chat
  app-id="your-app-id"
  built-in-auth="false"
></saytv-chat>

WARNING

Without built-in auth or an external token, the user will be unauthenticated. They can browse content but won't be able to send messages.

Authentication Events

Listen for auth-related events on the widget element:

const chat = document.querySelector('saytv-chat');

chat.addEventListener('stv:user-login', (e) => {
  console.log('User logged in:', e.detail);
});

chat.addEventListener('stv:user-logout', (e) => {
  console.log('User logged out');
});

See Events Reference for all available events.

Session Behavior

• Sessions persist during a single page session (tab/window)
• Closing the tab clears the session
• Calling logout clears all stored tokens and state