Skip to content

Commit 08ff1e1

Browse files
jsdtclockwork-labs-bot
jsdt
and
clockwork-labs-bot
authored
TS Quickstart: Store different auth tokens for different servers/modules (#3252)
# Description of Changes In the typescript quickstart example, this includes the server and module name in the local storage variable name that we use for the auth token. This fixes an otherwise annoying issue people run into if they start running the quickstart locally, then try to run it on maincloud. If they have already run the app with a local server, their browser will store the locally signed token, which will get rejected by maincloud. # Expected complexity level and risk 1. # Testing I was able to connect to my local quickstart, then change the variables to point to a module on maincloud, and I didn't get any errors. Co-authored-by: clockwork-labs-bot <clockwork-labs-bot@users.noreply.github.com>
1 parent e4098f9 commit 08ff1e1

13 files changed

Lines changed: 61 additions & 36 deletions

File tree

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -185,14 +185,15 @@ import { DbConnection } from './module_bindings';
185185
186186
const HOST = import.meta.env.VITE_SPACETIMEDB_HOST ?? 'ws://localhost:3000';
187187
const DB_NAME = import.meta.env.VITE_SPACETIMEDB_DB_NAME ?? 'nuxt-ts';
188+
const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
188189
189190
const connectionBuilder = import.meta.client
190191
? DbConnection.builder()
191192
.withUri(HOST)
192-
.withModuleName(DB_NAME)
193-
.withToken(localStorage.getItem('auth_token') || undefined)
193+
.withDatabaseName(DB_NAME)
194+
.withToken(localStorage.getItem(TOKEN_KEY) || undefined)
194195
.onConnect((_conn, identity, token) => {
195-
localStorage.setItem('auth_token', token);
196+
localStorage.setItem(TOKEN_KEY, token);
196197
console.log('Connected:', identity.toHexString());
197198
})
198199
.onDisconnect(() => console.log('Disconnected'))

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,16 @@ npm run build
6363
<script src="dist/bindings.iife.js"></script>
6464

6565
<script>
66+
const HOST = 'ws://localhost:3000';
67+
const DB_NAME = 'my-spacetime-app';
68+
const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
69+
6670
const conn = DbConnection.builder()
67-
.withUri('ws://localhost:3000')
68-
.withDatabaseName('my-spacetime-app')
69-
.withToken(localStorage.getItem('auth_token'))
71+
.withUri(HOST)
72+
.withDatabaseName(DB_NAME)
73+
.withToken(localStorage.getItem(TOKEN_KEY))
7074
.onConnect((conn, identity, token) => {
71-
localStorage.setItem('auth_token', token);
75+
localStorage.setItem(TOKEN_KEY, token);
7276
console.log('Connected:', identity.toHexString());
7377
7478
// Subscribe to tables

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1366,8 +1366,12 @@ Now that we've imported the `DbConnection` type, we can use it to connect our ap
13661366
Replace the body of the `main.tsx` file with the following, just below your imports:
13671367

13681368
```tsx
1369+
const HOST = 'ws://localhost:3000';
1370+
const DB_NAME = 'quickstart-chat';
1371+
const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
1372+
13691373
const onConnect = (conn: DbConnection, identity: Identity, token: string) => {
1370-
localStorage.setItem('auth_token', token);
1374+
localStorage.setItem(TOKEN_KEY, token);
13711375
console.log(
13721376
'Connected to SpacetimeDB with identity:',
13731377
identity.toHexString()
@@ -1386,9 +1390,9 @@ const onConnectError = (_ctx: ErrorContext, err: Error) => {
13861390
};
13871391

13881392
const connectionBuilder = DbConnection.builder()
1389-
.withUri('ws://localhost:3000')
1390-
.withDatabaseName('quickstart-chat')
1391-
.withToken(localStorage.getItem('auth_token') || undefined)
1393+
.withUri(HOST)
1394+
.withDatabaseName(DB_NAME)
1395+
.withToken(localStorage.getItem(TOKEN_KEY) || undefined)
13921396
.onConnect(onConnect)
13931397
.onDisconnect(onDisconnect)
13941398
.onConnectError(onConnectError);

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -231,13 +231,17 @@ Register callbacks to observe connection state changes:
231231
<TabItem value="typescript" label="TypeScript">
232232
233233
```typescript
234+
const HOST = "https://maincloud.spacetimedb.com";
235+
const DB_NAME = "my_database";
236+
const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
237+
234238
const conn = DbConnection.builder()
235-
.withUri("https://maincloud.spacetimedb.com")
236-
.withDatabaseName("my_database")
239+
.withUri(HOST)
240+
.withDatabaseName(DB_NAME)
237241
.onConnect((conn, identity, token) => {
238242
console.log(`Connected! Identity: ${identity.toHexString()}`);
239-
// Save token for reconnection
240-
localStorage.setItem('auth_token', token);
243+
// Save token for reconnection — keyed per server/database
244+
localStorage.setItem(TOKEN_KEY, token);
241245
})
242246
.onConnectError((_ctx, error) => {
243247
console.error(`Connection failed:`, error);

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@ describe('App Integration Test', () => {
1010
const connectionBuilder = DbConnection.builder()
1111
.withUri('ws://localhost:3000')
1212
.withDatabaseName('quickstart-chat')
13-
.withToken(localStorage.getItem('auth_token') || '');
13+
.withToken(
14+
localStorage.getItem(
15+
'ws://localhost:3000/quickstart-chat/auth_token'
16+
) || ''
17+
);
1418
render(
1519
<SpacetimeDBProvider connectionBuilder={connectionBuilder}>
1620
<App />

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ import { DbConnection, ErrorContext } from './module_bindings/index.ts';
88

99
const HOST = import.meta.env.VITE_SPACETIMEDB_HOST ?? 'ws://localhost:3000';
1010
const DB_NAME = import.meta.env.VITE_SPACETIMEDB_DB_NAME ?? 'quickstart-chat';
11+
const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
1112

1213
const onConnect = (conn: DbConnection, identity: Identity, token: string) => {
13-
localStorage.setItem('auth_token', token);
14+
localStorage.setItem(TOKEN_KEY, token);
1415
console.log(
1516
'Connected to SpacetimeDB with identity:',
1617
identity.toHexString()
@@ -28,7 +29,7 @@ const onConnectError = (_ctx: ErrorContext, err: Error) => {
2829
const connectionBuilder = DbConnection.builder()
2930
.withUri(HOST)
3031
.withDatabaseName(DB_NAME)
31-
.withToken(localStorage.getItem('auth_token') || undefined)
32+
.withToken(localStorage.getItem(TOKEN_KEY) || undefined)
3233
.onConnect(onConnect)
3334
.onDisconnect(onDisconnect)
3435
.onConnectError(onConnectError);

‎templates/nextjs-ts/app/providers.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ import { Identity } from 'spacetimedb';
88
const HOST =
99
process.env.NEXT_PUBLIC_SPACETIMEDB_HOST ?? 'wss://maincloud.spacetimedb.com';
1010
const DB_NAME = process.env.NEXT_PUBLIC_SPACETIMEDB_DB_NAME ?? 'nextjs-ts';
11+
const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
1112

1213
const onConnect = (_conn: DbConnection, identity: Identity, token: string) => {
1314
if (typeof window !== 'undefined') {
14-
localStorage.setItem('auth_token', token);
15+
localStorage.setItem(TOKEN_KEY, token);
1516
}
1617
console.log(
1718
'Connected to SpacetimeDB with identity:',
@@ -32,10 +33,10 @@ export function Providers({ children }: { children: React.ReactNode }) {
3233
() =>
3334
DbConnection.builder()
3435
.withUri(HOST)
35-
.withModuleName(DB_NAME)
36+
.withDatabaseName(DB_NAME)
3637
.withToken(
3738
typeof window !== 'undefined'
38-
? localStorage.getItem('auth_token') || undefined
39+
? localStorage.getItem(TOKEN_KEY) || undefined
3940
: undefined
4041
)
4142
.onConnect(onConnect)

‎templates/nuxt-ts/app.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@ import { DbConnection, type ErrorContext } from './module_bindings';
1616
1717
const HOST = import.meta.env.VITE_SPACETIMEDB_HOST ?? 'ws://localhost:3000';
1818
const DB_NAME = import.meta.env.VITE_SPACETIMEDB_DB_NAME ?? 'nuxt-ts';
19+
const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
1920
2021
const onConnect = (_conn: DbConnection, identity: Identity, token: string) => {
21-
localStorage.setItem('auth_token', token);
22+
localStorage.setItem(TOKEN_KEY, token);
2223
console.log(
2324
'Connected to SpacetimeDB with identity:',
2425
identity.toHexString()
@@ -36,8 +37,8 @@ const onConnectError = (_ctx: ErrorContext, err: Error) => {
3637
const connectionBuilder = import.meta.client
3738
? DbConnection.builder()
3839
.withUri(HOST)
39-
.withModuleName(DB_NAME)
40-
.withToken(localStorage.getItem('auth_token') || undefined)
40+
.withDatabaseName(DB_NAME)
41+
.withToken(localStorage.getItem(TOKEN_KEY) || undefined)
4142
.onConnect(onConnect)
4243
.onDisconnect(onDisconnect)
4344
.onConnectError(onConnectError)

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ import { DbConnection, ErrorContext } from './module_bindings/index.ts';
77

88
const HOST = import.meta.env.VITE_SPACETIMEDB_HOST ?? 'ws://localhost:3000';
99
const DB_NAME = import.meta.env.VITE_SPACETIMEDB_DB_NAME ?? 'react-ts';
10+
const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
1011

1112
const onConnect = (_conn: DbConnection, identity: Identity, token: string) => {
12-
localStorage.setItem('auth_token', token);
13+
localStorage.setItem(TOKEN_KEY, token);
1314
console.log(
1415
'Connected to SpacetimeDB with identity:',
1516
identity.toHexString()
@@ -27,7 +28,7 @@ const onConnectError = (_ctx: ErrorContext, err: Error) => {
2728
const connectionBuilder = DbConnection.builder()
2829
.withUri(HOST)
2930
.withDatabaseName(DB_NAME)
30-
.withToken(localStorage.getItem('auth_token') || undefined)
31+
.withToken(localStorage.getItem(TOKEN_KEY) || undefined)
3132
.onConnect(onConnect)
3233
.onDisconnect(onDisconnect)
3334
.onConnectError(onConnectError);

‎templates/remix-ts/app/root.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,11 @@ import { Identity } from 'spacetimedb';
1414
const HOST =
1515
import.meta.env.VITE_SPACETIMEDB_HOST ?? 'wss://maincloud.spacetimedb.com';
1616
const DB_NAME = import.meta.env.VITE_SPACETIMEDB_DB_NAME ?? 'remix-ts';
17+
const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
1718

1819
const onConnect = (_conn: DbConnection, identity: Identity, token: string) => {
1920
if (typeof window !== 'undefined') {
20-
localStorage.setItem('auth_token', token);
21+
localStorage.setItem(TOKEN_KEY, token);
2122
}
2223
console.log(
2324
'Connected to SpacetimeDB with identity:',
@@ -46,8 +47,8 @@ function Providers({ children }: { children: React.ReactNode }) {
4647
if (typeof window === 'undefined') return null;
4748
return DbConnection.builder()
4849
.withUri(HOST)
49-
.withModuleName(DB_NAME)
50-
.withToken(localStorage.getItem('auth_token') || undefined)
50+
.withDatabaseName(DB_NAME)
51+
.withToken(localStorage.getItem(TOKEN_KEY) || undefined)
5152
.onConnect(onConnect)
5253
.onDisconnect(onDisconnect)
5354
.onConnectError(onConnectError);

0 commit comments

Comments
 (0)