Sandbox token server

Overview

LiveKit Cloud's sandbox token server generates tokens for you with no backend code required. When you're ready for production, migrate to endpoint token generation.

Use a sandbox-based TokenSource

1. 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

   

2. Enter a name for the sandbox token server under Hosted URL and click Done:

   

3. 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.

   

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

   Agent dispatch

   The sandbox token server accepts agent_name in token requests. When using Session APIs, you can provide the agent name at runtime, and it will be automatically included in token requests. See the Authentication overview for more information.

   JavaScriptReactSwiftAndroidFlutterReact Native

   import { Room, TokenSource } from 'livekit-client';
   
   // Create the TokenSource
   const tokenSource = TokenSource.sandboxTokenServer("<your sandbox token server id>");
   
   // Fetch a token (cached and automatically refreshed as needed)
   // For agent applications, include agentName in the fetch options
   const { serverUrl, participantToken } = await tokenSource.fetch({ 
     roomName: "room name to join",
     agentName: "my-agent-name" // Optional: for agent dispatch
   });
   
   // Use the generated token to connect to a room
   const room = new Room();
   room.connect(serverUrl, participantToken);

   Create Sandbox Token Server

   import { TokenSource } from 'livekit-client';
   import { useSession, SessionProvider } from '@livekit/components-react';
   
   // Create the TokenSource
   const tokenSource = TokenSource.sandboxTokenServer("<your sandbox token server id>");
   
   export const MyPage = () => {
     const session = useSession(tokenSource, { 
       roomName: "room name to join",
       agentName: "my-agent-name" // Optional: for agent dispatch
     });
   
     // 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} />
           )
         })}
       </>
     )
   }

   Create Sandbox Token Server

   import LiveKitComponents
   
   @main
   struct SessionApp: App {
       let session = Session.withAgent("my-agent", 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
   
       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")
               }
           }
       }
   }

   Create Sandbox Token Server

   val tokenSource = remember {
       TokenSource.fromSandboxTokenServer("<your sandbox token server id>").cached()
   }
   val session = rememberSession(
       tokenSource = tokenSource,
       options = SessionOptions(
           tokenRequestOptions = TokenRequestOptions(agentName = "my-agent-name") // Optional: for agent dispatch
       )
   )
   
   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"
                   }
               )
           }
       }
   }

   Create Sandbox Token Server

   import 'package:livekit_client/livekit_client.dart' as sdk;
   
   final tokenSource = sdk.SandboxTokenSource(sandboxId: "<your sandbox token server id>");
   final session = sdk.Session.withAgent("my-agent-name", tokenSource: tokenSource);
    
   /* ... */
    
   await session.start();
    
   // Use session to further build out your application.

   Create Sandbox Token Server

   import { TokenSource } from 'livekit-client';
   import { useSession, SessionProvider } from '@livekit/components-react';
   
   // Create the TokenSource
   const tokenSource = TokenSource.sandboxTokenServer("<your sandbox token server id>");
   
   export const MyPage = () => {
     const session = useSession(tokenSource, { 
       roomName: "room name to join",
       agentName: "my-agent-name" // Optional: for agent dispatch
     });
   
     // 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>
     )
   }

   Create Sandbox Token Server