Update new authorize UX flow #3029
Conversation
sea-snake
commented
Apr 14, 2025
•
sea-snake
commented
- Implement Google authentication
- Use dialog element for modal/bottomsheet
- Refactor authentication implementation, only rely on connection class at the very end.
- Implement Google authentication - Use dialog element for modal/bottomsheet - Refactor authentication implementation, only rely on connection class at the very end.
- Implement Google authentication - Use dialog element for modal/bottomsheet - Refactor authentication implementation, only rely on connection class at the very end.
| salt: Uint8Array; | ||
| actor: ActorSubclass<_SERVICE>; | ||
| }): Promise<{ identity: SignIdentity; anchorNumber: bigint }> => { | ||
| const identity = await identityFromActor(actor); |
There was a problem hiding this comment.
This is of course fine and how we've been doing it - in the future, this logic could be put into a store so we can just always reference $actor and $identity - or get(actor) / get(identity) in this case (or, with some workarounds, it could also be done with state - the logic would be less elegant / self-contained but we could then access it without using get()).
There was a problem hiding this comment.
Actor is passed in here since it's a stateless utils function, the caller of this method may still grab the actor from a store. Passing in both an actor and identity is unnecessary since the actor already has one within.
| //TODO | ||
| console.log("continuing with google"); | ||
| const handleContinueWithGoogle = async () => { | ||
| const clientId = data.session.config.openid_google?.[0]?.[0]?.client_id; |
There was a problem hiding this comment.
In the future, this too (or the whole config) would probably best be put into store/state. Not vital right now though.
|
Forgot to mention - the bottom slider / modal no longer has its internal swiping animation. Of course fine for now, will need to discuss animations with UX to have a coherent language at some point. |
…ialog-and-refactor' into sea-snake/implement-google-use-dialog-and-refactor
Added this back :D |
| <Button onclick={handleContinueWithGoogle} variant="secondary" | ||
| >Continue with Google</Button | ||
| > | ||
| <Button class="w-full" variant="text-only">Cancel</Button> |
| class="w-full px-6 py-4 text-left" | ||
| variant="dashed">Use another Internet Identity</Button | ||
| > | ||
| <div>Loading...</div> |
There was a problem hiding this comment.
This is displayed indefinitely when the route is visited without coming from a dapp.
| export const ssr = false; | ||
|
|
||
| export const load: PageLoad = async () => { | ||
| const canisterId = readCanisterId(); |
There was a problem hiding this comment.
Definitely more elegant to load this here. For this specific route, there's not really a tradeoff, as it is only visited once - in general, because load re-runs whenever a page is visited, we may want to keep this in some kind of application state (store/$state)
| </div> | ||
| {#if showPasskeyModal || nonNullish(captcha)} | ||
| <BottomCardOrModal | ||
| title={nonNullish(captcha) |
There was a problem hiding this comment.
When selecting "continue with passkey", the buttons jump around a tiny bit after the animation finishes. Not egregious though.
sea-snake
deleted the
sea-snake/implement-google-use-dialog-and-refactor
branch
