sketch more of the user verif flow

blehhhhhhhhhhhh

atproto-notifications/public/service-worker.js

···
+self.addEventListener('push', handlePush);
+
+function handlePush(event) {
+  const { title, body } = event.data.json();
+  // const icon = '/images/icon.png';
+  // const tag = 'simple-push-demo-notification-tag';
+  event.waitUntil(self.registration.showNotification(title, { body }));
+  // TODO: resubscribe to notifs to try to stay alive
+}

atproto-notifications/public/vite.svg

···
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

atproto-notifications/src/App.tsx

···
+import { useCallback, useState } from 'react';
 import { useLocalStorage } from "@uidotdev/usehooks";
 import { HostContext } from './context'
 import { WhoAmI } from './components/WhoAmI';
+import { urlBase64ToUint8Array } from './utils';
 import './App.css'
 
+const Problem = ({ children }) => (
+  <div className="problem">
+    <p>Sorry, {children}</p>
+  </div>
+);
+
+function requestPermission(setAsking) {
+  return async () => {
+    setAsking(true);
+    let err;
+    try {
+      await Notification.requestPermission();
+      await subscribeToPush();
+    } catch (e) {
+      err = e;
+    }
+    setAsking(false);
+    if (err) throw err;
+
+  }
+}
+
+async function subscribeToPush() {
+  const registration = await navigator.serviceWorker.register('/service-worker.js');
+  const subscribeOptions = {
+    userVisibleOnly: true,
+    applicationServerKey: urlBase64ToUint8Array(import.meta.env.VITE_PUSH_PUBKEY),
+  };
+  const pushSubscription = await registration.pushManager.subscribe(subscribeOptions);
+  console.log({ pushSubscription });
+}
+
+async function verifyUser(host, token) {
+  let res = await fetch(`${host}/verify`, {
+    method: 'POST',
+    headers: {'Content-Type': 'applicaiton/json'},
+    body: JSON.stringify({ token }),
+  });
+  if (!res.ok) throw res;
+}
+
 function App() {
   const [host, setHost] = useLocalStorage('spacedust-notif-host', 'http://localhost:8000');
   const [user, setUser] = useLocalStorage('spacedust-notif-user', null);
+  const [verif, setVerif] = useState(null);
+  const [asking, setAsking] = useState(false);
+
+  const onIdentify = useCallback(async details => {
+    setVerif('verifying');
+    try {
+      await verifyUser(host, details.token)
+      setVerif('verified');
+      setUser(details);
+    } catch (e) {
+      console.error(e);
+      setVerif('failed');
+    }
+    // setTimeout(() => {
+    //   setVerif('verified');
+    //   setUser(details);
+    // }, 400);
+  }, [host]);
+
+  let hasSW = 'serviceWorker' in navigator;
+  let hasPush = 'PushManager' in window;
+  let notifPerm = Notification?.permission ?? 'default';
+
+  let content;
+  if (!hasSW) {
+    content = <Problem>your browser does not support the background task needd to deliver notifications</Problem>;
+  } else if (!hasPush) {
+    content = <Problem>your browser does not support registering push notifications.</Problem>
+  } else if (!user) {
+    if (verif === 'verifying') content = <p><em>verifying&hellip;</em></p>;
+    else {
+      content = <WhoAmI onIdentify={onIdentify} />;
+      if (verif === 'failed') {
+        content = <><p>Sorry, failed to verify that identity. please let us know!</p>{content}</>;
+      }
+    }
+  } else if (notifPerm !== 'granted') {
+    content = (
+      <>
+        <h3>Step 2: Notification permission</h3>
+        <p>To show atproto notifications we need permission:</p>
+        <p>
+          <button
+            onClick={requestPermission(setAsking)}
+            disabled={asking}
+          >
+            {asking ? <>Requesting&hellip;</> : <>Request permission</>}
+          </button>
+        </p>
+        {notifPerm === 'denied' ? (
+          <p><em>Notification permission was denied. You may need to clear the browser setting to try again.</em></p>
+        ) : (
+          <p><em>You can revoke this any time</em></p>
+        )}
+      </>
+    );
+  } else {
+    content = (
+      <>
+        <p>
+          @{user.handle}
+          <button onClick={() => setUser(null)}>&times;</button>
+        </p>
+      </>
+    );
+  }
 
   return (
     <HostContext.Provider value={host}>
       <h1>🎇 atproto notifications demo</h1>
 
-      {user === null
-        ? (
-          <WhoAmI onIdentify={setUser} />
-        )
-        : (
-          <>
-            <p>hi {user.handle}</p>
-            <button onClick={() => setUser(null)}>clear</button>
-          </>
-        )}
+      <p>Get browser push notifications from any app</p>
+
+      {content}
     </HostContext.Provider>
   )
 }
 
 export default App
+
+
+      // {user === null ? (
+        
+      // ) : (
+      //   <>
+      //     <p>hi {user.handle}</p>
+      //     <button onClick={() => setUser(null)}>clear</button>
+      //   </>
+      // )}

atproto-notifications/src/components/Fetch.tsx

···
+import { useContext, useEffect, useState } from 'react';
+import { HostContext } from '../context'
+
+const loadingDefault = () => (
+  <em>Loading&hellip;</em>
+);
+
+const errorDefault = err => (
+  <span className="error">
+    <strong>Error</strong>:<br/>{`${err}`}
+  </span>
+);
+
+export function Fetch({ using, args, ok, loading, error }) {
+  const [asyncData, setAsyncData] = useState({ state: null });
+
+  useEffect(() => {
+    let ignore = false;
+    setAsyncData({ state: 'loading' });
+    (async () => {
+      try {
+        const data = await using(...args);
+        !ignore && setAsyncData({ state: 'done', data });
+      } catch (err) {
+        !ignore && setAsyncData({ state: 'error', err });
+      }
+    })();
+    return () => { ignore = true; }
+  }, args);
+
+  if (asyncData.state === 'loading') {
+    return (loading || loadingDefault)(...args);
+  } else if (asyncData.state === 'error') {
+    return (error || errorDefault)(asyncData.err);
+  } else if (asyncData.state === null) {
+    return <span>wat, request has not started (bug?)</span>;
+  } else {
+    if (asyncData.state !== 'done') { console.warn(`unexpected async data state: ${asyncData.state}`); }
+    return ok(asyncData.data);
+  }
+}
+
+/////
+
+async function getJson(url) {
+  const res = await fetch(url);
+  if (!res.ok) {
+    const m = await res.text();
+    throw new Error(`Failed to fetch: ${m}`);
+  }
+  return await res.json();
+}
+
+export function GetJson({ endpoint, params, ...forFetch }) {
+  const host = useContext(HostContext);
+  const url = new URL(endpoint, host);
+  for (let [key, val] of Object.entries(params ?? {})) {
+    url.searchParams.append(key, val);
+  }
+  return (
+    <Fetch
+      using={getJson}
+      args={[url.toString()]}
+      {...forFetch}
+    />
+  );
+}

atproto-notifications/src/components/WhoAmI.tsx

···
         border: 'none',
         display: 'block',
         colorScheme: 'none',
+        margin: '0 auto',
       }}
     >
       Ooops, failed to load the login helper

atproto-notifications/src/index.css

···
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color: #d6dade;
+  background-color: #161a1e;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
···
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }

atproto-notifications/src/utils.ts

···
+export function urlBase64ToUint8Array(base64String) {
+  var padding = '='.repeat((4 - base64String.length % 4) % 4);
+  var base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');
+
+  var rawData = window.atob(base64);
+  var outputArray = new Uint8Array(rawData.length);
+
+  for (var i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+}

server/index.js

···
 #!/usr/bin/env node
 "use strict";
 
-const webpush = require('web-push');
 const fs = require('node:fs');
 const http = require('http');
+const jose = require('jose');
+const cookie = require('cookie');
+const cookieSig = require('cookie-signature');
+const webpush = require('web-push');
 
 const DUMMY_DID = 'did:plc:zzzzzzzzzzzzzzzzzzzzzzzz';
+
+const CORS_PERMISSIVE = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Methods': 'OPTIONS, GET, POST',
+  'Access-Control-Allow-Headers': 'Content-Type',
+};
 
 let spacedust;
 let spacedustEverStarted = false;
···
 const handleIndex = handleFile('index.html', 'text/html');
 const handleServiceWorker = handleFile('service-worker.js', 'application/javascript');
 
+const handleVerify = async (req, res, jwks, app_secret) => {
+  const body = await getRequesBody(req);
+  const { token } = JSON.parse(body);
+  let did;
+  try {
+    const verified = await jose.jwtVerify(token, jwks);
+    did = verified.payload.sub;
+  } catch (e) {
+    res.setHeader('Set-Cookie', cookie.serialize('verified-did', '', { expires: new Date(0) }));
+    return res.writeHead(400).end(JSON.stringify({ reason: 'verification failed' }));
+  }
+  const signed = cookieSig.sign(did, app_secret);
+  res.setHeader('Set-Cookie', cookie.serialize('verified-did', signed, {
+    httpOnly: true,
+    secure: true,
+    maxAge: 90 * 86_400,
+  }))
+  return res.writeHead(200).end('okayyyy');
+};
+
 const handleSubscribe = async (req, res) => {
   const body = await getRequesBody(req);
   const { did, sub } = JSON.parse(body);
···
   res.setHeader('Content-Type', 'application/json');
   res.writeHead(201);
   res.end('{"oh": "hi"}');
-}
+};
 
-const requestListener = pubkey => (req, res) => {
-  if (req.method === 'GET' && req.url === '/')
+const requestListener = (pubkey, jwks, app_secret) => (req, res) => {
+  if (req.method === 'GET' && req.url === '/') {
     return handleIndex(req, res, { PUBKEY: pubkey });
+  }
+  if (req.method === 'GET' && req.url === '/service-worker.js') {
+    return handleServiceWorker(req, res, { PUBKEY: pubkey });
+  }
 
-  if (req.method === 'GET' && req.url === '/service-worker.js')
-    return handleServiceWorker(req, res, { PUBKEY: pubkey });
+  if (req.method === 'OPTIONS' && req.url === '/verify') {
+    // TODO: probably restrict the origin
+    return res.writeHead(204, CORS_PERMISSIVE).end();
+  }
+  if (req.method === 'POST' && req.url === '/verify') {
+    res.setHeaders(new Headers(CORS_PERMISSIVE));
+    return handleVerify(req, res, jwks, app_secret);
+  }
 
-  if (req.method === 'POST' && req.url === '/subscribe')
+  if (req.method === 'POST' && req.url === '/subscribe') {
     return handleSubscribe(req, res);
+  }
 
   res.writeHead(200);
   res.end('sup');
···
     keys.privateKey,
   );
 
+  if (!env.APP_SECRET) throw new Error('APP_SECRET is required to run');
+  const app_secret = env.APP_SECRET;
+
+  const whoamiHost = env.WHOAMI_HOST ?? 'https://who-am-i.microcosm.blue';
+  const jwks = jose.createRemoteJWKSet(new URL(`${whoamiHost}/.well-known/jwks.json`));
+
   const spacedustHost = env.SPACEDUST_HOST ?? 'wss://spacedust.microcosm.blue';
   connectSpacedust(spacedustHost);
 
···
   const port = parseInt(env.PORT ?? 8000, 10);
 
   http
-    .createServer(requestListener(keys.publicKey))
+    .createServer(requestListener(keys.publicKey, jwks, app_secret))
     .listen(port, host, () => console.log(`listening at http://${host}:${port}`));
 };
 

server/package-lock.json

···
   "packages": {
     "": {
       "dependencies": {
+        "cookie": "^1.0.2",
+        "cookie-signature": "^1.2.2",
+        "jose": "^6.0.11",
         "web-push": "^3.6.7"
       }
     },
···
       "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.6.0"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
···
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
+    },
+    "node_modules/jose": {
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.0.11.tgz",
+      "integrity": "sha512-QxG7EaliDARm1O1S8BGakqncGT9s25bKL1WSf6/oa17Tkqwi8D2ZNglqCF+DsYF88/rV66Q/Q2mFAy697E1DUg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
     },
     "node_modules/jwa": {
       "version": "2.0.1",

server/package.json

···
 {
   "dependencies": {
+    "cookie": "^1.0.2",
+    "cookie-signature": "^1.2.2",
+    "jose": "^6.0.11",
     "web-push": "^3.6.7"
   }
 }