Use development tokens for example-nextjs.

Author: rkistner

demos/example-nextjs/.env.local.template

@@ -1 +1,4 @@
+# Copy to .env.local, and complete these variables.
+# Leave blank to test local-only.
 NEXT_PUBLIC_POWERSYNC_URL=
+NEXT_PUBLIC_POWERSYNC_TOKEN=

demos/example-nextjs/README.md

@@ -5,5 +5,6 @@ This example is built using [Next.js](https://nextjs.org/) and the [PowerSync JS
 To see it in action:
 
 1. Make sure to run `pnpm build:packages` in the root directory of this Git repo.
-2. `pnpm start`
-3. Open the localhost URL in the browser displayed in the terminal output.
+2. Copy `.env.local.template` to `.env.local`, and complete the environment variables. You can generate a temporary development token on the PowerSync dashboard, or leave blank to test with local-only data.
+3. `pnpm start`
+4. Open the localhost URL in the browser displayed in the terminal output.

demos/example-nextjs/src/library/powersync/BackendConnector.ts

@@ -1,27 +1,26 @@
 import { AbstractPowerSyncDatabase, BaseObserver, PowerSyncBackendConnector } from '@journeyapps/powersync-sdk-web';
 
-export type BackendConfig = {
-  powersyncUrl: string;
-};
-
-export type BackendConnectorListener = {
-  initialized: () => void;
-};
-
-export class BackendConnector extends BaseObserver<BackendConnectorListener> implements PowerSyncBackendConnector {
-  private _config: BackendConfig;
+export class BackendConnector implements PowerSyncBackendConnector {
+  private powersyncUrl: string | undefined;
+  private powersyncToken: string | undefined;
 
   constructor() {
-    super();
-    this._config = {
-      powersyncUrl: process.env.NEXT_PUBLIC_POWERSYNC_URL!
-    };
+    this.powersyncUrl = process.env.NEXT_PUBLIC_POWERSYNC_URL;
+    // This token is for development only.
+    // For production applications, integrate with an auth provider or custom auth.
+    this.powersyncToken = process.env.NEXT_PUBLIC_POWERSYNC_TOKEN;
   }
 
   async fetchCredentials() {
+    // TODO: Use an authentication service or custom implementation here.
+
+    if (this.powersyncToken == null || this.powersyncUrl == null) {
+      return null;
+    }
+
     return {
-      endpoint: this._config.powersyncUrl,
-      token: '' // TODO: Implement
+      endpoint: this.powersyncUrl,
+      token: this.powersyncToken
     };
   }
 
@@ -38,13 +37,11 @@ export class BackendConnector extends BaseObserver<BackendConnectorListener> imp
       await transaction.complete();
     } catch (error: any) {
       if (shouldDiscardDataOnError(error)) {
-        /**
-         * Instead of blocking the queue with these errors, discard the (rest of the) transaction.
-         *
-         * Note that these errors typically indicate a bug in the application.
-         * If protecting against data loss is important, save the failing records
-         * elsewhere instead of discarding, and/or notify the user.
-         */
+        // Instead of blocking the queue with these errors, discard the (rest of the) transaction.
+        //
+        // Note that these errors typically indicate a bug in the application.
+        // If protecting against data loss is important, save the failing records
+        // elsewhere instead of discarding, and/or notify the user.
         console.error(`Data upload error - discarding`, error);
         await transaction.complete();
       } else {