From 3b1106c21b6ea99ed6d38501bc8aad135c1a3a71 Mon Sep 17 00:00:00 2001
From: Rae McKelvey <633012+okdistribute@users.noreply.github.com>
Date: Tue, 5 Aug 2025 13:41:19 -0700
Subject: [PATCH] Add JS example for initialization revamp

---
 javascript-web/package-lock.json |  9 ++++---
 javascript-web/package.json      |  2 +-
 javascript-web/src/App.tsx       | 43 ++++++++++++++++++++------------
 3 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/javascript-web/package-lock.json b/javascript-web/package-lock.json
index 71f34f1f2..5a0580547 100644
--- a/javascript-web/package-lock.json
+++ b/javascript-web/package-lock.json
@@ -8,7 +8,7 @@
       "name": "ditto-quickstart-vite",
       "version": "0.0.0",
       "dependencies": {
-        "@dittolive/ditto": "^4.11.1",
+        "@dittolive/ditto": "^4.12.0-preview.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
       },
@@ -2461,9 +2461,10 @@
       "license": "MIT"
     },
     "node_modules/@dittolive/ditto": {
-      "version": "4.11.1",
-      "resolved": "https://registry.npmjs.org/@dittolive/ditto/-/ditto-4.11.1.tgz",
-      "integrity": "sha512-Vp7ItuZE8BZGIwEPIdnv2WbILH1cb37Qjt5y9NLMhEDxdEgd56zXnQ3NSBuAk9YYXFegizhd51KJ8/LUchMxsQ==",
+      "version": "4.12.0-preview.2",
+      "resolved": "https://registry.npmjs.org/@dittolive/ditto/-/ditto-4.12.0-preview.2.tgz",
+      "integrity": "sha512-jZbhpyhPLT9QSEBS5AKzIRn07xe+hjWk2iyeAuiGN/ScVFchB/hsbBl73wHm1qgOdCcUYw7yrQKBByhTIWU+jQ==",
+      "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@expo/config-plugins": "^9.0.11",
         "cbor-redux": "^1.0.0",
diff --git a/javascript-web/package.json b/javascript-web/package.json
index 6fc8feac1..4e963831a 100644
--- a/javascript-web/package.json
+++ b/javascript-web/package.json
@@ -11,7 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dittolive/ditto": "^4.11.1",
+    "@dittolive/ditto": "^4.12.0-preview.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
diff --git a/javascript-web/src/App.tsx b/javascript-web/src/App.tsx
index e13679fa4..fe6729c8a 100644
--- a/javascript-web/src/App.tsx
+++ b/javascript-web/src/App.tsx
@@ -1,8 +1,9 @@
 import {
   Ditto,
-  IdentityOnlinePlayground,
+  DittoConfig,
   StoreObserver,
   SyncSubscription,
+  Authenticator,
   init,
 } from '@dittolive/ditto';
 import './App.css';
@@ -10,13 +11,9 @@ import DittoInfo from './components/DittoInfo';
 import { useEffect, useRef, useState } from 'react';
 import TaskList from './components/TaskList';
 
-const identity: IdentityOnlinePlayground = {
-  type: 'onlinePlayground',
-  appID: import.meta.env.DITTO_APP_ID,
-  token: import.meta.env.DITTO_PLAYGROUND_TOKEN,
-  customAuthURL: import.meta.env.DITTO_AUTH_URL,
-  enableDittoCloudSync: false,
-};
+const databaseId = import.meta.env.DITTO_DATABASE_ID;
+const devToken = import.meta.env.DITTO_DEV_TOKEN;
+const authUrl = import.meta.env.DITTO_AUTH_URL;
 
 export type Task = {
   _id: string;
@@ -57,12 +54,26 @@ const App = () => {
       try {
         // Create a new Ditto instance with the identity
         // https://docs.ditto.live/sdk/latest/install-guides/js#integrating-ditto-and-starting-sync
-        ditto.current = new Ditto(identity);
-
-        // Initialize transport config
-        ditto.current.updateTransportConfig((config) => {
-          config.connect.websocketURLs = [import.meta.env.DITTO_WEBSOCKET_URL];
-          return config;
+        ditto.current = await Ditto.open(new DittoConfig(
+          databaseId,
+          {
+            type: 'server',
+            url: authUrl,
+          }
+        ));
+        ditto.current.auth.setExpirationHandler(async (ditto, expirationSeconds) => {
+            // Authenticate when token is expiring
+            try {
+                await ditto.auth.login(
+                    // Your development token, replace with your actual token
+                    devToken,
+                    // Use Authenticator.DEVELOPMENT_PROVIDER for playground, or your actual provider name
+                    Authenticator.DEVELOPMENT_PROVIDER
+                );
+                console.log("Authentication successful");
+            } catch (error) {
+                console.error("Authentication failed:", error);
+            }
         });
 
         // disable sync with v3 peers, required for DQL
@@ -202,8 +213,8 @@ const App = () => {
       <div className="h-full w-full flex flex-col container mx-auto items-center">
         {error && <ErrorMessage error={error} />}
         <DittoInfo
-          appId={identity.appID}
-          token={identity.token}
+          appId={databaseId}
+          token={devToken}
           syncEnabled={syncActive}
           onToggleSync={toggleSync}
           isInitialized={isInitialized}