fix!: update examples for new authorize flow (#474)

Unfortunately this also required some changes to the "keyring" interfaces - shipping another major release based on these changes is slightly annoying but probably the right thing to do, and honestly I'm probably the only person who will need to upgrade deps for now.
storacha · Mar 30, 2023 · 0925c21 · 0925c21
1 parent a4932d3
commit 0925c21
Show file tree

Hide file tree

Showing 24 changed files with 143 additions and 135 deletions.
diff --git a/docs/keyring-core.md b/docs/keyring-core.md
@@ -84,15 +84,14 @@ export interface KeyringContextActions {
    */
   setCurrentSpace: (did: DID) => Promise<void>
   /**
-   * Register the current space, verify the email address and store in secure
-   * storage. Use cancelRegisterSpace to abort. Automatically sets the
-   * newly registered space as the current space.
+   * Register the current space and store in secure storage. Automatically
+   * sets the newly registered space as the current space.
    */
   registerSpace: (email: string) => Promise<void>
   /**
    * Abort an ongoing account registration.
    */
-  cancelRegisterSpace: () => void,
+  cancelAuthorize: () => void,
   /**
    * Get all the proofs matching the capabilities. Proofs are delegations with
    * an audience matching the agent DID.

diff --git a/docs/vue-keyring.md b/docs/vue-keyring.md
@@ -44,6 +44,7 @@ Once mounted, the `KeyringProvider` provides the following injection keys:
 
 ```ts
 type KeyringProviderInjectionKey = {
+  account: InjectionKey<Ref<KeyringContextState['account']>>,
   space: InjectionKey<Ref<KeyringContextState['space']>>,
   spaces: InjectionKey<Ref<KeyringContextState['spaces']>>,
   agent: InjectionKey<Ref<KeyringContextState['agent']>>,
@@ -53,7 +54,8 @@ type KeyringProviderInjectionKey = {
   createSpace: InjectionKey<KeyringContextActions['createSpace']>,
   setCurrentSpace: InjectionKey<KeyringContextActions['setCurrentSpace']>,
   registerSpace: InjectionKey<KeyringContextActions['registerSpace']>,
-  cancelRegisterSpace: InjectionKey<KeyringContextActions['cancelRegisterSpace']>,
+  authorize: InjectionKey<KeyringContextActions['authorize']>,
+  cancelAuthorize: InjectionKey<KeyringContextActions['cancelAuthorize']>,
   getProofs: InjectionKey<KeyringContextActions['getProofs']>
 }
 ```

diff --git a/examples/react/file-upload/src/components/Authenticator.jsx b/examples/react/file-upload/src/components/Authenticator.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { useKeyring } from '@w3ui/react-keyring'
 
 export default function Authenticator ({ children }) {
-  const [{ space }, { createSpace, registerSpace, cancelRegisterSpace }] = useKeyring()
+  const [{ space }, { createSpace, registerSpace, authorize, cancelAuthorize }] = useKeyring()
   const [email, setEmail] = useState('')
   const [submitted, setSubmitted] = useState(false)
 
@@ -15,7 +15,7 @@ export default function Authenticator ({ children }) {
       <div>
         <h1 className='near-white'>Verify your email address!</h1>
         <p>Click the link in the email we sent to {email} to sign in.</p>
-        <form onSubmit={e => { e.preventDefault(); cancelRegisterSpace() }}>
+        <form onSubmit={e => { e.preventDefault(); cancelAuthorize() }}>
           <button type='submit' className='ph3 pv2'>Cancel</button>
         </form>
       </div>
@@ -26,6 +26,7 @@ export default function Authenticator ({ children }) {
     e.preventDefault()
     setSubmitted(true)
     try {
+      await authorize(email)
       await createSpace()
       await registerSpace(email)
     } catch (err) {
@@ -41,7 +42,7 @@ export default function Authenticator ({ children }) {
         <label htmlFor='email' className='db mb2'>Email address:</label>
         <input id='email' className='db pa2 w-100' type='email' value={email} onChange={e => setEmail(e.target.value)} required />
       </div>
-      <button type='submit' className='ph3 pv2' disabled={submitted}>Register</button>
+      <button type='submit' className='ph3 pv2' disabled={submitted}>Authorize</button>
     </form>
   )
 }

diff --git a/examples/react/multi-file-upload/src/components/Authenticator.jsx b/examples/react/multi-file-upload/src/components/Authenticator.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { useKeyring } from '@w3ui/react-keyring'
 
 export default function Authenticator ({ children }) {
-  const [{ space }, { createSpace, registerSpace, cancelRegisterSpace }] = useKeyring()
+  const [{ space }, { createSpace, registerSpace, authorize, cancelAuthorize }] = useKeyring()
   const [email, setEmail] = useState('')
   const [submitted, setSubmitted] = useState(false)
 
@@ -15,7 +15,7 @@ export default function Authenticator ({ children }) {
       <div>
         <h1 className='near-white'>Verify your email address!</h1>
         <p>Click the link in the email we sent to {email} to sign in.</p>
-        <form onSubmit={e => { e.preventDefault(); cancelRegisterSpace() }}>
+        <form onSubmit={e => { e.preventDefault(); cancelAuthorize() }}>
           <button type='submit' className='ph3 pv2'>Cancel</button>
         </form>
       </div>
@@ -26,6 +26,7 @@ export default function Authenticator ({ children }) {
     e.preventDefault()
     setSubmitted(true)
     try {
+      await authorize(email)
       await createSpace()
       await registerSpace(email)
     } catch (err) {
@@ -41,7 +42,7 @@ export default function Authenticator ({ children }) {
         <label htmlFor='email' className='db mb2'>Email address:</label>
         <input id='email' className='db pa2 w-100' type='email' value={email} onChange={e => setEmail(e.target.value)} required />
       </div>
-      <button type='submit' className='ph3 pv2' disabled={submitted}>Register</button>
+      <button type='submit' className='ph3 pv2' disabled={submitted}>Authorize</button>
     </form>
   )
 }

diff --git a/examples/react/playground/src/components/Authenticator.jsx b/examples/react/playground/src/components/Authenticator.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { useKeyring } from '@w3ui/react-keyring'
 
 export default function Authenticator ({ children }) {
-  const [{ space }, { createSpace, registerSpace, cancelRegisterSpace }] = useKeyring()
+  const [{ space }, { createSpace, registerSpace, authorize, cancelAuthorize }] = useKeyring()
   const [email, setEmail] = useState('')
   const [submitted, setSubmitted] = useState(false)
 
@@ -15,7 +15,7 @@ export default function Authenticator ({ children }) {
       <div>
         <h1 className='near-white'>Verify your email address!</h1>
         <p>Click the link in the email we sent to {email} to sign in.</p>
-        <form onSubmit={e => { e.preventDefault(); cancelRegisterSpace() }}>
+        <form onSubmit={e => { e.preventDefault(); cancelAuthorize() }}>
           <button type='submit' className='ph3 pv2'>Cancel</button>
         </form>
       </div>
@@ -26,6 +26,7 @@ export default function Authenticator ({ children }) {
     e.preventDefault()
     setSubmitted(true)
     try {
+      await authorize(email)
       await createSpace()
       await registerSpace(email)
     } catch (err) {
@@ -41,7 +42,7 @@ export default function Authenticator ({ children }) {
         <label htmlFor='email' className='db mb2'>Email address:</label>
         <input id='email' className='db pa2 w-100' type='email' value={email} onChange={e => setEmail(e.target.value)} required />
       </div>
-      <button type='submit' className='ph3 pv2' disabled={submitted}>Register</button>
+      <button type='submit' className='ph3 pv2' disabled={submitted}>Authorize</button>
     </form>
   )
 }

diff --git a/examples/react/sign-up-in/src/ContentPage.jsx b/examples/react/sign-up-in/src/ContentPage.jsx
@@ -2,18 +2,18 @@ import React, { useEffect, useState } from 'react'
 import { useKeyring } from '@w3ui/react-keyring'
 
 export default function ContentPage () {
-  const [{ space }, { loadAgent, unloadAgent, createSpace, registerSpace, cancelRegisterSpace }] = useKeyring()
+  const [{ account }, { loadAgent, unloadAgent, authorize, cancelAuthorize }] = useKeyring()
   const [email, setEmail] = useState('')
   const [submitted, setSubmitted] = useState(false)
 
   // eslint-disable-next-line
   useEffect(() => { loadAgent() }, []) // load the agent - once.
 
-  if (space?.registered()) {
+  if (account) {
     return (
       <div>
         <h1 className='near-white'>Welcome!</h1>
-        <p>You are logged in!!</p>
+        <p>You are logged in as {account}!</p>
         <form onSubmit={e => { e.preventDefault(); unloadAgent() }}>
           <button type='submit' className='ph3 pv2'>Sign Out</button>
         </form>
@@ -26,33 +26,32 @@ export default function ContentPage () {
       <div>
         <h1 className='near-white'>Verify your email address!</h1>
         <p>Click the link in the email we sent to {email} to sign in.</p>
-        <form onSubmit={e => { e.preventDefault(); cancelRegisterSpace() }}>
+        <form onSubmit={e => { e.preventDefault(); cancelAuthorize() }}>
           <button type='submit' className='ph3 pv2'>Cancel</button>
         </form>
       </div>
     )
   }
 
-  const handleRegisterSubmit = async e => {
+  const handleAuthorizeSubmit = async e => {
     e.preventDefault()
     setSubmitted(true)
     try {
-      await createSpace()
-      await registerSpace(email)
+      await authorize(email)
     } catch (err) {
-      throw new Error('failed to register', { cause: err })
+      throw new Error('failed to authorize', { cause: err })
     } finally {
       setSubmitted(false)
     }
   }
 
   return (
-    <form onSubmit={handleRegisterSubmit}>
+    <form onSubmit={handleAuthorizeSubmit}>
       <div className='mb3'>
         <label htmlFor='email' className='db mb2'>Email address:</label>
         <input id='email' className='db pa2 w-100' type='email' value={email} onChange={e => setEmail(e.target.value)} required />
       </div>
-      <button type='submit' className='ph3 pv2' disabled={submitted}>Register</button>
+      <button type='submit' className='ph3 pv2' disabled={submitted}>Authorize</button>
     </form>
   )
 }
diff --git a/examples/react/uploads-list/src/components/Authenticator.jsx b/examples/react/uploads-list/src/components/Authenticator.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { useKeyring } from '@w3ui/react-keyring'
 
 export default function Authenticator ({ children }) {
-  const [{ space }, { createSpace, registerSpace, cancelRegisterSpace }] = useKeyring()
+  const [{ space }, { createSpace, registerSpace, authorize, cancelAuthorize }] = useKeyring()
   const [email, setEmail] = useState('')
   const [submitted, setSubmitted] = useState(false)
 
@@ -15,7 +15,7 @@ export default function Authenticator ({ children }) {
       <div>
         <h1 className='near-white'>Verify your email address!</h1>
         <p>Click the link in the email we sent to {email} to sign in.</p>
-        <form onSubmit={e => { e.preventDefault(); cancelRegisterSpace() }}>
+        <form onSubmit={e => { e.preventDefault(); cancelAuthorize() }}>
           <button type='submit' className='ph3 pv2'>Cancel</button>
         </form>
       </div>
@@ -26,6 +26,7 @@ export default function Authenticator ({ children }) {
     e.preventDefault()
     setSubmitted(true)
     try {
+      await authorize(email)
       await createSpace()
       await registerSpace(email)
     } catch (err) {
@@ -41,7 +42,7 @@ export default function Authenticator ({ children }) {
         <label htmlFor='email' className='db mb2'>Email address:</label>
         <input id='email' className='db pa2 w-100' type='email' value={email} onChange={e => setEmail(e.target.value)} required />
       </div>
-      <button type='submit' className='ph3 pv2' disabled={submitted}>Register</button>
+      <button type='submit' className='ph3 pv2' disabled={submitted}>Authorize</button>
     </form>
   )
 }

diff --git a/examples/solid/file-upload/src/components/Authenticator.jsx b/examples/solid/file-upload/src/components/Authenticator.jsx
@@ -2,14 +2,15 @@ import { createSignal, Switch, Match } from 'solid-js'
 import { useKeyring } from '@w3ui/solid-keyring'
 
 function Authenticator ({ children }) {
-  const [keyring, { createSpace, registerSpace, cancelRegisterSpace }] = useKeyring()
+  const [keyring, { createSpace, registerSpace, authorize, cancelAuthorize }] = useKeyring()
   const [email, setEmail] = createSignal('')
   const [submitted, setSubmitted] = createSignal(false)
 
   const handleRegisterSubmit = async e => {
     e.preventDefault()
     setSubmitted(true)
     try {
+      await authorize(email())
       await createSpace()
       await registerSpace(email())
     } catch (err) {
@@ -27,13 +28,13 @@ function Authenticator ({ children }) {
       <Match when={submitted()}>
         <div>
           <h1 className='near-white'>Verify your email address!</h1>
-          <p>Click the link in the email we sent to {keyring.agent?.email} to sign in.</p>
-          <form onSubmit={e => { e.preventDefault(); cancelRegisterSpace() }}>
+          <p>Click the link in the email we sent to {keyring.account} to sign in.</p>
+          <form onSubmit={e => { e.preventDefault(); cancelAuthorize() }}>
             <button type='submit' className='ph3 pv2'>Cancel</button>
           </form>
         </div>
       </Match>
-      <Match when={!keyring.space?.registered() && !submitted()}>
+      <Match when={!keyring.account && !submitted()}>
         <form onSubmit={handleRegisterSubmit}>
           <div className='mb3'>
             <label htmlFor='email' className='db mb2'>Email address:</label>

diff --git a/examples/solid/multi-file-upload/src/components/Authenticator.jsx b/examples/solid/multi-file-upload/src/components/Authenticator.jsx
@@ -2,14 +2,15 @@ import { createSignal, Switch, Match } from 'solid-js'
 import { useKeyring } from '@w3ui/solid-keyring'
 
 function Authenticator ({ children }) {
-  const [keyring, { createSpace, registerSpace, cancelRegisterSpace }] = useKeyring()
+  const [keyring, { createSpace, registerSpace, authorize, cancelAuthorize }] = useKeyring()
   const [email, setEmail] = createSignal('')
   const [submitted, setSubmitted] = createSignal(false)
 
   const handleRegisterSubmit = async e => {
     e.preventDefault()
     setSubmitted(true)
     try {
+      await authorize(email())
       await createSpace()
       await registerSpace(email())
     } catch (err) {
@@ -21,19 +22,19 @@ function Authenticator ({ children }) {
 
   return (
     <Switch>
-      <Match when={keyring.space?.registered()}>
+      <Match when={keyring.account}>
         {children}
       </Match>
       <Match when={submitted()}>
         <div>
           <h1 className='near-white'>Verify your email address!</h1>
-          <p>Click the link in the email we sent to {keyring.agent?.email} to sign in.</p>
-          <form onSubmit={e => { e.preventDefault(); cancelRegisterSpace() }}>
+          <p>Click the link in the email we sent to {keyring.account} to sign in.</p>
+          <form onSubmit={e => { e.preventDefault(); cancelAuthorize() }}>
             <button type='submit' className='ph3 pv2'>Cancel</button>
           </form>
         </div>
       </Match>
-      <Match when={!keyring.space?.registered() && !submitted()}>
+      <Match when={!keyring.account && !submitted()}>
         <form onSubmit={handleRegisterSubmit}>
           <div className='mb3'>
             <label htmlFor='email' className='db mb2'>Email address:</label>

diff --git a/examples/solid/sign-up-in/src/ContentPage.jsx b/examples/solid/sign-up-in/src/ContentPage.jsx
@@ -2,29 +2,28 @@ import { createSignal, Switch, Match } from 'solid-js'
 import { useKeyring } from '@w3ui/solid-keyring'
 
 export default function ContentPage () {
-  const [keyring, { createSpace, registerSpace, cancelRegisterSpace, loadAgent, unloadAgent }] = useKeyring()
+  const [keyring, { authorize, cancelAuthorize, loadAgent, unloadAgent }] = useKeyring()
   const [email, setEmail] = createSignal('')
   const [submitted, setSubmitted] = createSignal(false)
 
   loadAgent() // try load agent - once.
 
-  const handleRegisterSubmit = async e => {
+  const handleAuthorizeSubmit = async e => {
     e.preventDefault()
     setSubmitted(true)
     try {
-      await createSpace()
-      await registerSpace(email())
+      await authorize(email())
     } catch (err) {
-      throw new Error('failed to register', { cause: err })
+      throw new Error('failed to authorize', { cause: err })
     } finally {
       setSubmitted(false)
     }
   }
   return (
     <Switch>
-      <Match when={keyring.space?.registered()}>
+      <Match when={keyring.account}>
         <div>
-          <h1 className='near-white'>Welcome {keyring.agent?.email}!</h1>
+          <h1 className='near-white'>Welcome {keyring.account}!</h1>
           <p>You are logged in!!</p>
           <form onSubmit={e => { e.preventDefault(); unloadAgent() }}>
             <button type='submit' className='ph3 pv2'>Sign Out</button>
@@ -34,19 +33,19 @@ export default function ContentPage () {
       <Match when={submitted()}>
         <div>
           <h1 className='near-white'>Verify your email address!</h1>
-          <p>Click the link in the email we sent to {keyring.agent?.email} to sign in.</p>
-          <form onSubmit={e => { e.preventDefault(); cancelRegisterSpace() }}>
+          <p>Click the link in the email we sent to {keyring.account} to sign in.</p>
+          <form onSubmit={e => { e.preventDefault(); cancelAuthorize() }}>
             <button type='submit' className='ph3 pv2'>Cancel</button>
           </form>
         </div>
       </Match>
-      <Match when={!keyring.space?.registered() && !submitted()}>
-        <form onSubmit={handleRegisterSubmit}>
+      <Match when={!keyring.account && !submitted()}>
+        <form onSubmit={handleAuthorizeSubmit}>
           <div className='mb3'>
             <label htmlFor='email' className='db mb2'>Email address:</label>
             <input id='email' className='db pa2 w-100' type='email' value={email()} onInput={e => setEmail(e.target.value)} required />
           </div>
-          <button type='submit' className='ph3 pv2' disabled={submitted()}>Register</button>
+          <button type='submit' className='ph3 pv2' disabled={submitted()}>Authorize</button>
         </form>
       </Match>
     </Switch>