Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix!: update examples for new authorize flow #474

Merged
merged 4 commits into from
Mar 30, 2023
Merged

fix!: update examples for new authorize flow #474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
26acc6d
fix: update examples for new authorize flow
travis Mar 24, 2023
2ef3475
fix: get playwright tests working again
travis Mar 24, 2023
4bdbbad
fix: remove errant console.log
travis Mar 24, 2023
f3a292b
Merge branch 'main' into feat/fix-examples
travis Mar 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions docs/keyring-core.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would be backward incompatible, but the PR title does not have a feat!

Copy link
Member Author

@travis travis Mar 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeaaaa I think it was a bug in this major release that this wasn't changed (see PR description), so I'd like it to ship in a minor release.

I know it's technically semver heresy, but I also think it was just a bug that this didn't break with the last major

Copy link
Member Author

@travis travis Mar 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

put another way - if someone has already gone through the last major version upgrade but is depending on this function, I'd prefer to have their code break when they update the minor rather than require them to do another major version upgrade here, so my preference is to ship this in a minor

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok we chatted in person and I've moved over to "let's just ship a major release and stop worrying about this" - should only result in a bit of extra work for me in any case, and even that will be pretty minor

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would still be helpful to get @alanshaw's brain on this one - @gobengo and I went back and forth but ultimately decided just shipping a new major release is probably the least ugly thing to do here, rather than shipping a minor release with a backwards incompatible change.

Probably a moot point given the current level of outside adoption of these libraries, but worth being on the same page about regardless.

/**
* Get all the proofs matching the capabilities. Proofs are delegations with
* an audience matching the agent DID.
Expand Down
4 changes: 3 additions & 1 deletion docs/vue-keyring.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']>>,
Expand All @@ -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']>
}
```
Expand Down
7 changes: 4 additions & 3 deletions examples/react/file-upload/src/components/Authenticator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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>
Expand All @@ -26,6 +26,7 @@ export default function Authenticator ({ children }) {
e.preventDefault()
setSubmitted(true)
try {
await authorize(email)
await createSpace()
await registerSpace(email)
} catch (err) {
Expand All @@ -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>
)
}
Expand Down
7 changes: 4 additions & 3 deletions examples/react/multi-file-upload/src/components/Authenticator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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>
Expand All @@ -26,6 +26,7 @@ export default function Authenticator ({ children }) {
e.preventDefault()
setSubmitted(true)
try {
await authorize(email)
await createSpace()
await registerSpace(email)
} catch (err) {
Expand All @@ -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>
)
}
Expand Down
7 changes: 4 additions & 3 deletions examples/react/playground/src/components/Authenticator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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>
Expand All @@ -26,6 +26,7 @@ export default function Authenticator ({ children }) {
e.preventDefault()
setSubmitted(true)
try {
await authorize(email)
await createSpace()
await registerSpace(email)
} catch (err) {
Expand All @@ -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>
)
}
Expand Down
19 changes: 9 additions & 10 deletions examples/react/sign-up-in/src/ContentPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
)
}
7 changes: 4 additions & 3 deletions examples/react/uploads-list/src/components/Authenticator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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>
Expand All @@ -26,6 +26,7 @@ export default function Authenticator ({ children }) {
e.preventDefault()
setSubmitted(true)
try {
await authorize(email)
await createSpace()
await registerSpace(email)
} catch (err) {
Expand All @@ -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>
)
}
Expand Down
9 changes: 5 additions & 4 deletions examples/solid/file-upload/src/components/Authenticator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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>
Expand Down
11 changes: 6 additions & 5 deletions examples/solid/multi-file-upload/src/components/Authenticator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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>
Expand Down
23 changes: 11 additions & 12 deletions examples/solid/sign-up-in/src/ContentPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Loading