use typescript, add signed header request using postmessage (#11)

* use typescript, add signed header request using postmessage * add example usage * add example usage * add session id to request * update sign interface * rename to login, add message * fix api * add example react app * add docs * add installation instruction * remove session id * add more options, add signify-extension-client message * move signify-extension-client message to constructor * fix readme
WebOfTrust · Jun 25, 2024 · 1ca8aab · 1ca8aab
1 parent 697eb6a
commit 1ca8aab
Show file tree

Hide file tree

Showing 20 changed files with 6,079 additions and 266 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}
diff --git a/README.md b/README.md
@@ -1 +1,27 @@
-# polaris-web
+# polaris-web
+
+
+##  Getting started
+
+See [web-react](./examples/web-react/src/App.tsx) for an example react web app that uses this library to communicate with a signify browser extension.
+
+To test the example,
+
+- `npm install`
+- `npm -w web-react start`
+
+
+To view generated documentation,
+
+- `npm install`
+- `npm run docs:serve`
+
+## Usage
+
+Install the package. At this point in time, the easiest way is to install straight from github.
+
+```
+npm install --save github:weboftrust/polaris-web#main
+```
+
+Change repository owner and branch as needed.
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,6 @@
+// @ts-check
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import prettierConfig from "eslint-config-prettier";
+
+export default tseslint.config(eslint.configs.recommended, ...tseslint.configs.recommended, prettierConfig);
diff --git a/examples/web-react/index.html b/examples/web-react/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Polaris Web Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/web-react/package.json b/examples/web-react/package.json
@@ -0,0 +1,17 @@
+{
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "start": "vite",
+        "dev": "vite"
+    },
+    "devDependencies": {
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "@vitejs/plugin-react": "^4.3.1",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "vite": "^5.3.1",
+        "signify-polaris-web": "file://../../"
+    }
+}
diff --git a/examples/web-react/src/App.tsx b/examples/web-react/src/App.tsx
@@ -0,0 +1,109 @@
+import { AuthorizeResult, createClient } from "signify-polaris-web";
+import { FormEvent, useEffect, useState } from "react";
+
+const client = createClient();
+
+export function App() {
+  const [extensionId, setExtensionId] = useState<string | false | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [authorizeResult, setAuthorizeResult] = useState<AuthorizeResult | null>(null);
+  const [headers, setHeaders] = useState<Record<string, string> | null>(null);
+  const [pending, setPending] = useState(false);
+  const [url, setUrl] = useState(window.location.href);
+  const [method, setMethod] = useState("GET");
+
+  useEffect(() => {
+    client.isExtensionInstalled().then((result) => setExtensionId(result));
+  }, []);
+
+  async function handleAuthorize(ev: FormEvent) {
+    ev.preventDefault();
+    setError(null);
+    setAuthorizeResult(null);
+    setPending(true);
+
+    try {
+      const result = await client.authorize({ message: `Message ${Date.now()}` });
+      setAuthorizeResult(result);
+    } catch (error) {
+      setError(error.message ?? "Something went wrong");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  async function handleSignHeaders(ev: FormEvent) {
+    ev.preventDefault();
+    setError(null);
+    setPending(true);
+    setHeaders(null);
+
+    try {
+      const result = await client.signRequest({ url, method });
+      setHeaders(result.headers);
+    } catch (error) {
+      setError(error.message ?? "Something went wrong");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <div style={{ maxWidth: 800, margin: "auto" }}>
+      <section>
+        <h1>Request login</h1>
+        <form id="login-form" onSubmit={handleAuthorize}>
+          <button type="submit" disabled={pending}>
+            Request Credential
+          </button>
+        </form>
+      </section>
+      <section>
+        <h1>Request signed headers</h1>
+        <form id="headers-form" onSubmit={handleSignHeaders}>
+          <div>
+            <label htmlFor="url">URL</label>
+            <input id="url" value={url} onChange={(ev) => setUrl(ev.currentTarget.value)} />
+          </div>
+          <div>
+            <label htmlFor="method">Method</label>
+            <input id="method" value={method} onChange={(ev) => setMethod(ev.currentTarget.value)} />
+          </div>
+          <div>
+            <button type="submit" disabled={!authorizeResult}>
+              Request Signed Headers
+            </button>
+          </div>
+        </form>
+      </section>
+      <section>
+        <h1>Current state</h1>
+        <pre style={{ maxHeight: 400, overflowY: "scroll" }}>
+          <code>
+            {JSON.stringify(
+              {
+                isInstalled: extensionId,
+                headers,
+                error,
+              },
+              null,
+              2,
+            )}
+          </code>
+        </pre>
+        <h1>Current credential</h1>
+        <pre style={{ maxHeight: 400, overflowY: "scroll" }}>
+          <code>
+            {JSON.stringify(
+              {
+                credential: authorizeResult?.credential,
+              },
+              null,
+              2,
+            )}
+          </code>
+        </pre>
+      </section>
+    </div>
+  );
+}
diff --git a/examples/web-react/src/main.tsx b/examples/web-react/src/main.tsx
@@ -0,0 +1,8 @@
+import { createRoot } from "react-dom/client";
+import { App } from "./App.tsx";
+
+const root = document.getElementById("root");
+
+if (root) {
+  createRoot(root).render(<App />);
+}
diff --git a/examples/web-react/tsconfig.json b/examples/web-react/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "paths": {
+      "signify-polaris-web": ["../../"]
+    }
+  }
+}
diff --git a/examples/web-react/vite.config.ts b/examples/web-react/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+});