TS Quickstart: Store different auth tokens for different servers/modules

docs/docs/00100-intro/00200-quickstarts/00155-nuxt.md

@@ -185,14 +185,15 @@ import { DbConnection } from './module_bindings';
 
 const HOST = import.meta.env.VITE_SPACETIMEDB_HOST ?? 'ws://localhost:3000';
 const DB_NAME = import.meta.env.VITE_SPACETIMEDB_DB_NAME ?? 'nuxt-ts';
+const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
 
 const connectionBuilder = import.meta.client
   ? DbConnection.builder()
       .withUri(HOST)
-      .withModuleName(DB_NAME)
-      .withToken(localStorage.getItem('auth_token') || undefined)
+      .withDatabaseName(DB_NAME)
+      .withToken(localStorage.getItem(TOKEN_KEY) || undefined)
       .onConnect((_conn, identity, token) => {
-        localStorage.setItem('auth_token', token);
+        localStorage.setItem(TOKEN_KEY, token);
         console.log('Connected:', identity.toHexString());
       })
       .onDisconnect(() => console.log('Disconnected'))

docs/docs/00100-intro/00200-quickstarts/00180-browser.md

@@ -63,12 +63,16 @@ npm run build
 <script src="dist/bindings.iife.js"></script>
 
 <script>
+  const HOST = 'ws://localhost:3000';
+  const DB_NAME = 'my-spacetime-app';
+  const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
+
   const conn = DbConnection.builder()
-    .withUri('ws://localhost:3000')
-    .withDatabaseName('my-spacetime-app')
-    .withToken(localStorage.getItem('auth_token'))
+    .withUri(HOST)
+    .withDatabaseName(DB_NAME)
+    .withToken(localStorage.getItem(TOKEN_KEY))
     .onConnect((conn, identity, token) => {
-      localStorage.setItem('auth_token', token);
+      localStorage.setItem(TOKEN_KEY, token);
       console.log('Connected:', identity.toHexString());
 
       // Subscribe to tables

docs/docs/00100-intro/00300-tutorials/00100-chat-app.md

@@ -1366,8 +1366,12 @@ Now that we've imported the `DbConnection` type, we can use it to connect our ap
 Replace the body of the `main.tsx` file with the following, just below your imports:
 
 ```tsx
+const HOST = 'ws://localhost:3000';
+const DB_NAME = 'quickstart-chat';
+const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
+
 const onConnect = (conn: DbConnection, identity: Identity, token: string) => {
-  localStorage.setItem('auth_token', token);
+  localStorage.setItem(TOKEN_KEY, token);
   console.log(
     'Connected to SpacetimeDB with identity:',
     identity.toHexString()
@@ -1386,9 +1390,9 @@ const onConnectError = (_ctx: ErrorContext, err: Error) => {
 };
 
 const connectionBuilder = DbConnection.builder()
-  .withUri('ws://localhost:3000')
-  .withDatabaseName('quickstart-chat')
-  .withToken(localStorage.getItem('auth_token') || undefined)
+  .withUri(HOST)
+  .withDatabaseName(DB_NAME)
+  .withToken(localStorage.getItem(TOKEN_KEY) || undefined)
   .onConnect(onConnect)
   .onDisconnect(onDisconnect)
   .onConnectError(onConnectError);

docs/docs/00200-core-concepts/00600-client-sdk-languages/00300-connection.md

@@ -231,13 +231,17 @@ Register callbacks to observe connection state changes:
 <TabItem value="typescript" label="TypeScript">
 
 ```typescript
+const HOST = "https://maincloud.spacetimedb.com";
+const DB_NAME = "my_database";
+const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
+
 const conn = DbConnection.builder()
-    .withUri("https://maincloud.spacetimedb.com")
-    .withDatabaseName("my_database")
+    .withUri(HOST)
+    .withDatabaseName(DB_NAME)
     .onConnect((conn, identity, token) => {
         console.log(`Connected! Identity: ${identity.toHexString()}`);
-        // Save token for reconnection
-        localStorage.setItem('auth_token', token);
+        // Save token for reconnection — keyed per server/database
+        localStorage.setItem(TOKEN_KEY, token);
     })
     .onConnectError((_ctx, error) => {
         console.error(`Connection failed:`, error);

templates/chat-react-ts/src/App.integration.test.tsx

@@ -10,7 +10,11 @@ describe('App Integration Test', () => {
     const connectionBuilder = DbConnection.builder()
       .withUri('ws://localhost:3000')
       .withDatabaseName('quickstart-chat')
-      .withToken(localStorage.getItem('auth_token') || '');
+      .withToken(
+        localStorage.getItem(
+          'ws://localhost:3000/quickstart-chat/auth_token'
+        ) || ''
+      );
     render(
       <SpacetimeDBProvider connectionBuilder={connectionBuilder}>
         <App />

templates/chat-react-ts/src/main.tsx

@@ -8,9 +8,10 @@ import { DbConnection, ErrorContext } from './module_bindings/index.ts';
 
 const HOST = import.meta.env.VITE_SPACETIMEDB_HOST ?? 'ws://localhost:3000';
 const DB_NAME = import.meta.env.VITE_SPACETIMEDB_DB_NAME ?? 'quickstart-chat';
+const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
 
 const onConnect = (conn: DbConnection, identity: Identity, token: string) => {
-  localStorage.setItem('auth_token', token);
+  localStorage.setItem(TOKEN_KEY, token);
   console.log(
     'Connected to SpacetimeDB with identity:',
     identity.toHexString()
@@ -28,7 +29,7 @@ const onConnectError = (_ctx: ErrorContext, err: Error) => {
 const connectionBuilder = DbConnection.builder()
   .withUri(HOST)
   .withDatabaseName(DB_NAME)
-  .withToken(localStorage.getItem('auth_token') || undefined)
+  .withToken(localStorage.getItem(TOKEN_KEY) || undefined)
   .onConnect(onConnect)
   .onDisconnect(onDisconnect)
   .onConnectError(onConnectError);

templates/nextjs-ts/app/providers.tsx

@@ -8,10 +8,11 @@ import { Identity } from 'spacetimedb';
 const HOST =
   process.env.NEXT_PUBLIC_SPACETIMEDB_HOST ?? 'wss://maincloud.spacetimedb.com';
 const DB_NAME = process.env.NEXT_PUBLIC_SPACETIMEDB_DB_NAME ?? 'nextjs-ts';
+const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
 
 const onConnect = (_conn: DbConnection, identity: Identity, token: string) => {
   if (typeof window !== 'undefined') {
-    localStorage.setItem('auth_token', token);
+    localStorage.setItem(TOKEN_KEY, token);
   }
   console.log(
     'Connected to SpacetimeDB with identity:',
@@ -32,10 +33,10 @@ export function Providers({ children }: { children: React.ReactNode }) {
     () =>
       DbConnection.builder()
         .withUri(HOST)
-        .withModuleName(DB_NAME)
+        .withDatabaseName(DB_NAME)
         .withToken(
           typeof window !== 'undefined'
-            ? localStorage.getItem('auth_token') || undefined
+            ? localStorage.getItem(TOKEN_KEY) || undefined
             : undefined
         )
         .onConnect(onConnect)

templates/nuxt-ts/app.vue

@@ -16,9 +16,10 @@ import { DbConnection, type ErrorContext } from './module_bindings';
 
 const HOST = import.meta.env.VITE_SPACETIMEDB_HOST ?? 'ws://localhost:3000';
 const DB_NAME = import.meta.env.VITE_SPACETIMEDB_DB_NAME ?? 'nuxt-ts';
+const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
 
 const onConnect = (_conn: DbConnection, identity: Identity, token: string) => {
-  localStorage.setItem('auth_token', token);
+  localStorage.setItem(TOKEN_KEY, token);
   console.log(
     'Connected to SpacetimeDB with identity:',
     identity.toHexString()
@@ -36,8 +37,8 @@ const onConnectError = (_ctx: ErrorContext, err: Error) => {
 const connectionBuilder = import.meta.client
   ? DbConnection.builder()
       .withUri(HOST)
-      .withModuleName(DB_NAME)
-      .withToken(localStorage.getItem('auth_token') || undefined)
+      .withDatabaseName(DB_NAME)
+      .withToken(localStorage.getItem(TOKEN_KEY) || undefined)
       .onConnect(onConnect)
       .onDisconnect(onDisconnect)
       .onConnectError(onConnectError)

templates/react-ts/src/main.tsx

@@ -7,9 +7,10 @@ import { DbConnection, ErrorContext } from './module_bindings/index.ts';
 
 const HOST = import.meta.env.VITE_SPACETIMEDB_HOST ?? 'ws://localhost:3000';
 const DB_NAME = import.meta.env.VITE_SPACETIMEDB_DB_NAME ?? 'react-ts';
+const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
 
 const onConnect = (_conn: DbConnection, identity: Identity, token: string) => {
-  localStorage.setItem('auth_token', token);
+  localStorage.setItem(TOKEN_KEY, token);
   console.log(
     'Connected to SpacetimeDB with identity:',
     identity.toHexString()
@@ -27,7 +28,7 @@ const onConnectError = (_ctx: ErrorContext, err: Error) => {
 const connectionBuilder = DbConnection.builder()
   .withUri(HOST)
   .withDatabaseName(DB_NAME)
-  .withToken(localStorage.getItem('auth_token') || undefined)
+  .withToken(localStorage.getItem(TOKEN_KEY) || undefined)
   .onConnect(onConnect)
   .onDisconnect(onDisconnect)
   .onConnectError(onConnectError);

templates/remix-ts/app/root.tsx

@@ -14,10 +14,11 @@ import { Identity } from 'spacetimedb';
 const HOST =
   import.meta.env.VITE_SPACETIMEDB_HOST ?? 'wss://maincloud.spacetimedb.com';
 const DB_NAME = import.meta.env.VITE_SPACETIMEDB_DB_NAME ?? 'remix-ts';
+const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
 
 const onConnect = (_conn: DbConnection, identity: Identity, token: string) => {
   if (typeof window !== 'undefined') {
-    localStorage.setItem('auth_token', token);
+    localStorage.setItem(TOKEN_KEY, token);
   }
   console.log(
     'Connected to SpacetimeDB with identity:',
@@ -46,8 +47,8 @@ function Providers({ children }: { children: React.ReactNode }) {
     if (typeof window === 'undefined') return null;
     return DbConnection.builder()
       .withUri(HOST)
-      .withModuleName(DB_NAME)
-      .withToken(localStorage.getItem('auth_token') || undefined)
+      .withDatabaseName(DB_NAME)
+      .withToken(localStorage.getItem(TOKEN_KEY) || undefined)
       .onConnect(onConnect)
       .onDisconnect(onDisconnect)
       .onConnectError(onConnectError);

templates/svelte-ts/src/Root.svelte

@@ -6,9 +6,10 @@ import App from './App.svelte';
 
 const HOST = import.meta.env.VITE_SPACETIMEDB_HOST ?? 'ws://localhost:3000';
 const DB_NAME = import.meta.env.VITE_SPACETIMEDB_DB_NAME ?? 'svelte-ts';
+const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
 
 const onConnect = (_conn: DbConnection, identity: Identity, token: string) => {
-  localStorage.setItem('auth_token', token);
+  localStorage.setItem(TOKEN_KEY, token);
   console.log(
     'Connected to SpacetimeDB with identity:',
     identity.toHexString()
@@ -26,7 +27,7 @@ const onConnectError = (_ctx: ErrorContext, err: Error) => {
 const connectionBuilder = DbConnection.builder()
   .withUri(HOST)
   .withDatabaseName(DB_NAME)
-  .withToken(localStorage.getItem('auth_token') || undefined)
+  .withToken(localStorage.getItem(TOKEN_KEY) || undefined)
   .onConnect(onConnect)
   .onDisconnect(onDisconnect)
   .onConnectError(onConnectError);

templates/tanstack-ts/src/router.tsx

@@ -11,6 +11,7 @@ import { DbConnection, ErrorContext } from './module_bindings';
 
 const HOST = import.meta.env.VITE_SPACETIMEDB_HOST ?? 'ws://localhost:3000';
 const DB_NAME = import.meta.env.VITE_SPACETIMEDB_DB_NAME ?? 'tanstack-ts';
+const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
 
 const spacetimeDBQueryClient = new SpacetimeDBQueryClient();
 
@@ -29,7 +30,7 @@ spacetimeDBQueryClient.connect(queryClient);
 
 const onConnect = (conn: DbConnection, identity: Identity, token: string) => {
   if (typeof localStorage !== 'undefined') {
-    localStorage.setItem('auth_token', token);
+    localStorage.setItem(TOKEN_KEY, token);
   }
   console.log(
     'Connected to SpacetimeDB with identity:',
@@ -48,10 +49,10 @@ const onConnectError = (_ctx: ErrorContext, err: Error) => {
 
 const connectionBuilder = DbConnection.builder()
   .withUri(HOST)
-  .withModuleName(DB_NAME)
+  .withDatabaseName(DB_NAME)
   .withToken(
     typeof localStorage !== 'undefined'
-      ? (localStorage.getItem('auth_token') ?? undefined)
+      ? (localStorage.getItem(TOKEN_KEY) ?? undefined)
       : undefined
   )
   .onConnect(onConnect)

templates/vue-ts/src/main.ts

@@ -6,9 +6,10 @@ import { DbConnection, ErrorContext } from './module_bindings/index.ts';
 
 const HOST = import.meta.env.VITE_SPACETIMEDB_HOST ?? 'ws://localhost:3000';
 const DB_NAME = import.meta.env.VITE_SPACETIMEDB_DB_NAME ?? 'vue-ts';
+const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
 
 const onConnect = (_conn: DbConnection, identity: Identity, token: string) => {
-  localStorage.setItem('auth_token', token);
+  localStorage.setItem(TOKEN_KEY, token);
   console.log(
     'Connected to SpacetimeDB with identity:',
     identity.toHexString()
@@ -26,7 +27,7 @@ const onConnectError = (_ctx: ErrorContext, err: Error) => {
 const connectionBuilder = DbConnection.builder()
   .withUri(HOST)
   .withDatabaseName(DB_NAME)
-  .withToken(localStorage.getItem('auth_token') || undefined)
+  .withToken(localStorage.getItem(TOKEN_KEY) || undefined)
   .onConnect(onConnect)
   .onDisconnect(onDisconnect)
   .onConnectError(onConnectError);