feat: add app to access/authorize and access/confirm (#264)

We need a way to ensure users are redirected back to
`https://bsky.storage` after completing the Stripe checkout process.

To facilitate this, pass facts from `access/authorize`
to`access/confirm` - users can now add a fact like `{app:
'bsky-backups'}` to `access/authorize`, which will tell the
`access/confirm` handling code in `w3infra` to render the same pricing
table we use on https://bsky.storage which sends the user back to that
app after picking a plan via the email flow.

Add support for this to the client code via a new `appName` option in
the account creation functions that gets converted to a fact at the
lowest level.

There are a bunch of ways we could do this, but in the interest of
shipping ASAP I think this is a reasonable and fast way to go.

See storacha/w3infra#472 for the other part of
this.

Author: travis

packages/access-client/src/access.js

@@ -55,6 +55,7 @@ export const delegate = async (
  * @param {API.ProviderDID} [input.provider] - Provider that will receive the invocation.
  * @param {API.DID} [input.audience] - Principal requesting an access.
  * @param {API.Access} [input.access] - Access been requested.
+ * @param {API.AppName} [input.appName] - A list of Facts to pass to the access/authorize invocation
  * @returns {Promise<API.Result<PendingAccessRequest, API.AccessAuthorizeFailure|API.InvocationError>>}
  */
 export const request = async (
@@ -64,6 +65,7 @@ export const request = async (
     provider = /** @type {API.ProviderDID} */ (agent.connection.id.did()),
     audience: audience = agent.did(),
     access = spaceAccess,
+    appName,
   }
 ) => {
   // Request access from the account.
@@ -77,6 +79,7 @@ export const request = async (
       // in the meantime we translate new format to legacy format here.
       att: [...toCapabilities(access)],
     },
+    facts: appName ? [{ appName }] : undefined,
   })
 
   return result.error

packages/access-client/src/types.ts

@@ -341,3 +341,7 @@ export type EncodedDelegation<C extends Capabilities = Capabilities> = string &
 
 export type BytesDelegation<C extends Capabilities = Capabilities> =
   Uint8Array & Phantom<Delegation<C>>
+
+export enum AppName {
+  BskyBackups = 'bsky-backups',
+}

packages/ui/packages/react/src/Authenticator.tsx

@@ -11,7 +11,7 @@ import React, {
 } from 'react'
 import { createComponent, createElement } from 'ariakit-react-utils'
 import { useW3, ContextState, ContextActions } from './providers/Provider.js'
-import { EmailAddress } from '@storacha/ui-core'
+import { EmailAddress, AppName } from '@storacha/ui-core'
 
 export type AuthenticatorContextState = ContextState & {
   /**
@@ -72,7 +72,9 @@ export type AuthenticatorRootOptions<T extends As = typeof Fragment> =
   Options<T>
 export type AuthenticatorRootProps<T extends As = typeof Fragment> = Props<
   AuthenticatorRootOptions<T>
->
+> & {
+  appName?: AppName
+}
 
 /**
  * Top level component of the headless Authenticator.
@@ -101,6 +103,7 @@ export const AuthenticatorRoot: Component<AuthenticatorRootProps> =
           if (client === undefined) throw new Error('missing client')
           await client.login(email as EmailAddress, {
             signal: controller?.signal,
+            appName: props.appName
           })
         } catch (error: any) {
           if (!controller.signal.aborted) {

packages/upload-api/src/access/authorize.js

@@ -82,6 +82,12 @@ export const authorize = async ({ capability, invocation }, ctx) => {
         // Link to the invocation that requested the authorization.
         cause: invocation.cid,
       },
+      // we copy the facts in so that information can be passed
+      // from the invoker of this capability to the invoker of the confirm
+      // capability - we use this, for example, to let bsky.storage users
+      // specify that they should be redirected back to bsky.storage after
+      // completing the Stripe plan selection flow
+      facts: invocation.facts,
     })
     .delegate()
 

packages/upload-api/src/validate.js

@@ -59,6 +59,7 @@ export async function authorize(encodedUcan, env) {
         email: DidMailto.toEmail(DidMailto.fromString(account.did())),
         audience: agent.did(),
         ucan: delegationsToString(confirmDelegations),
+        facts: request.facts,
       },
     }
   } catch (error) {

packages/w3up-client/src/account.js

@@ -80,6 +80,7 @@ export const list = ({ agent }, { account } = {}) => {
  * @param {EmailAddress} email
  * @param {object} [options]
  * @param {AbortSignal} [options.signal]
+ * @param {API.AppName} [options.appName]
  * @returns {Promise<API.Result<Account, Error>>}
  */
 export const login = async ({ agent }, email, options = {}) => {
@@ -105,6 +106,7 @@ export const login = async ({ agent }, email, options = {}) => {
     {
       account,
       access: Access.accountAccess,
+      appName: options.appName,
     }
   )
 

packages/w3up-client/src/capability/access.js

@@ -88,6 +88,7 @@ export const claim = async ({ agent }, input) =>
  * @param {API.AccountDID} input.account
  * @param {API.Access} [input.access]
  * @param {API.DID} [input.audience]
+ * @param {Agent.AppName} [input.appName]
  */
 export const request = async ({ agent }, input) =>
   Agent.Access.request(agent, input)

packages/w3up-client/src/client.js

@@ -90,6 +90,7 @@ export class Client extends Base {
    * @param {Account.EmailAddress} email
    * @param {object} [options]
    * @param {AbortSignal} [options.signal]
+   * @param {import('@storacha/client/types').AppName} [options.appName]
    */
   async login(email, options = {}) {
     const account = Result.unwrap(await Account.login(this, email, options))

packages/w3up-client/src/types.ts

@@ -20,6 +20,7 @@ import { type Client } from './client.js'
 import { StorefrontService } from '@storacha/filecoin-client/storefront'
 export * from '@ucanto/interface'
 export * from '@storacha/did-mailto'
+export { AppName } from '@storacha/access/types'
 export type { Agent, CapabilityQuery } from '@storacha/access/agent'
 export type {
   Access,