PoC adding passkey from dashboard #3158

lmuntaner · 2025-07-02T10:47:44Z

Motivation

Proof Of Concept to add a passkey from the dashboard.

NOTE: This is not final yet - failing to create the passkey on the new device leaves a temporary key visible on the dashboard. The new device does not automatically login after creating the passkey yet (this is a browser API limitation and needs a major workaround). Styling is preliminary.

Changes

Add feature flag CROSS_DEVICE_PASSKEYS
Add flag-gated frontend functionality to add passkey on new client device
Add new client device flow under /flow/
Add backend query method to poll for the tentative device having been verified
Add basic styling for new flows

Tests

Added new passkey using the new flow

sea-snake · 2025-07-02T13:48:34Z

src/frontend/src/lib/state/featureFlags.ts

@@ -76,7 +76,7 @@ export const HARDWARE_KEY_TEST = createFeatureFlagStore(

 export const DISCOVERABLE_PASSKEY_FLOW = createFeatureFlagStore(
  "DISCOVERABLE_PASSKEY_FLOW",
-  false,
+  true,


This should be changed back to false 😅

(Probably also why e2e tests are failing)

lmuntaner

Looking good, thanks!

lmuntaner · 2025-07-04T10:19:36Z

--cache-location/_logs/2025-07-04T09_53_09_444Z-debug-0.log

I guess this doesn't need to be here? hehe

No idea what this is, removing it.

lmuntaner · 2025-07-04T10:21:19Z

src/internet_identity/internet_identity.did

@@ -511,6 +511,10 @@ type AuthnMethodConfirmationError = variant {
    NoAuthnMethodToConfirm;
 };

+type AuthorizationError = record {
+    principal;


What principal does it return? Why not returning Ok: false if there is any error?

I would consider Ok: false an antipattern. The whole point of Result is to use Ok for an error-free state and Err for errors. The principal returned is just the user's principal - I didn't come up with this, just using the error I get from the internal function. We can of course return something like Err: Unauthorized.

Apart from all that, Ok: false is already used for when it is not yet verified. Arguably there is still an issue there because this call fails as long as it is not yet verified.

I'd say Err: Unauthorized makes sense as well, in another PR.

That's what I implemented now roughly:
pub enum AuthnMethodVerifiedPollError { Unauthorized, }

lmuntaner · 2025-07-04T10:22:04Z

src/internet_identity/internet_identity.did

@@ -853,6 +857,9 @@ service : (opt InternetIdentityInit) -> {
    // Requires authentication.
    authn_method_confirm : (IdentityNumber, confirmation_code : text) -> (variant { Ok; Err : AuthnMethodConfirmationError });

+
+    authn_method_poll_for_verified : (IdentityNumber) -> (variant {Ok : bool; Err: AuthorizationError});


Don't yuo need to add "query" at the end to make it a query?

lmuntaner · 2025-07-04T10:22:56Z

src/internet_identity/src/anchor_management/tentative_device_registration.rs

+/// Checks whether a tentative device has been verified without mutating anything
+/// This is so that on the new client we can prompt for adding the final passkey as soon as
+/// on the old client we have verified the temporary key
+pub fn poll_for_device_verified(identity_number: IdentityNumber) -> bool {


Why call it it poll_for? This is not polling, is it?

Maybe has_tentative_device_registrations?

Yes, we are polling.

I get the idea, but the method itself isn't actually going to poll anything once you call it, the frontend is actually doing the polling by repeatedly calling the method. This method could just as well be triggered by user interaction e.g. Refresh button instead of polling.

On another note, see the updated sequence diagram in Slack that includes this particular detail now and let me know if there's anything unclear/needs changes over there :D

@sea-snake It polls exactly once 🤷🏻‍♂️ But if it's important to both of you we can rename it of course

lmuntaner · 2025-07-04T10:24:16Z

src/frontend/src/routes/(new-styling)/manage/(authenticated)/security/+page.svelte

@@ -27,11 +27,11 @@
        </h4>
      </div>

-      {#if identityInfo.openIdCredentials.length === 0}
+      {#if identityInfo.openIdCredentials.length === 0 || (identityInfo.authnMethods.length <= 8 && $CROSS_DEVICE_PASSKEYS)}


Doesn't this mean that all users won't see the "Add" button to link a Google account?

No, it doesn't. This means you see the "Add" button if either:

You have no google account linked
OR

The feature flag for cross device passkeys is enabled AND you have less than 8 authentication methods. (I think this should actually be 10, updating this)

lmuntaner · 2025-07-04T10:37:53Z

src/frontend/src/lib/flows/addPasskeyFlow.svelte.ts

+      credential_id: [],
+    };
+    this.verificationCode = undefined;
+    this.#pollForVerified = setInterval(async () => {


#pollForVerified is a number to clear the interval, should ca call it pollForVerifiedIntervalId?

And I'd rather use setTimeout to make sure we don't accumulate calls. Update calls can take a long time and might be longer than the interval.

These are query calls. But yes, we can use a timeout pattern.

lmuntaner · 2025-07-04T10:39:06Z

src/frontend/src/lib/flows/addPasskeyFlow.svelte.ts

+
+    const identityNumber = this.#identityNumber;
+
+    const identityInfoResponse =


I think you can do:

const { name } = await get(sessionStore).actor.identity_info(identityNumber).catch(throwCanisterError);

Isn't this how you intended to be used @sea-snake ?

It's with .then but yes that works

To be precise, it's.then(throwCanisterError) instead of .catch(throwCanisterError).

And yes, the intend was to unwrap the Rust result type and throw an error if an Err value is present.

lmuntaner · 2025-07-04T10:41:16Z

src/frontend/src/lib/flows/addPasskeyFlow.svelte.ts

+        authn_method: {
+          WebAuthn: {
+            pubkey: new Uint8Array(passkeyIdentity.getPublicKey().toDer()),
+            credential_id: new Uint8Array(passkeyIdentity.getCredentialId()!),


Should we do a check before instead of using ! here?

I don't think it's a problem but why not

We don't control how it will break if it breaks. Can be done in another PR.

Already fixed.

lmuntaner · 2025-07-04T10:41:34Z

src/frontend/src/lib/flows/addPasskeyFlow.svelte.ts

+      },
+    );
+
+    void throwCanisterError(replaceResult);


Ditto above on how to use throwCanisterError

lmuntaner · 2025-07-04T10:41:51Z

src/frontend/src/lib/flows/addPasskeyFlow.svelte.ts

+
+    void throwCanisterError(replaceResult);
+
+    const credentialId = new Uint8Array(passkeyIdentity.getCredentialId()!);


ditto no !

I don't think it's a problem but why not

graphite-app · 2025-07-04T12:08:05Z

src/frontend/src/routes/(new-styling)/flow/+page.svelte

+  const user = page.url.searchParams.get("user");
+  const flow = new AddPasskeyFlow(BigInt(user!));


The code assumes user is always present and valid, which could cause runtime errors if the parameter is missing or invalid. Consider adding validation before passing to BigInt():

const userParam = page.url.searchParams.get("user"); if (!userParam || isNaN(Number(userParam))) { // Handle error case - perhaps redirect or show error message } const flow = new AddPasskeyFlow(BigInt(userParam));

This would prevent uncaught exceptions when the URL is malformed or manually entered without the required parameter.

Suggested change

const user = page.url.searchParams.get("user");

const flow = new AddPasskeyFlow(BigInt(user!));

const userParam = page.url.searchParams.get("user");

if (!userParam || isNaN(Number(userParam))) {

// Handle error case - perhaps redirect or show error message

throw new Error("Invalid or missing user parameter");

}

const flow = new AddPasskeyFlow(BigInt(userParam));

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

graphite-app · 2025-07-04T12:08:06Z

src/frontend/src/lib/flows/startAddPasskeyFlow.svelte.ts

+  #pollForTentativeDevice = async (): Promise<DeviceData | undefined> => {
+    const actor = await get(authenticatedStore).actor;
+    // eslint-disable-next-line no-async-promise-executor
+    return new Promise<DeviceData | undefined>(async (resolve) => {
+      // TODO: Add countdown or timeout
+      let counter = 0;
+      const maxCount = 1000;
+      while (counter < maxCount) {
+        const anchorInfo = await actor.get_anchor_info(this.#identityNumber);
+        const tentativeDevice =
+          anchorInfo.device_registration[0]?.tentative_device[0];
+        if (nonNullish(tentativeDevice)) {
+          resolve(tentativeDevice);
+          return;
+        }
+        // Debounce a little; in practice won't be noticed by users but
+        // will avoid hot looping in case the op becomes near instantaneous.
+        await waitFor(100);
+        counter++;
+      }
+    });


The polling method lacks proper error handling when the maximum polling attempts are reached. Currently, if counter reaches maxCount (1000), the promise neither resolves nor rejects, potentially leaving the caller hanging indefinitely. Consider adding a rejection when the maximum count is reached:

if (counter >= maxCount) { resolve(undefined); // or reject with an error return; }

This ensures the promise always completes, allowing the caller to handle the timeout case appropriately.

Suggested change

#pollForTentativeDevice = async (): Promise<DeviceData | undefined> => {

const actor = await get(authenticatedStore).actor;

// eslint-disable-next-line no-async-promise-executor

return new Promise<DeviceData | undefined>(async (resolve) => {

// TODO: Add countdown or timeout

let counter = 0;

const maxCount = 1000;

while (counter < maxCount) {

const anchorInfo = await actor.get_anchor_info(this.#identityNumber);

const tentativeDevice =

anchorInfo.device_registration[0]?.tentative_device[0];

if (nonNullish(tentativeDevice)) {

resolve(tentativeDevice);

return;

}

// Debounce a little; in practice won't be noticed by users but

// will avoid hot looping in case the op becomes near instantaneous.

await waitFor(100);

counter++;

}

});

#pollForTentativeDevice = async (): Promise<DeviceData | undefined> => {

const actor = await get(authenticatedStore).actor;

// eslint-disable-next-line no-async-promise-executor

return new Promise<DeviceData | undefined>(async (resolve) => {

// TODO: Add countdown or timeout

let counter = 0;

const maxCount = 1000;

while (counter < maxCount) {

const anchorInfo = await actor.get_anchor_info(this.#identityNumber);

const tentativeDevice =

anchorInfo.device_registration[0]?.tentative_device[0];

if (nonNullish(tentativeDevice)) {

resolve(tentativeDevice);

return;

}

// Debounce a little; in practice won't be noticed by users but

// will avoid hot looping in case the op becomes near instantaneous.

await waitFor(100);

counter++;

}

// Resolve with undefined if max count is reached

resolve(undefined);

});

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

lmuntaner · 2025-07-24T07:07:41Z

Closing, this has been merged in different PRs

lmuntaner added 2 commits July 2, 2025 11:28

PoC adding passkey from dashboard

15f13ff

Add some comments

41c7b38

sea-snake reviewed Jul 2, 2025

View reviewed changes

LXIF added 10 commits July 2, 2025 16:41

update feature flag default

a1e7c3c

Merge branch 'main' into lm-poc-add-passkey

e45a0c2

minor changes

bda29ff

temporary save

fb2cf4f

basic flow working

da836d5

ux improvements, add to last used identities

f0a8abf

done for today

26cdadd

poc done behind feature flag

cbe6278

Merge branch 'main' into lm-poc-add-passkey

ee86849

linting and add enter handler for authorize code entry

17ecb1a

LXIF marked this pull request as ready for review July 4, 2025 10:00

LXIF requested a review from sea-snake July 4, 2025 10:00

lmuntaner commented Jul 4, 2025

View reviewed changes

update interface, small bugfixes and improvements

bcbda78

graphite-app bot reviewed Jul 4, 2025

View reviewed changes

LXIF added 9 commits July 4, 2025 14:09

lint

6e9698e

fix missing user param case

c64320e

handle loop rejection

efaccb0

lint

a75238e

revert waitfor

9542042

linter

4c342f0

lint

9aedd9d

rename

9ecae3b

fix name

fd5bd5e

LXIF marked this pull request as draft July 7, 2025 14:59

lmuntaner closed this Jul 24, 2025


		const identityNumber = this.#identityNumber;

		const identityInfoResponse =


		void throwCanisterError(replaceResult);

		const credentialId = new Uint8Array(passkeyIdentity.getCredentialId()!);

		const user = page.url.searchParams.get("user");
		const flow = new AddPasskeyFlow(BigInt(user!));

-  const user = page.url.searchParams.get("user");
-  const flow = new AddPasskeyFlow(BigInt(user!));
+const userParam = page.url.searchParams.get("user");
+if (!userParam || isNaN(Number(userParam))) {
+  // Handle error case - perhaps redirect or show error message
+  throw new Error("Invalid or missing user parameter");
+}
+const flow = new AddPasskeyFlow(BigInt(userParam));

PoC adding passkey from dashboard #3158

PoC adding passkey from dashboard #3158

Uh oh!

Conversation

lmuntaner commented Jul 2, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation

Changes

Tests

Uh oh!

sea-snake Jul 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lmuntaner left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LXIF Jul 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

lmuntaner commented Jul 2, 2025 •

edited by github-actions bot

Loading

sea-snake Jul 2, 2025 •

edited

Loading

LXIF Jul 4, 2025 •

edited

Loading