add authentication to ditto

Author: marinakuksoditto

Diff for: src/App.js

@@ -3,6 +3,8 @@ import './App.css';
 import Ditto from "./ditto"
 import { useAuth0 } from "@auth0/auth0-react"
 
+const domain = "YOUR_AUTH0_DOMAIN_HERE";
+
 let ditto
 function App() {
   const { user, loginWithRedirect, getAccessTokenSilently, isAuthenticated, logout } = useAuth0()
@@ -11,23 +13,30 @@ function App() {
 
   useEffect(() => {
     let liveQuery
-    async function startDitto() {
-      ditto = Ditto()
-      liveQuery = ditto.store
-        .collection('cars')
+    async function refreshToken () {
+      const accessToken = await getAccessTokenSilently({
+        audience: `https://${domain}/api/v2/`,
+        scope: "read:current_user",
+      });
+
+      ditto = Ditto(accessToken)
+      liveQuery = ditto.store.collection('cars')
         .findAll()
         .observeLocal((tickets) => {
           setCars(tickets.length)
         })
     }
-    startDitto() 
+
+    if (user) {
+      refreshToken()
+    }
     return () => {
       liveQuery?.stop()
     }
-  }, []);
+  }, [user, getAccessTokenSilently]);
 
   function onAddClick (){
-    if (!ditto) return setError('No Ditto.')
+    if (!ditto || !user) return setError('You must log in first.')
     setError('')
     ditto.store.collection('cars').upsert({
       "name": 'Toyota'

Diff for: src/ditto.js

@@ -1,12 +1,20 @@
 import { Ditto } from '@dittolive/ditto'
 
 let ditto
-export default function get() {
+export default function get(token) {
   if (!ditto) {
+    const authHandler = {
+      authenticationRequired: async function (authenticator) {
+        authenticator.loginWithToken(token, 'replit-auth')
+      },
+      authenticationExpiringSoon: function (authenticator, secondsRemaining) {
+        authenticator.loginWithToken(token, 'replit-auth')
+      },
+    }
     const identity = {
       type: 'onlineWithAuthentication',
       appID: 'YOUR_DITTO_APP_ID_HERE',
-      token: 'YOUR_DITTO_TOKEN_HERE'
+      authHandler: authHandler
     }
     ditto = new Ditto(identity, '/ditto')
     ditto.startSync()