fix: avoid email delegation via GET request

the email validation approval process is now split into two stages: a GET request with no side effects except to load a page that then auto-submits a POST request to actually continue the flow. this fixes the API to follow proper API semantics and thus starts addressing some of storacha#333 and presumably fixes all of storacha#348

packages/access-api/src/index.js

@@ -4,7 +4,7 @@ import { notFound } from '@web3-storage/worker-utils/response'
 import { Router } from '@web3-storage/worker-utils/router'
 import { postRaw } from './routes/raw.js'
 import { postRoot } from './routes/root.js'
-import { validateEmail } from './routes/validate-email.js'
+import { preValidateEmail, validateEmail } from './routes/validate-email.js'
 import { validateWS } from './routes/validate-ws.js'
 import { version } from './routes/version.js'
 import { getContext } from './utils/context.js'
@@ -14,7 +14,8 @@ const r = new Router({ onNotFound: notFound })
 
 r.add('options', '*', preflight)
 r.add('get', '/version', version)
-r.add('get', '/validate-email', validateEmail)
+r.add('get', '/validate-email', preValidateEmail)
+r.add('post', '/validate-email', validateEmail)
 r.add('get', '/validate-ws', validateWS)
 r.add('post', '/', postRoot)
 r.add('post', '/raw', postRaw)

packages/access-api/src/routes/validate-email.js

@@ -4,8 +4,23 @@ import {
   HtmlResponse,
   ValidateEmail,
   ValidateEmailError,
+  PendingValidateEmail,
 } from '../utils/html.js'
 
+/**
+ * @param {import('@web3-storage/worker-utils/router').ParsedRequest} req
+ * @param {import('../bindings.js').RouteContext} env
+ */
+export async function preValidateEmail(req, env) {
+  if (!req.query?.ucan) {
+    return new HtmlResponse(
+      <ValidateEmailError msg={'Missing delegation in the URL.'} />
+    )
+  }
+
+  return new HtmlResponse(<PendingValidateEmail autoApprove={true} />)
+}
+
 /**
  * @param {import('@web3-storage/worker-utils/router').ParsedRequest} req
  * @param {import('../bindings.js').RouteContext} env

packages/access-api/src/utils/html.js

@@ -97,6 +97,40 @@ export class HtmlResponse extends Response {
   }
 }
 
+/**
+ *
+ * @param {object} props
+ * @param {boolean} [props.autoApprove]
+ */
+export const PendingValidateEmail = ({ autoApprove }) => (
+  <div class="fcenter">
+    <img
+      src="https://web3.storage/android-chrome-512x512.png"
+      height="80"
+      width="80"
+    />
+    <div>
+      <h1>Validating Email</h1>
+      <form id="approval" method="post" class="fcenter">
+        <button class="mcenter">Approve</button>
+      </form>
+      {autoApprove ? (
+        <script
+          dangerouslySetInnerHTML={{
+            // NOTE: this script sticks to ES3-era syntax for compat with more browsers
+            __html: `(function () {
+            // auto-submit the form for any user w/JS enabled
+            var form = document.getElementById('approval');
+            form.style.display = 'none';
+            form.submit();
+          })();`,
+          }}
+        />
+      ) : undefined}
+    </div>
+  </div>
+)
+
 /**
  *
  * @param {object} param0