import { StreamVideoClient, User } from "@stream-io/video-react-native-sdk";
const user: User = {
id: "sara",
};
const apiKey = "my-stream-api-key";
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...";
const client = StreamVideoClient.getOrCreateInstance({ apiKey, token, user });
Client & Authentication
Client & Auth
Before joining a call, it is necessary to set up the video client. Here’s a basic example:
- 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.
Here are credentials to try out the app with:
Property | Value |
---|---|
API Key | mmhfdzb5evj2 |
Token | eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL3Byb250by5nZXRzdHJlYW0uaW8iLCJzdWIiOiJ1c2VyL0dyZWVkbyIsInVzZXJfaWQiOiJHcmVlZG8iLCJ2YWxpZGl0eV9pbl9zZWNvbmRzIjo2MDQ4MDAsImlhdCI6MTczNDEyMTYwMiwiZXhwIjoxNzM0NzI2NDAyfQ.Mwls_0EbzXUgwJbqQ3a7hBnpi9ggIM3CiAso4qHSTTg |
User ID | Greedo |
Call ID | TBv85QaEO3ks |
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-react-native-sdk";
const user: User = {
id: "jack-guest",
type: "guest",
};
const apiKey = "my-stream-api-key";
const client = StreamVideoClient.getOrCreateInstance({ apiKey, user });
And here’s an example for an anonymous user
import { StreamVideoClient, User } from "@stream-io/video-react-native-sdk";
const user: User = {
type: "anonymous",
};
const apiKey = "my-stream-api-key";
const client = StreamVideoClient.getOrCreateInstance({ 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 execute it to refresh the token whenever the token is expired.
import { StreamVideoClient, User } from "@stream-io/video-react-native-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 = StreamVideoClient.getOrCreateInstance({
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 debugging console.
import { StreamVideoClient, Logger } from "@stream-io/video-react-native-sdk";
const myLogger: Logger = (logLevel, message, ...args) => {
// Do something with the log message
};
const client = StreamVideoClient.getOrCreateInstance({
apiKey,
token,
user,
options: {
logLevel: "info",
logger: myLogger,
},
});
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,
} from "@stream-io/video-react-native-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 = StreamVideoClient.getOrCreateInstance({
apiKey,
user,
tokenProvider,
});
setClient(myClient);
return () => {
myClient.disconnectUser();
setClient(undefined);
};
}, []);
return (
<StreamVideo client={client}>
<MyVideoApp />
</StreamVideo>
);
};