Sandbox token generation | LiveKit Documentation

Tip

This is a hosted token server designed for development and testing purposes. It's not suitable for high load production use cases, and is inherently insecure since any frontend app can request a token with any set of permissions with no restrictions.

Overview

Use LiveKit Cloud's sandbox token generation to get started quickly.

Once you're ready to deploy your application into production, migrate to endpoint token generation instead.

Use a sandbox-based TokenSource

Create a new sandbox from the sandbox token server template page by clicking Create sandbox.
https://cloud.livekit.io/projects/p_/sandbox/templates/token-server
Enter a name for the sandbox token server under Hosted URL and click Done:
Find your sandbox ID under the Sandbox created header. This is a value starting with the name you gave the token server and ending in a dash with additional characters.

Configure a new sandbox token server typed TokenSource in your application to consume this sandbox ID:

import { Room, TokenSource } from 'livekit-client';

// Create the TokenSource
const tokenSource = TokenSource.sandboxTokenServer({
  sandboxId: "<your sandbox token server id>",
});

// Fetch a token (cached and automatically refreshed as needed)
const { serverUrl, participantToken } = await tokenSource.fetch({ roomName: "room name to join" });

// Use the generated token to connect to a room
const room = new Room();
room.connect(serverUrl, participantToken);

import { TokenSource } from 'livekit-client';
import { useSession, SessionProvider } from '@livekit/components-react';

// Create the TokenSource
const tokenSource = TokenSource.sandboxTokenServer({
  sandboxId: "<your sandbox token server id>",
});

export const MyPage = () => {
  const session = useSession(tokenSource, { roomName: "room name to join" });

  // Start the session when the component mounts, and end the session when the component unmounts
  useEffect(() => {
    session.start();
    return () => {
      session.end();
    };
  }, []);

  return (
    <SessionProvider session={session}>
      <MyComponent />
    </SessionProvider>
  )
}

export const MyComponent = () => {
  // Access the session available via the context to build your app
  // ie, show a list of all camera tracks:
  const cameraTracks = useTracks([Track.Source.Camera], {onlySubscribed: true});
  return (
    <>
      {cameraTracks.map((trackReference) => {
        return (
          <VideoTrack {...trackReference} />
        )
      })}
    </>
  )
}

import LiveKitComponents

@main
struct SessionApp: App {
    let session = Session(tokenSource: SandboxTokenSource(id: "<your sandbox token server id>"))

    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(session)
                .alert(session.error?.localizedDescription ?? "Error", isPresented: .constant(session.error != nil)) {
                    Button(action: session.dismissError) { Text("OK") }
                }
                .alert(session.agent.error?.localizedDescription ?? "Error", isPresented: .constant(session.agent.error != nil)) {
                    AsyncButton(action: session.end) { Text("OK") }
                }
        }
    }
}

struct ContentView: View {
    @EnvironmentObject var session: Session
    @State var message = ""
    
    var body: some View {
        if session.isConnected {
            AsyncButton(action: session.end) {
                Text("Disconnect")
            }
            
            Text(String(describing: session.agent.agentState))
        } else {
            AsyncButton(action: session.start) {
                Text("Connect")
            }
        }
    }
}

val tokenSource = remember {
    TokenSource.fromSandboxTokenServer("<your sandbox token server id>").cached()
}
val session = rememberSession(
    tokenSource = tokenSource
)

Column {
    SessionScope(session = session) { session ->
        val coroutineScope = rememberCoroutineScope()
        var shouldConnect by remember { mutableStateOf(false) }

        LaunchedEffect(shouldConnect) {
            if (shouldConnect) {

                val result = session.start()

                // Handle if the session fails to connect.
                if (result.isFailure) {
                    Toast.makeText(context, "Error connecting to the session.", Toast.LENGTH_SHORT).show()
                    shouldConnect = false
                }
            } else {
                session.end()
            }
        }
        Button(onClick = { shouldConnect = !shouldConnect }) {
            Text(
                if (shouldConnect) {
                    "Disconnect"
                } else {
                    "Connect"
                }
            )
        }
    }
}

import 'package:livekit_client/livekit_client.dart' as sdk;

final tokenSource = sdk.SandboxTokenSource(sandboxId: "<your sandbox token server id>");
final session = sdk.Session.fromConfigurableTokenSource(
  tokenSource,
   const TokenRequestOptions()
);
 
/* ... */
 
await session.start();
 
// Use session to further build out your application.

import { TokenSource } from 'livekit-client';
import { useSession, SessionProvider } from '@livekit/components-react';

// Create the TokenSource
const tokenSource = TokenSource.sandboxTokenServer({
  sandboxId: "<your sandbox token server id>",
});

export const MyPage = () => {
  const session = useSession(tokenSource, { roomName: "room name to join" });

  // Start the session when the component mounts, and end the session when the component unmounts
  useEffect(() => {
    session.start();
    return () => {
      session.end();
    };
  }, []);

  return (
    <SessionProvider session={session}>
      {/* render the rest of your application here */}
    </SessionProvider>
  )
}