Client & Authentication

Client & Auth

Before joining a call, it is necessary to set up the video client. Here’s a basic example:

import { StreamVideoClient, User } from '@stream-io/video-client';

const user: User = {
  id: 'sara',
};

const apiKey = 'my-stream-api-key';
const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...';
const client = new StreamVideoClient({ apiKey, token, user });

The API Key can be found in your dashboard.
The user can be either authenticated, anonymous or guest.
Note: You can store custom data on the user object, if required.

Typically, you’ll want to initialize the client when your application loads and store it in your application state to make it available to the rest of your application.

Tokens need to be generated server side. You can use our server side SDKs to quickly add support for this. Typically, you integrate this into the part of your codebase where you login or register users. The tokens provide a way to authenticate a user or give access to a specific set of calls.

For development purposes, you can use our Token Generator.

Different types of users

Authenticated users are users that have an account on your app.
Guest users are temporary user accounts. You can use it to temporarily give someone a name and image when joining a call.
Anonymous users are users that are not authenticated. It’s common to use this for watching a livestream or similar where you aren’t authenticated.

This example shows the client setup for a guest user:

import { StreamVideoClient, User } from '@stream-io/video-client';

const user: User = {
  id: 'jack-guest',
  type: 'guest',
};

const apiKey = 'my-stream-api-key';
const client = new StreamVideoClient({ apiKey, user });

And here’s an example for an anonymous user

import { StreamVideoClient, User } from '@stream-io/video-client';

const user: User = {
  type: 'anonymous',
};

const apiKey = 'my-stream-api-key';
const client = new StreamVideoClient({ apiKey, user });

Client options

`token` or `tokenProvider`

To authenticate users you can either provide a string token or a tokenProvider function that returns Promise<string>. If you use the tokenProvider the SDK will automatically call the provider whenever the token is expired.

import { StreamVideoClient, User } from '@stream-io/video-client';

const tokenProvider = async () => {
  const response = await fetch('/api/token');
  const data = await response.json();
  return data.token;
};

const user: User = {
  id: 'sara',
};
const apiKey = 'my-stream-api-key';
const client = new StreamVideoClient({ apiKey, tokenProvider, user });

Logging

You can configure the log level and the logger method used by the SDK.

The default log level is warn, other options are: debug, info, and error.

The default logger method will log to the browser console.

import { StreamVideoClient, Logger } from '@stream-io/video-client';

const myLogger: Logger;

const client = new StreamVideoClient({
  apiKey,
  token,
  user,
  options: {
    logLevel: 'info',
    logger: myLogger,
  },
});

Sentry

Here is an example showing a basic Sentry integration:

import { LogLevel, Logger, logToConsole } from '@stream-io/video-client';
import * as Sentry from '@sentry/nextjs';

const logLevelMapping = new Map<LogLevel, Sentry.SeverityLevel>();
logLevelMapping.set('debug', 'debug');
logLevelMapping.set('info', 'info');
logLevelMapping.set('warn', 'warning');
logLevelMapping.set('error', 'error');

export const customSentryLogger: Logger = (
  logLevel: LogLevel,
  message: string,
  extraData?: any,
  tags?: string[],
) => {
  if (logLevel === 'warn' || logLevel === 'error') {
    Sentry.captureEvent({
      level: logLevelMapping.get(logLevel),
      extra: extraData,
    });
  }

  // Call the SDK's default log method
  logToConsole(logLevel, message, extraData, tags);
};

Supported Platforms and Size

Joining & Creating Calls