docs(examples/tutorial): fetch tokens from pronto.getstream.io

Mirror the pattern used by examples/vite: credentials.ts now exports
apiKey, userId, userName, and a tokenProvider function that mints a
fresh JWT from pronto for whichever user_id is active. The app stays
runnable without pasting a token that expires, and users can switch
identities at runtime via ?user_id=... / ?user_name=... URL params.

- credentials.ts: drop the static userToken export; add a
  tokenProvider() that hits VITE_TOKEN_ENDPOINT (default
  https://pronto.getstream.io/api/auth/create-token) with
  VITE_TOKEN_ENVIRONMENT (default "demo") and the active user_id.
  userId/userName now derive from URL params first, then env, then
  sensible defaults.
- All 7 step App.tsx files: rename the userToken import and
  tokenOrProvider arg to tokenProvider.
- .env.example: drop VITE_USER_TOKEN; document the new optional
  VITE_TOKEN_ENDPOINT / VITE_TOKEN_ENVIRONMENT overrides and the
  URL-param fallbacks.

Author: oliverlaz

examples/tutorial/.env.example

@@ -1,4 +1,14 @@
+# Required: your Stream app's public key.
 VITE_API_KEY=REPLACE_WITH_API_KEY
-VITE_USER_ID=REPLACE_WITH_USER_ID
-VITE_USER_NAME=REPLACE_WITH_USER_NAME
-VITE_USER_TOKEN=REPLACE_WITH_USER_TOKEN
+
+# Optional. If unset, the app defaults to user_id "react-tutorial" and
+# derives user_name from it. You can also override either value per-run
+# via URL params:  ?user_id=alice&user_name=Alice
+# VITE_USER_ID=react-tutorial
+# VITE_USER_NAME=React Tutorial
+
+# Optional. Token endpoint used to mint a fresh JWT for the active
+# user_id. Defaults to Stream's demo endpoint; override if you're
+# pointing at a different Stream app / token service.
+# VITE_TOKEN_ENDPOINT=https://pronto.getstream.io/api/auth/create-token
+# VITE_TOKEN_ENVIRONMENT=demo

examples/tutorial/src/1-client-setup/App.tsx

@@ -1,10 +1,10 @@
 import { Chat, useCreateChatClient } from 'stream-chat-react';
-import { apiKey, userId, userName, userToken } from './credentials';
+import { apiKey, userId, userName, tokenProvider } from './credentials';
 
 const App = () => {
   const client = useCreateChatClient({
     apiKey,
-    tokenOrProvider: userToken,
+    tokenOrProvider: tokenProvider,
     userData: { id: userId, name: userName },
   });
 

examples/tutorial/src/1-client-setup/credentials.ts

@@ -1,5 +1,45 @@
-// your Stream app information
+// Stream Chat credentials for the tutorial example.
+//
+// The example fetches a fresh JWT from pronto.getstream.io for whichever
+// user_id is active, so the app stays runnable without pasting a token
+// that expires, and you can switch users via URL params at runtime:
+//
+//   ?user_id=alice                           // different user
+//   ?user_id=alice&user_name=Alice           // + display name override
+//
+// Notes:
+// - apiKey is the one thing you still need to set (via VITE_API_KEY).
+// - The token endpoint and environment default to the values shared with
+//   the other example apps in this repo; override with VITE_TOKEN_ENDPOINT
+//   and VITE_TOKEN_ENVIRONMENT if you're pointing at a different Stream
+//   app.
+
+const searchParams = new URLSearchParams(window.location.search);
+
 export const apiKey = import.meta.env.VITE_API_KEY;
-export const userId = import.meta.env.VITE_USER_ID;
-export const userName = import.meta.env.VITE_USER_NAME;
-export const userToken = import.meta.env.VITE_USER_TOKEN;
+
+export const userId =
+  searchParams.get('user_id') || import.meta.env.VITE_USER_ID || 'react-tutorial';
+
+export const userName =
+  searchParams.get('user_name') || import.meta.env.VITE_USER_NAME || userId;
+
+const tokenEndpoint =
+  import.meta.env.VITE_TOKEN_ENDPOINT ||
+  'https://pronto.getstream.io/api/auth/create-token';
+const tokenEnvironment = import.meta.env.VITE_TOKEN_ENVIRONMENT || 'demo';
+
+// Stream's `useCreateChatClient` accepts either a token string or a provider
+// function. A provider lets the SDK refresh the token on reconnect, which is
+// what we want for a long-running example session.
+export const tokenProvider = async (): Promise<string> => {
+  const url = `${tokenEndpoint}?environment=${encodeURIComponent(
+    tokenEnvironment,
+  )}&user_id=${encodeURIComponent(userId)}`;
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to mint token from ${tokenEndpoint} (${response.status})`);
+  }
+  const data = (await response.json()) as { token: string };
+  return data.token;
+};

examples/tutorial/src/2-core-component-setup/App.tsx

@@ -13,7 +13,7 @@ import {
 
 import 'stream-chat-react/dist/css/index.css';
 import './layout.css';
-import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
+import { apiKey, userId, userName, tokenProvider } from '../1-client-setup/credentials';
 
 const user: User = {
   id: userId,
@@ -25,7 +25,7 @@ const App = () => {
   const [channel, setChannel] = useState<StreamChannel>();
   const client = useCreateChatClient({
     apiKey,
-    tokenOrProvider: userToken,
+    tokenOrProvider: tokenProvider,
     userData: user,
   });
 

examples/tutorial/src/3-channel-list/App.tsx

@@ -12,7 +12,7 @@ import {
 } from 'stream-chat-react';
 
 import './layout.css';
-import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
+import { apiKey, userId, userName, tokenProvider } from '../1-client-setup/credentials';
 
 const user: User = {
   id: userId,
@@ -32,7 +32,7 @@ const options: ChannelOptions = {
 const App = () => {
   const client = useCreateChatClient({
     apiKey,
-    tokenOrProvider: userToken,
+    tokenOrProvider: tokenProvider,
     userData: user,
   });
 

examples/tutorial/src/4-custom-ui-components/App.tsx

@@ -17,7 +17,7 @@ import {
 } from 'stream-chat-react';
 
 import './layout.css';
-import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
+import { apiKey, userId, userName, tokenProvider } from '../1-client-setup/credentials';
 
 const user: User = {
   id: userId,
@@ -118,7 +118,7 @@ const App = () => {
   const [isReady, setIsReady] = useState(false);
   const client = useCreateChatClient({
     apiKey,
-    tokenOrProvider: userToken,
+    tokenOrProvider: tokenProvider,
     userData: user,
   });
 

examples/tutorial/src/5-custom-attachment-type/App.tsx

@@ -19,7 +19,7 @@ import {
 } from 'stream-chat-react';
 
 import './layout.css';
-import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
+import { apiKey, userId, userName, tokenProvider } from '../1-client-setup/credentials';
 
 const user: User = {
   id: userId,
@@ -76,7 +76,7 @@ const App = () => {
   const [channel, setChannel] = useState<StreamChannel>();
   const client = useCreateChatClient({
     apiKey,
-    tokenOrProvider: userToken,
+    tokenOrProvider: tokenProvider,
     userData: user,
   });
 

examples/tutorial/src/6-emoji-picker/App.tsx

@@ -18,7 +18,7 @@ import { init, SearchIndex } from 'emoji-mart';
 import data from '@emoji-mart/data';
 
 import './layout.css';
-import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
+import { apiKey, userId, userName, tokenProvider } from '../1-client-setup/credentials';
 
 const user: User = {
   id: userId,
@@ -38,7 +38,7 @@ const App = () => {
   const [isReady, setIsReady] = useState(false);
   const client = useCreateChatClient({
     apiKey,
-    tokenOrProvider: userToken,
+    tokenOrProvider: tokenProvider,
     userData: user,
   });
 

examples/tutorial/src/7-livestream/App.tsx

@@ -11,7 +11,7 @@ import {
 } from 'stream-chat-react';
 
 import './layout.css';
-import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
+import { apiKey, userId, userName, tokenProvider } from '../1-client-setup/credentials';
 
 const user: User = {
   id: userId,
@@ -23,7 +23,7 @@ const App = () => {
   const [channel, setChannel] = useState<StreamChannel>();
   const chatClient = useCreateChatClient({
     apiKey,
-    tokenOrProvider: userToken,
+    tokenOrProvider: tokenProvider,
     userData: user,
   });