Reimplement sharing functionality in playground based off of serverless functions (#72)

Author: josephschorr

README.md

@@ -64,6 +64,28 @@ vercel deploy --prebuilt
 
 > ℹ️ Git Large File Storage (LFS) must be enabled in your Vercel project settings.
 
+#### Enabling sharing functionality
+
+To enable the sharing functionality on Vercel, you need to configure the following environment variables in your Vercel project settings:
+
+**Required for sharing:**
+
+- `S3_ENDPOINT` - Your S3-compatible storage endpoint (e.g., `https://s3.amazonaws.com` for AWS S3)
+- `S3_BUCKET` - Name of the S3 bucket to store shared playground data
+- `SHARE_SALT` - A random string used for generating share hashes (keep this secret)
+- `AWS_ACCESS_KEY_ID` - AWS access key for S3 access
+- `AWS_SECRET_ACCESS_KEY` - AWS secret key for S3 access
+- `VITE_SHARE_API_ENDPOINT` - The URL of your deployed Vercel instance (e.g., `https://your-playground.vercel.app`)
+
+**Optional:**
+
+- `VITE_GOOGLE_ANALYTICS_MEASUREMENT_ID` - Google Analytics measurement ID
+- `VITE_DISCORD_CHANNEL_ID` - Discord channel ID for embedded chat
+- `VITE_DISCORD_SERVER_ID` - Discord server ID
+- `VITE_DISCORD_INVITE_URL` - Discord invite URL (defaults to https://authzed.com/discord)
+
+You can set these environment variables in the Vercel dashboard under your project's Settings > Environment Variables.
+
 ### NodeJS
 
 The `build` directory in the project root directory after running `yarn build` will contain an optimized production React application that can be served using your preferred NodeJS hosting method.
@@ -92,6 +114,14 @@ Install LFS: `git lfs install`
 yarn run dev
 ```
 
+### Running for development with sharing enabled
+
+The `vercel` CLI can be used to run locally with sharing enabled:
+
+```
+VITE_SHARE_API_ENDPOINT=http://localhost:3000 SHARE_SALT=... AWS_ACCESS_KEY_ID=... AWS_SECRET_ACCESS_KEY=... S3_ENDPOINT=... S3_BUCKET=...  vercel dev
+```
+
 ## Updating wasm dependencies
 
 The project contains prebuilt WASM files for versions of both SpiceDB and zed. To update the versions, edit the [wasm-config.json] file with the desired tag/commit hash and then run from the project root:
@@ -122,7 +152,7 @@ docker build . -t tag-for-playground-image
 Build args can be specified for the build-time environment variables:
 
 ```
-docker build --build-arg VITE_AUTHZED_DEVELOPER_GATEWAY_ENDPOINT=https://my.developer.endpoint . -t tag-for-playground-image
+docker build --build-arg VITE_SHARE_API_ENDPOINT=https://my.playground.endpoint . -t tag-for-playground-image
 ```
 
 ## Developing your own schema

api/lookupshare.ts

@@ -0,0 +1,88 @@
+import { GetObjectCommand, S3Client } from "@aws-sdk/client-s3";
+import type { VercelRequest, VercelResponse } from "@vercel/node";
+
+const encodeURL =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  const shareid = req.query.shareid ?? "";
+  if (typeof shareid !== "string") {
+    return res.status(400).json({ error: "Invalid shareid" });
+  }
+
+  if (!shareid) {
+    return res.status(400).json({ error: "Share ID is required" });
+  }
+
+  // Validate shareid contains only allowed characters
+  for (const char of shareid) {
+    if (!encodeURL.includes(char)) {
+      return res.status(400).json({ error: "Invalid characters in share ID" });
+    }
+  }
+
+  // Check for required environment variables
+  const s3Endpoint = process.env.S3_ENDPOINT;
+  const s3Bucket = process.env.S3_BUCKET;
+  if (!s3Endpoint || !s3Bucket) {
+    console.warn("S3_ENDPOINT or S3_BUCKET environment variables are not set");
+    return res.status(404).json({ error: "Share not found" });
+  }
+
+  try {
+    // Initialize S3 client
+    const s3Client = new S3Client({
+      endpoint: s3Endpoint,
+      region: "auto",
+    });
+
+    // Get object from S3
+    const command = new GetObjectCommand({
+      Bucket: s3Bucket,
+      Key: `shared/${shareid}`,
+    });
+
+    const response = await s3Client.send(command);
+    if (!response.Body) {
+      return res.status(404).json({ error: "Share not found" });
+    }
+
+    // Read the stream and convert to string
+    const bodyContents = await response.Body.transformToString();
+
+    // Parse JSON
+    let shareData;
+    try {
+      shareData = JSON.parse(bodyContents);
+    } catch (error) {
+      console.error("Error parsing JSON for share store:", shareid, error);
+      return res.status(400).json({ error: "Invalid JSON in share data" });
+    }
+
+    // Validate version
+    if (shareData.version !== "2") {
+      return res.status(400).json({ error: "Older version is unsupported" });
+    }
+
+    // Validate required string keys if present
+    const requiredStringKeys = [
+      "schema",
+      "relationships_yaml",
+      "validation_yaml",
+      "assertions_yaml",
+    ];
+    for (const key of requiredStringKeys) {
+      if (key in shareData && typeof shareData[key] !== "string") {
+        return res.status(400).json({ error: "Share data is not supported" });
+      }
+    }
+
+    return res.status(200).send(bodyContents);
+  } catch (error) {
+    if (error instanceof Error && error.name === "NoSuchKey") {
+      return res.status(404).json({ error: "Share not found" });
+    }
+    console.error("Error retrieving share data:", error);
+    return res.status(500).json({ error: "Internal server error" });
+  }
+}

api/share.ts

@@ -0,0 +1,135 @@
+import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3";
+import type { VercelRequest, VercelResponse } from "@vercel/node";
+import { createHash } from "crypto";
+
+const encodeURL =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
+
+export type SharedDataV2 = {
+  version: "2";
+  schema: string;
+  relationships_yaml?: string;
+  validation_yaml?: string;
+  assertions_yaml?: string;
+};
+
+const hashPrefixSize = 12;
+
+function computeShareHash(salt: string, data: string): string {
+  const hash = createHash("sha256");
+  hash.update(salt + ":", "utf8");
+  hash.update(data, "utf8");
+
+  const sum = hash.digest();
+  const b64 = sum.toString("base64url");
+
+  let hashLen = hashPrefixSize;
+  while (hashLen <= b64.length && b64[hashLen - 1] === "_") {
+    hashLen++;
+  }
+
+  return b64.substring(0, hashLen);
+}
+
+function validateSharedDataV2(data): data is SharedDataV2 {
+  if (typeof data !== "object" || data === null) {
+    return false;
+  }
+
+  if (data.version !== "2") {
+    return false;
+  }
+
+  if (typeof data.schema !== "string") {
+    return false;
+  }
+
+  const optionalStringFields = [
+    "relationships_yaml",
+    "validation_yaml",
+    "assertions_yaml",
+  ];
+  for (const field of optionalStringFields) {
+    if (field in data && typeof data[field] !== "string") {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  if (req.method !== "POST") {
+    return res.status(405).json({ error: "Method not allowed" });
+  }
+
+  // Check for required environment variables
+  const s3Endpoint = process.env.S3_ENDPOINT;
+  const s3Bucket = process.env.S3_BUCKET;
+  const shareSalt = process.env.SHARE_SALT;
+
+  if (!s3Endpoint || !s3Bucket) {
+    console.error("S3_ENDPOINT or S3_BUCKET environment variables are not set");
+    return res.status(500).json({ error: "Server configuration error" });
+  }
+
+  if (!shareSalt) {
+    console.error("SHARE_SALT environment variable is not set");
+    return res.status(500).json({ error: "Server configuration error" });
+  }
+
+  // Validate request body
+  const body = req.body;
+  if (!body || typeof body !== "object") {
+    console.error("Invalid request body:", body);
+    return res.status(400).json({ error: "Invalid request body" });
+  }
+
+  try {
+    if (!validateSharedDataV2(body)) {
+      return res.status(400).json({ error: "Invalid share data format" });
+    }
+  } catch {
+    return res.status(400).json({ error: "Invalid JSON" });
+  }
+
+  // Compute the share hash
+  const dataString = JSON.stringify(body);
+  const shareHash = computeShareHash(shareSalt, dataString);
+
+  // Validate that the computed hash only contains allowed characters
+  for (const char of shareHash) {
+    if (!encodeURL.includes(char)) {
+      console.error(
+        "Computed hash contains invalid character:",
+        char,
+        "in hash:",
+        shareHash,
+      );
+      return res.status(500).json({ error: "Hash generation error" });
+    }
+  }
+
+  try {
+    // Initialize S3 client
+    const s3Client = new S3Client({
+      endpoint: s3Endpoint,
+      region: "auto",
+    });
+
+    // Store in S3
+    const command = new PutObjectCommand({
+      Bucket: s3Bucket,
+      Key: `shared/${shareHash}`,
+      Body: dataString,
+      ContentType: "application/json",
+    });
+
+    await s3Client.send(command);
+
+    return res.status(200).json({ hash: shareHash });
+  } catch (error) {
+    console.error("Error storing share data:", error);
+    return res.status(500).json({ error: "Failed to store share data" });
+  }
+}

package.json

@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.3",
+    "@aws-sdk/client-s3": "^3.0.0",
     "@apollo/link-context": "^2.0.0-beta.3",
     "@bufbuild/protobuf": "^2.4.0",
     "@connectrpc/connect": "^2.0.2",
@@ -26,6 +27,7 @@
     "@tailwindcss/vite": "^4.1.5",
     "@tanstack/react-router": "^1.119.0",
     "@tanstack/react-router-devtools": "^1.119.1",
+    "@vercel/node": "^5.2.0",
     "ansi-to-html": "^0.7.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

src/components/EmbeddedPlayground.tsx

@@ -10,9 +10,6 @@ import {
   CheckOperationsResult_Membership,
   CheckOperationsResultSchema,
 } from "../spicedb-common/protodefs/developer/v1/developer_pb";
-import { DeveloperService } from "../spicedb-common/protodefs/authzed/api/v0/developer_pb";
-import { createGrpcWebTransport } from "@connectrpc/connect-web";
-import { createClient, ConnectError } from "@connectrpc/connect";
 import { useDeveloperService } from "../spicedb-common/services/developerservice";
 import {
   faCaretDown,
@@ -279,18 +276,11 @@ function EmbeddedPlaygroundUI(props: { datastore: DataStore }) {
   const { showAlert } = useAlert();
 
   const shareAndOpen = async () => {
-    const developerEndpoint = AppConfig().authzed?.developerEndpoint;
-    if (!developerEndpoint) {
+    const shareApiEndpoint = AppConfig().shareApiEndpoint;
+    if (!shareApiEndpoint) {
       return;
     }
 
-    const client = createClient(
-      DeveloperService,
-      createGrpcWebTransport({
-        baseUrl: developerEndpoint,
-      }),
-    );
-
     const schema = datastore.getSingletonByKind(
       DataStoreItemKind.SCHEMA,
     ).editableContents!;
@@ -306,23 +296,43 @@ function EmbeddedPlaygroundUI(props: { datastore: DataStore }) {
 
     // Invoke sharing.
     try {
-      const response = await client.share({
-        schema,
-        relationshipsYaml,
-        assertionsYaml,
-        validationYaml,
+      const response = await fetch(`${shareApiEndpoint}/api/share`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          version: "2",
+          schema,
+          relationships_yaml: relationshipsYaml,
+          assertions_yaml: assertionsYaml,
+          validation_yaml: validationYaml,
+        }),
       });
-      const reference = response.shareReference;
-      window.open(`${window.location.origin}/s/${reference}`);
-    } catch (error: unknown) {
-      if (error instanceof ConnectError) {
+
+      if (!response.ok) {
+        const errorData = await response
+          .json()
+          .catch(() => ({ error: "Unknown error" }));
         showAlert({
           title: "Error sharing",
-          content: error.message,
+          content: errorData.error || "Failed to share playground",
           buttonTitle: "Okay",
         });
         return;
       }
+
+      const result = await response.json();
+      const reference = result.hash;
+      window.open(`${window.location.origin}/s/${reference}`);
+    } catch (error: unknown) {
+      showAlert({
+        title: "Error sharing",
+        content:
+          error instanceof Error ? error.message : "Failed to share playground",
+        buttonTitle: "Okay",
+      });
+      return;
     }
   };