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-react-sdk";

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 use a context provider to make it available to the rest of your application.

Generating a token

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 log in or register users. The tokens provide a way to authenticate a user or give access to a specific set of calls.

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-react-sdk";

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-react-sdk";

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

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

Anonymous users don’t establish an active web socket connection, therefore they won’t receive any events. They are just able to watch a livestream or join a call.

The token for an anonymous user should contain the call_cids field, which is an array of the call cid’s that the user is allowed to join.

Here’s an example JWT token payload for an anonymous user:

{
  "iss": "@stream-io/dashboard",
  "iat": 1726406693,
  "exp": 1726493093,
  "user_id": "!anon",
  "role": "viewer",
  "call_cids": [
    "livestream:123"
  ]
}

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-react-sdk";

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: trace, debug, info, and error.

The default logger method will log to the browser’s console.

import { StreamVideoClient, Logger } from "@stream-io/video-react-sdk";

const myLogger: Logger = (logLevel, message, ...args) => {
  // Do something with the log message
};

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-react-sdk";
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,
  ...args: unknown[]
) => {
  if (logLevel === "warn" || logLevel === "error") {
    Sentry.captureEvent({
      level: logLevelMapping.get(logLevel),
      extra: args,
    });
  }

  // Call the SDK's default log method
  logToConsole(logLevel, message, { data: "some data" });
};

StreamVideo context provider

You can use the StreamVideo context provider to make the SDK client available to the rest of the application. We also use the tokenProvider to show how to perform auth server-side.

import { useEffect, useState } from "react";
import {
  StreamVideo,
  StreamVideoClient,
  User,
} from "@stream-io/video-react-sdk";

const apiKey = "my-stream-api-key";
const user: User = {
  id: "sara",
};

export const MyApp = () => {
  const [client, setClient] = useState<StreamVideoClient>();
  useEffect(() => {
    const tokenProvider = () => Promise.resolve("<token>");
    const myClient = new StreamVideoClient({ apiKey, user, tokenProvider });
    setClient(myClient);
    return () => {
      myClient.disconnectUser();
      setClient(undefined);
    };
  }, []);

  return (
    <StreamVideo client={client}>
      <MyVideoApp />
    </StreamVideo>
  );
};