feat: if POST /validate-email?mode=authorize catches error w/ too big…

… qr code (#516)

Motivation:
* #503

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

@@ -218,6 +218,14 @@ async function authorize(req, env) {
             type: 'svg',
             errorCorrectionLevel: 'M',
             margin: 10,
+          }).catch((error) => {
+            if (/too big to be stored in a qr/i.test(error.message)) {
+              env.log.error(error)
+              // It's not important to have the QR code
+              // eslint-disable-next-line unicorn/no-useless-undefined
+              return undefined
+            }
+            throw error
           })}
         />
       )
@@ -226,7 +234,8 @@ async function authorize(req, env) {
     const err = /** @type {Error} */ (error)
     env.log.error(err)
     return new HtmlResponse(
-      <ValidateEmailError msg={'Oops something went wrong.'} />
+      <ValidateEmailError msg={'Oops something went wrong.'} />,
+      { status: 500 }
     )
   }
 }

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

@@ -135,7 +135,7 @@ export const PendingValidateEmail = ({ autoApprove }) => (
  * @param {string} param0.ucan
  * @param {string} param0.email
  * @param {string} param0.audience
- * @param {string} param0.qrcode
+ * @param {string} [param0.qrcode]
  */
 export const ValidateEmail = ({ ucan, qrcode, email, audience }) => (
   <div class="fcenter">
@@ -173,17 +173,21 @@ export const ValidateEmail = ({ ucan, qrcode, email, audience }) => (
       <p>
         <code>{audience}</code>
       </p>
-      <h5>QR Code:</h5>
-      <div
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          __html: qrcode,
-        }}
-        class="mcenter"
-        style={{
-          width: '300px',
-        }}
-      />
+      {qrcode && (
+        <>
+          <h5>QR Code:</h5>
+          <div
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{
+              __html: qrcode,
+            }}
+            class="mcenter"
+            style={{
+              width: '300px',
+            }}
+          />
+        </>
+      )}
       <h5>UCAN:</h5>
       <pre>
         <code>{ucan}</code>

packages/access-api/test/validate-email.test.js

@@ -0,0 +1,48 @@
+import { context } from './helpers/context.js'
+import * as assert from 'assert'
+import { Delegation } from '@ucanto/core'
+import { Access } from '@web3-storage/capabilities'
+import { delegationToString } from '@web3-storage/access/encoding'
+import { getRandomValues } from 'crypto'
+
+describe('validate-email', () => {
+  it('can POST /validate-email?mode=authorize', async () => {
+    const { mf, service, issuer: agent } = await context()
+    const accountDid = /** @type {const} */ (`did:mailto:dag.house:foo`)
+    // add extra bytes to make it really big
+    // and maybe trigger errors encoding big things
+    const extraBytes = getRandomValues(new Uint8Array(10 * 1024))
+    const ucan = await Delegation.delegate({
+      issuer: service,
+      audience: agent,
+      capabilities: [
+        Access.confirm.create({
+          with: service.did(),
+          nb: {
+            iss: accountDid,
+            aud: agent.did(),
+            att: [
+              { can: '*' },
+              // validate-email may pass this value unmodified into qr
+              {
+                can: `data:text/plain;base64,${btoa(
+                  String.fromCodePoint(...extraBytes)
+                )}`,
+              },
+            ],
+          },
+        }),
+      ],
+    })
+    const validateEmailUrl = (() => {
+      const url = new URL(`http://localhost:8787/validate-email`)
+      url.searchParams.set('mode', 'authorize')
+      url.searchParams.set('ucan', delegationToString(ucan))
+      return url
+    })()
+    const response = await mf.dispatchFetch(validateEmailUrl, {
+      method: 'post',
+    })
+    assert.deepEqual(response.status, 200)
+  })
+})