From 5b42f3e08f4a34e96fca245d91273fbd4e69d4a5 Mon Sep 17 00:00:00 2001 From: Travis Vachon Date: Mon, 23 Jan 2023 15:00:12 -0800 Subject: [PATCH] wip: fake keyring playground I wanted to prove to myself that postMessage would be a viable way to communicate between an app and the keyring site, so I created two example apps and got them to talk to eachother. to try this out, in two different consoles run: console a: ``` cd examples/react/fake-keyring pnpm install pnpm run dev ``` console b: ``` cd examples/react/fake-keyring pnpm install pnpm run dev ``` then head to `http://localhost:3000` and hit "grab the keys" you should see output in the console confirming this cross-origin communication works as expected, with some TODOs that sketch out what the keyring might need to do to make this all work as expected. big open question for me - does the UCAN need to be transmitted all the way back to the app domain or can we just store it on the server as proof that a user has granted a domain access to a particular set of capabilities? --- examples/react/fake-keyring-app/.gitignore | 24 ++++++ examples/react/fake-keyring-app/index.html | 13 ++++ examples/react/fake-keyring-app/package.json | 21 +++++ .../react/fake-keyring-app/public/vite.svg | 1 + examples/react/fake-keyring-app/src/App.css | 41 ++++++++++ examples/react/fake-keyring-app/src/App.jsx | 38 ++++++++++ .../fake-keyring-app/src/assets/react.svg | 1 + examples/react/fake-keyring-app/src/index.css | 70 +++++++++++++++++ examples/react/fake-keyring-app/src/main.jsx | 10 +++ .../react/fake-keyring-app/vite.config.js | 10 +++ examples/react/fake-keyring/.gitignore | 24 ++++++ examples/react/fake-keyring/index.html | 13 ++++ examples/react/fake-keyring/package.json | 21 +++++ examples/react/fake-keyring/public/vite.svg | 1 + examples/react/fake-keyring/src/App.css | 41 ++++++++++ examples/react/fake-keyring/src/App.jsx | 33 ++++++++ .../react/fake-keyring/src/assets/react.svg | 1 + examples/react/fake-keyring/src/index.css | 70 +++++++++++++++++ examples/react/fake-keyring/src/main.jsx | 10 +++ examples/react/fake-keyring/vite.config.js | 10 +++ pnpm-lock.yaml | 76 +++++++++++++++---- 21 files changed, 515 insertions(+), 14 deletions(-) create mode 100644 examples/react/fake-keyring-app/.gitignore create mode 100644 examples/react/fake-keyring-app/index.html create mode 100644 examples/react/fake-keyring-app/package.json create mode 100644 examples/react/fake-keyring-app/public/vite.svg create mode 100644 examples/react/fake-keyring-app/src/App.css create mode 100644 examples/react/fake-keyring-app/src/App.jsx create mode 100644 examples/react/fake-keyring-app/src/assets/react.svg create mode 100644 examples/react/fake-keyring-app/src/index.css create mode 100644 examples/react/fake-keyring-app/src/main.jsx create mode 100644 examples/react/fake-keyring-app/vite.config.js create mode 100644 examples/react/fake-keyring/.gitignore create mode 100644 examples/react/fake-keyring/index.html create mode 100644 examples/react/fake-keyring/package.json create mode 100644 examples/react/fake-keyring/public/vite.svg create mode 100644 examples/react/fake-keyring/src/App.css create mode 100644 examples/react/fake-keyring/src/App.jsx create mode 100644 examples/react/fake-keyring/src/assets/react.svg create mode 100644 examples/react/fake-keyring/src/index.css create mode 100644 examples/react/fake-keyring/src/main.jsx create mode 100644 examples/react/fake-keyring/vite.config.js diff --git a/examples/react/fake-keyring-app/.gitignore b/examples/react/fake-keyring-app/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/examples/react/fake-keyring-app/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/react/fake-keyring-app/index.html b/examples/react/fake-keyring-app/index.html new file mode 100644 index 00000000..79c47019 --- /dev/null +++ b/examples/react/fake-keyring-app/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
+ + + diff --git a/examples/react/fake-keyring-app/package.json b/examples/react/fake-keyring-app/package.json new file mode 100644 index 00000000..c6aaa3f1 --- /dev/null +++ b/examples/react/fake-keyring-app/package.json @@ -0,0 +1,21 @@ +{ + "name": "fake-keyring-app", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.0.26", + "@types/react-dom": "^18.0.9", + "@vitejs/plugin-react": "^3.0.0", + "vite": "^4.0.0" + } +} \ No newline at end of file diff --git a/examples/react/fake-keyring-app/public/vite.svg b/examples/react/fake-keyring-app/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/examples/react/fake-keyring-app/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/react/fake-keyring-app/src/App.css b/examples/react/fake-keyring-app/src/App.css new file mode 100644 index 00000000..2c5e2ef5 --- /dev/null +++ b/examples/react/fake-keyring-app/src/App.css @@ -0,0 +1,41 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/examples/react/fake-keyring-app/src/App.jsx b/examples/react/fake-keyring-app/src/App.jsx new file mode 100644 index 00000000..9ca19f26 --- /dev/null +++ b/examples/react/fake-keyring-app/src/App.jsx @@ -0,0 +1,38 @@ +import { useRef, useEffect } from 'react' +import './App.css' + +function log(...args){ + console.log(window.location.toString() + " ", ...args) +} + +function KeyringUserApp () { + const keyringRef = useRef() + function requestKeys () { + keyringRef.current.contentWindow.postMessage("gimme the keys", "http://localhost:3001") + } + + useEffect(function () { + window.addEventListener("message", (event) => { + log(`app received "${event.data}" from keyring domain`) + // TODO: replace this with keyring site URL + if (event.origin !== "http://localhost:3001") + return; + + log("TODO: stash UCAN somewhere and send it along with requests (?)") + }, false); + }, []) + + return ( +
+