From 81fc03c705a2aec896ffc346314d2e4bf414b7b2 Mon Sep 17 00:00:00 2001 From: Lewis Date: Wed, 18 Mar 2026 18:36:16 +0200 Subject: [PATCH] refactor(frontend): refactor migration and registration lib --- .../src/components/CommsChannelPicker.svelte | 139 +++++++++ frontend/src/components/HandleInput.svelte | 34 +++ .../src/components/IdentityTypeSection.svelte | 78 ++++++ frontend/src/components/ReauthModal.svelte | 26 +- frontend/src/lib/flows/email-verification.ts | 29 ++ frontend/src/lib/flows/migration-shared.ts | 56 ++++ .../lib/flows/perform-passkey-registration.ts | 54 ++++ frontend/src/lib/migration/atproto-client.ts | 72 ++--- frontend/src/lib/migration/flow.svelte.ts | 140 ++++++---- .../src/lib/migration/offline-flow.svelte.ts | 152 ++++------ frontend/src/lib/migration/types.ts | 23 +- frontend/src/lib/portal.ts | 11 + .../lib/registration/AppPasswordStep.svelte | 51 ---- frontend/src/lib/registration/flow.svelte.ts | 264 +++++++----------- frontend/src/lib/registration/index.ts | 2 +- 15 files changed, 706 insertions(+), 425 deletions(-) create mode 100644 frontend/src/components/CommsChannelPicker.svelte create mode 100644 frontend/src/components/IdentityTypeSection.svelte create mode 100644 frontend/src/lib/flows/email-verification.ts create mode 100644 frontend/src/lib/flows/migration-shared.ts create mode 100644 frontend/src/lib/flows/perform-passkey-registration.ts create mode 100644 frontend/src/lib/portal.ts delete mode 100644 frontend/src/lib/registration/AppPasswordStep.svelte diff --git a/frontend/src/components/CommsChannelPicker.svelte b/frontend/src/components/CommsChannelPicker.svelte new file mode 100644 index 0000000..0bc6f06 --- /dev/null +++ b/frontend/src/components/CommsChannelPicker.svelte @@ -0,0 +1,139 @@ + + +
+ + +
+ +{#if channel === 'email'} +
+ + onEmailChange((e.target as HTMLInputElement).value)} + placeholder={$_('register.emailPlaceholder')} + {disabled} + required + /> +
+{:else if channel === 'discord'} +
+ + onDiscordChange((e.target as HTMLInputElement).value)} + onblur={() => onCheckInUse?.('discord', discordUsername)} + placeholder={$_('register.discordUsernamePlaceholder')} + {disabled} + required + /> + {#if discordInUse} +

{$_('register.discordInUseWarning')}

+ {/if} +
+{:else if channel === 'telegram'} +
+ + onTelegramChange((e.target as HTMLInputElement).value)} + onblur={() => onCheckInUse?.('telegram', telegramUsername)} + placeholder={$_('register.telegramUsernamePlaceholder')} + {disabled} + required + /> + {#if telegramInUse} +

{$_('register.telegramInUseWarning')}

+ {/if} +
+{:else if channel === 'signal'} +
+ + onSignalChange((e.target as HTMLInputElement).value)} + onblur={() => onCheckInUse?.('signal', signalUsername)} + placeholder={$_('register.signalUsernamePlaceholder')} + {disabled} + required + /> +

{$_('register.signalUsernameHint')}

+ {#if signalInUse} +

{$_('register.signalInUseWarning')}

+ {/if} +
+{/if} diff --git a/frontend/src/components/HandleInput.svelte b/frontend/src/components/HandleInput.svelte index 98d359a..eb1f077 100644 --- a/frontend/src/components/HandleInput.svelte +++ b/frontend/src/components/HandleInput.svelte @@ -7,6 +7,9 @@ placeholder?: string id?: string autocomplete?: HTMLInputElement['autocomplete'] + checkAvailability?: (fullHandle: string) => Promise + available?: boolean | null + checking?: boolean onInput: (value: string) => void onDomainChange: (domain: string) => void } @@ -19,11 +22,42 @@ placeholder = 'username', id = 'handle', autocomplete = 'off', + checkAvailability, + available = $bindable(null), + checking = $bindable(false), onInput, onDomainChange, }: Props = $props() const showDomainSelect = $derived(domains.length > 1 && !value.includes('.')) + + let checkTimeout: ReturnType | null = null + + $effect(() => { + void value + void selectedDomain + if (!checkAvailability) return + if (checkTimeout) clearTimeout(checkTimeout) + available = null + if (value.trim().length >= 3 && !value.includes('.')) { + checkTimeout = setTimeout(() => runCheck(), 400) + } + }) + + async function runCheck() { + if (!checkAvailability) return + const fullHandle = value.includes('.') + ? value.trim() + : `${value.trim()}.${selectedDomain}` + checking = true + try { + available = await checkAvailability(fullHandle) + } catch { + available = null + } finally { + checking = false + } + }
diff --git a/frontend/src/components/IdentityTypeSection.svelte b/frontend/src/components/IdentityTypeSection.svelte new file mode 100644 index 0000000..75c6a6e --- /dev/null +++ b/frontend/src/components/IdentityTypeSection.svelte @@ -0,0 +1,78 @@ + + +
+ {$_('registerPasskey.identityType')} +
+ + + +
+
+ +{#if didType === 'web'} +
+ {$_('registerPasskey.didWebWarningTitle')} +
    +
  • {$_('registerPasskey.didWebWarning1')} {@html $_('registerPasskey.didWebWarning1Detail', { values: { did: `did:web:yourhandle.${defaultDomain}` } })}
    • +
  • {$_('registerPasskey.didWebWarning2')} {$_('registerPasskey.didWebWarning2Detail')}
    • +
  • {$_('registerPasskey.didWebWarning3')} {$_('registerPasskey.didWebWarning3Detail')}
    • +
  • {$_('registerPasskey.didWebWarning4')} {$_('registerPasskey.didWebWarning4Detail')}
    • +
+
+{/if} + +{#if didType === 'web-external'} +
+ + onExternalDidChange(e.currentTarget.value)} placeholder={$_('registerPasskey.externalDidPlaceholder')} {disabled} required /> +

{$_('registerPasskey.externalDidHint')} https://{externalDid ? extractDomain(externalDid) : 'yourdomain.com'}/.well-known/did.json

+
+{/if} diff --git a/frontend/src/components/ReauthModal.svelte b/frontend/src/components/ReauthModal.svelte index 8253a20..cb7a238 100644 --- a/frontend/src/components/ReauthModal.svelte +++ b/frontend/src/components/ReauthModal.svelte @@ -1,4 +1,5 @@ {#if show} -
e.key === 'Escape' && handleClose()} role="presentation"> +
e.key === 'Escape' && handleClose()} role="presentation">
e.stopPropagation()} onkeydown={(e) => e.stopPropagation()} role="dialog" aria-modal="true" tabindex="-1">

{$_('reauth.title')}

@@ -181,7 +182,7 @@
{#if activeMethod === 'password'} -
+
-
{:else if activeMethod === 'totp'} -
+
-
{:else if activeMethod === 'passkey'}
- +

{$_('reauth.usePasskey')}

{/if}
@@ -228,6 +221,15 @@ + {#if activeMethod === 'passkey'} + + {:else} + + {/if}
diff --git a/frontend/src/lib/flows/email-verification.ts b/frontend/src/lib/flows/email-verification.ts new file mode 100644 index 0000000..5e6f8d2 --- /dev/null +++ b/frontend/src/lib/flows/email-verification.ts @@ -0,0 +1,29 @@ +export interface EmailVerificationDeps { + checkVerified: () => Promise; + onVerified: () => Promise; +} + +export function createEmailVerificationPoller( + deps: EmailVerificationDeps, +): { checkAndAdvance: () => Promise } { + let checking = false; + + return { + async checkAndAdvance(): Promise { + if (checking) return false; + + checking = true; + try { + const verified = await deps.checkVerified(); + if (!verified) return false; + + await deps.onVerified(); + return true; + } catch { + return false; + } finally { + checking = false; + } + }, + }; +} diff --git a/frontend/src/lib/flows/migration-shared.ts b/frontend/src/lib/flows/migration-shared.ts new file mode 100644 index 0000000..452c48e --- /dev/null +++ b/frontend/src/lib/flows/migration-shared.ts @@ -0,0 +1,56 @@ +import type { + MigrationProgress, + ServerDescription, + VerificationChannel, +} from "../migration/types.ts"; +import type { AtprotoClient } from "../migration/atproto-client.ts"; + +export function createInitialProgress(): MigrationProgress { + return { + repoExported: false, + repoImported: false, + blobsTotal: 0, + blobsMigrated: 0, + blobsFailed: [], + prefsMigrated: false, + plcSigned: false, + activated: false, + deactivated: false, + currentOperation: "", + }; +} + +export async function checkHandleAvailabilityViaClient( + client: AtprotoClient, + handle: string, +): Promise { + try { + await client.resolveHandle(handle); + return false; + } catch { + return true; + } +} + +export function resolveVerificationIdentifier( + channel: VerificationChannel, + email: string, + discordUsername: string, + telegramUsername: string, + signalUsername: string, +): string { + switch (channel) { + case "email": return email; + case "discord": return discordUsername; + case "telegram": return telegramUsername; + case "signal": return signalUsername; + } +} + +export async function loadServerInfo( + client: AtprotoClient, + cached: ServerDescription | null, +): Promise { + if (cached) return cached; + return client.describeServer(); +} diff --git a/frontend/src/lib/flows/perform-passkey-registration.ts b/frontend/src/lib/flows/perform-passkey-registration.ts new file mode 100644 index 0000000..5588fec --- /dev/null +++ b/frontend/src/lib/flows/perform-passkey-registration.ts @@ -0,0 +1,54 @@ +import { + type CredentialAttestationJSON, + prepareCreationOptions, + serializeAttestationResponse, + type WebAuthnCreationOptionsResponse, +} from "../webauthn.ts"; + +export class PasskeyCancelledError extends Error { + constructor() { + super("Passkey creation was cancelled"); + this.name = "PasskeyCancelledError"; + } +} + +export async function createPasskeyCredential( + startRegistration: () => Promise<{ options: unknown }>, +): Promise { + if (!globalThis.PublicKeyCredential) { + throw new Error("Passkeys are not supported in this browser"); + } + + const { options } = await startRegistration(); + + const publicKeyOptions = prepareCreationOptions( + options as unknown as WebAuthnCreationOptionsResponse, + ); + const credential = await navigator.credentials.create({ + publicKey: publicKeyOptions, + }); + + if (!credential) { + throw new PasskeyCancelledError(); + } + + return serializeAttestationResponse(credential as PublicKeyCredential); +} + +export interface PasskeyRegistrationApi { + startRegistration(): Promise<{ options: unknown }>; + completeSetup( + credential: CredentialAttestationJSON, + name?: string, + ): Promise<{ appPassword: string; appPasswordName: string }>; +} + +export async function performPasskeyRegistration( + passkeyApi: PasskeyRegistrationApi, + friendlyName?: string, +): Promise<{ appPassword: string; appPasswordName: string }> { + const serialized = await createPasskeyCredential( + passkeyApi.startRegistration, + ); + return passkeyApi.completeSetup(serialized, friendlyName); +} diff --git a/frontend/src/lib/migration/atproto-client.ts b/frontend/src/lib/migration/atproto-client.ts index 6d42d97..9cbb8ce 100644 --- a/frontend/src/lib/migration/atproto-client.ts +++ b/frontend/src/lib/migration/atproto-client.ts @@ -603,6 +603,20 @@ export class AtprotoClient { return result.verified; } + async checkChannelVerified( + did: string, + channel: string, + ): Promise { + const result = await this.xrpc<{ verified: boolean }>( + "_checkChannelVerified", + { + httpMethod: "POST", + body: { did, channel }, + }, + ); + return result.verified; + } + async verifyToken( token: string, identifier: string, @@ -625,9 +639,13 @@ export class AtprotoClient { }); } - async resendMigrationVerification(): Promise { + async resendMigrationVerification( + channel: string, + identifier: string, + ): Promise { await this.xrpc("com.atproto.server.resendMigrationVerification", { httpMethod: "POST", + body: { channel, identifier }, }); } @@ -731,23 +749,7 @@ export async function getOAuthServerMetadata( } } -export async function generatePKCE(): Promise<{ - codeVerifier: string; - codeChallenge: string; -}> { - const array = new Uint8Array(32); - crypto.getRandomValues(array); - const codeVerifier = base64UrlEncode(array); - - const encoder = new TextEncoder(); - const data = encoder.encode(codeVerifier); - const digest = await crypto.subtle.digest("SHA-256", data); - const codeChallenge = base64UrlEncode(new Uint8Array(digest)); - - return { codeVerifier, codeChallenge }; -} - -export function base64UrlEncode(buffer: Uint8Array | ArrayBuffer): string { +function base64UrlEncode(buffer: Uint8Array | ArrayBuffer): string { const bytes = buffer instanceof ArrayBuffer ? new Uint8Array(buffer) : buffer; const binary = Array.from(bytes, (byte) => String.fromCharCode(byte)).join( "", @@ -758,34 +760,6 @@ export function base64UrlEncode(buffer: Uint8Array | ArrayBuffer): string { ); } -export function base64UrlDecode(base64url: string): Uint8Array { - const base64 = base64url.replace(/-/g, "+").replace(/_/g, "/"); - const padded = base64 + "=".repeat((4 - (base64.length % 4)) % 4); - const binary = atob(padded); - return Uint8Array.from(binary, (char) => char.charCodeAt(0)); -} - -export function prepareWebAuthnCreationOptions( - options: { publicKey: Record }, -): PublicKeyCredentialCreationOptions { - const pk = options.publicKey; - return { - ...pk, - challenge: base64UrlDecode(pk.challenge as string), - user: { - ...(pk.user as Record), - id: base64UrlDecode((pk.user as Record).id as string), - }, - excludeCredentials: - ((pk.excludeCredentials as Array>) ?? []).map( - (cred) => ({ - ...cred, - id: base64UrlDecode(cred.id as string), - }), - ), - } as unknown as PublicKeyCredentialCreationOptions; -} - async function computeAccessTokenHash(accessToken: string): Promise { const encoder = new TextEncoder(); const data = encoder.encode(accessToken); @@ -793,12 +767,6 @@ async function computeAccessTokenHash(accessToken: string): Promise { return base64UrlEncode(new Uint8Array(hash)); } -export function generateOAuthState(): string { - const array = new Uint8Array(16); - crypto.getRandomValues(array); - return base64UrlEncode(array); -} - export function buildOAuthAuthorizationUrl( metadata: OAuthServerMetadata, params: { diff --git a/frontend/src/lib/migration/flow.svelte.ts b/frontend/src/lib/migration/flow.svelte.ts index 13f0e56..46ac95d 100644 --- a/frontend/src/lib/migration/flow.svelte.ts +++ b/frontend/src/lib/migration/flow.svelte.ts @@ -12,8 +12,6 @@ import { createLocalClient, exchangeOAuthCode, generateDPoPKeyPair, - generateOAuthState, - generatePKCE, getMigrationOAuthClientId, getMigrationOAuthRedirectUri, getOAuthServerMetadata, @@ -22,6 +20,11 @@ import { resolvePdsUrl, saveDPoPKey, } from "./atproto-client.ts"; +import { + generateCodeChallenge, + generateCodeVerifier, + generateState, +} from "../oauth.ts"; import { clearMigrationState, saveMigrationState, @@ -40,20 +43,13 @@ function migrationLog(stage: string, data?: Record) { } } -function createInitialProgress(): MigrationProgress { - return { - repoExported: false, - repoImported: false, - blobsTotal: 0, - blobsMigrated: 0, - blobsFailed: [], - prefsMigrated: false, - plcSigned: false, - activated: false, - deactivated: false, - currentOperation: "", - }; -} +import { + createInitialProgress, + checkHandleAvailabilityViaClient, + loadServerInfo, + resolveVerificationIdentifier, +} from "../flows/migration-shared.ts"; +import { createEmailVerificationPoller } from "../flows/email-verification.ts"; export function createInboundMigrationFlow() { let state = $state({ @@ -82,11 +78,16 @@ export function createInboundMigrationFlow() { generatedAppPasswordName: null, handlePreservation: "new", existingHandleVerified: false, + verificationChannel: "email", + discordUsername: "", + telegramUsername: "", + signalUsername: "", }); let sourceClient: AtprotoClient | null = null; let localClient: AtprotoClient | null = null; let localServerInfo: ServerDescription | null = null; + let sourcePdsDomains: string[] = []; function setStep(step: InboundStep) { state.step = step; @@ -113,10 +114,9 @@ export function createInboundMigrationFlow() { if (!localClient) { localClient = createLocalClient(); } - if (!localServerInfo) { - localServerInfo = await localClient.describeServer(); - } - return localServerInfo; + const info = await loadServerInfo(localClient, localServerInfo); + localServerInfo = info; + return info; } async function resolveSourcePds(handle: string): Promise { @@ -147,8 +147,9 @@ export function createInboundMigrationFlow() { ); } - const { codeVerifier, codeChallenge } = await generatePKCE(); - const oauthState = generateOAuthState(); + const codeVerifier = generateCodeVerifier(); + const codeChallenge = await generateCodeChallenge(codeVerifier); + const oauthState = generateState(); const dpopKeyPair = await generateDPoPKeyPair(); await saveDPoPKey(dpopKeyPair); @@ -314,16 +315,23 @@ export function createInboundMigrationFlow() { saveMigrationState(state); } + async function loadSourcePdsDomains(): Promise { + if (sourcePdsDomains.length > 0) return sourcePdsDomains; + if (!sourceClient) return []; + try { + const info = await sourceClient.describeServer(); + sourcePdsDomains = info.availableUserDomains; + } catch { + sourcePdsDomains = []; + } + return sourcePdsDomains; + } + async function checkHandleAvailability(handle: string): Promise { if (!localClient) { localClient = createLocalClient(); } - try { - await localClient.resolveHandle(handle); - return false; - } catch { - return true; - } + return checkHandleAvailabilityViaClient(localClient, handle); } async function verifyExistingHandle(): Promise<{ @@ -401,8 +409,12 @@ export function createInboundMigrationFlow() { const passkeyParams = { did: state.sourceDid, handle: state.targetHandle, - email: state.targetEmail, + email: state.targetEmail || undefined, inviteCode: state.inviteCode || undefined, + verificationChannel: state.verificationChannel, + discordUsername: state.discordUsername || undefined, + telegramUsername: state.telegramUsername || undefined, + signalUsername: state.signalUsername || undefined, }; migrationLog("startMigration: Creating passkey account on NEW PDS", { @@ -428,9 +440,13 @@ export function createInboundMigrationFlow() { const accountParams = { did: state.sourceDid, handle: state.targetHandle, - email: state.targetEmail, + email: state.targetEmail || undefined, password: state.targetPassword, inviteCode: state.inviteCode || undefined, + verificationChannel: state.verificationChannel, + discordUsername: state.discordUsername || undefined, + telegramUsername: state.telegramUsername || undefined, + signalUsername: state.signalUsername || undefined, }; migrationLog("startMigration: Creating account on NEW PDS", { @@ -618,30 +634,40 @@ export function createInboundMigrationFlow() { if (!localClient) { localClient = createLocalClient(); } - await localClient.resendMigrationVerification(); + await localClient.resendMigrationVerification( + state.verificationChannel, + resolveVerificationIdentifier( + state.verificationChannel, + state.targetEmail, + state.discordUsername, + state.telegramUsername, + state.signalUsername, + ), + ); } - let checkingEmailVerification = false; - - async function checkEmailVerifiedAndProceed(): Promise { - if (checkingEmailVerification) return false; - if (!localClient) return false; - - checkingEmailVerification = true; - try { - const verified = await localClient.checkEmailVerified(state.targetEmail); - if (!verified) return false; - + const verificationPoller = createEmailVerificationPoller({ + async checkVerified() { + if (!localClient) return false; + if (state.verificationChannel === "email") { + return localClient.checkEmailVerified(state.targetEmail); + } + return localClient.checkChannelVerified( + state.sourceDid, + state.verificationChannel, + ); + }, + async onVerified() { if (state.authMethod === "passkey") { migrationLog( "checkEmailVerifiedAndProceed: Email verified, proceeding to passkey setup", ); setStep("passkey-setup"); - return true; + return; } - if (!localClient.getAccessToken()) { - await localClient.loginDeactivated( + if (!localClient!.getAccessToken()) { + await localClient!.loginDeactivated( state.targetEmail, state.targetPassword, ); @@ -652,11 +678,11 @@ export function createInboundMigrationFlow() { setError( "Email verified! Please log in to your old account again to complete the migration.", ); - return true; + return; } if (state.sourceDid.startsWith("did:web:")) { - const credentials = await localClient.getRecommendedDidCredentials(); + const credentials = await localClient!.getRecommendedDidCredentials(); state.targetVerificationMethod = credentials.verificationMethods?.atproto || null; setStep("did-web-update"); @@ -664,16 +690,11 @@ export function createInboundMigrationFlow() { await sourceClient.requestPlcOperationSignature(); setStep("plc-token"); } - return true; - } catch (e) { - const err = e as Error & { error?: string }; - if (err.error === "AccountNotVerified") { - return false; - } - return false; - } finally { - checkingEmailVerification = false; - } + }, + }); + + function checkEmailVerifiedAndProceed(): Promise { + return verificationPoller.checkAndAdvance(); } async function submitPlcToken(token: string): Promise { @@ -946,6 +967,10 @@ export function createInboundMigrationFlow() { generatedAppPasswordName: null, handlePreservation: "new", existingHandleVerified: false, + verificationChannel: "email", + discordUsername: "", + telegramUsername: "", + signalUsername: "", }; sourceClient = null; passkeySetup = null; @@ -1025,6 +1050,7 @@ export function createInboundMigrationFlow() { setStep, setError, loadLocalServerInfo, + loadSourcePdsDomains, resolveSourcePds, initiateOAuthLogin, handleOAuthCallback, diff --git a/frontend/src/lib/migration/offline-flow.svelte.ts b/frontend/src/lib/migration/offline-flow.svelte.ts index 16f848b..3cb9692 100644 --- a/frontend/src/lib/migration/offline-flow.svelte.ts +++ b/frontend/src/lib/migration/offline-flow.svelte.ts @@ -7,10 +7,9 @@ import type { } from "./types.ts"; import { AtprotoClient, - base64UrlEncode, createLocalClient, - prepareWebAuthnCreationOptions, } from "./atproto-client.ts"; +import { createPasskeyCredential } from "../flows/perform-passkey-registration.ts"; import { api } from "../api.ts"; import { type KeypairInfo, plcOps, type PrivateKey } from "./plc-ops.ts"; import { migrateBlobs as migrateBlobsUtil } from "./blob-migration.ts"; @@ -124,20 +123,13 @@ export function getOfflineResumeInfo(): { export { clearOfflineState }; -function createInitialProgress(): MigrationProgress { - return { - repoExported: false, - repoImported: false, - blobsTotal: 0, - blobsMigrated: 0, - blobsFailed: [], - prefsMigrated: false, - plcSigned: false, - activated: false, - deactivated: false, - currentOperation: "", - }; -} +import { + createInitialProgress, + checkHandleAvailabilityViaClient, + loadServerInfo, + resolveVerificationIdentifier, +} from "../flows/migration-shared.ts"; +import { createEmailVerificationPoller } from "../flows/email-verification.ts"; export type OfflineInboundMigrationFlow = ReturnType< typeof createOfflineInboundMigrationFlow @@ -171,6 +163,10 @@ export function createOfflineInboundMigrationFlow() { plcUpdatedTemporarily: false, handlePreservation: "new", existingHandleVerified: false, + verificationChannel: "email", + discordUsername: "", + telegramUsername: "", + signalUsername: "", }); let localServerInfo: ServerDescription | null = null; @@ -198,21 +194,13 @@ export function createOfflineInboundMigrationFlow() { } async function loadLocalServerInfo(): Promise { - if (!localServerInfo) { - const client = createLocalClient(); - localServerInfo = await client.describeServer(); - } - return localServerInfo; + const info = await loadServerInfo(createLocalClient(), localServerInfo); + localServerInfo = info; + return info; } async function checkHandleAvailability(handle: string): Promise { - const client = createLocalClient(); - try { - await client.resolveHandle(handle); - return false; - } catch { - return true; - } + return checkHandleAvailabilityViaClient(createLocalClient(), handle); } async function validateRotationKey(): Promise { @@ -235,18 +223,6 @@ export function createOfflineInboundMigrationFlow() { const pdsService = lastOperation.services?.atproto_pds; if (pdsService?.endpoint) { state.oldPdsUrl = pdsService.endpoint; - console.log( - "[offline-migration] Captured old PDS URL:", - state.oldPdsUrl, - ); - } else { - console.warn( - "[offline-migration] No PDS service endpoint found in PLC document", - ); - console.log( - "[offline-migration] PLC services:", - JSON.stringify(lastOperation.services), - ); } saveOfflineState(state); @@ -315,9 +291,13 @@ export function createOfflineInboundMigrationFlow() { { did: unsafeAsDid(state.userDid), handle: unsafeAsHandle(fullHandle), - email: unsafeAsEmail(state.targetEmail), + email: state.targetEmail ? unsafeAsEmail(state.targetEmail) : undefined, password: state.targetPassword, inviteCode: state.inviteCode || undefined, + verificationChannel: state.verificationChannel, + discordUsername: state.discordUsername || undefined, + telegramUsername: state.telegramUsername || undefined, + signalUsername: state.signalUsername || undefined, }, ); @@ -338,8 +318,12 @@ export function createOfflineInboundMigrationFlow() { const createResult = await api.createPasskeyAccount({ did: unsafeAsDid(state.userDid), handle: unsafeAsHandle(fullHandle), - email: unsafeAsEmail(state.targetEmail), + email: state.targetEmail ? unsafeAsEmail(state.targetEmail) : undefined, inviteCode: state.inviteCode || undefined, + verificationChannel: state.verificationChannel, + discordUsername: state.discordUsername || undefined, + telegramUsername: state.telegramUsername || undefined, + signalUsername: state.signalUsername || undefined, }, serviceAuthToken); state.targetHandle = fullHandle; @@ -487,20 +471,32 @@ export function createOfflineInboundMigrationFlow() { } async function resendEmailVerification(): Promise { - await api.resendMigrationVerification(unsafeAsEmail(state.targetEmail)); + await api.resendMigrationVerification( + state.verificationChannel, + resolveVerificationIdentifier( + state.verificationChannel, + state.targetEmail, + state.discordUsername, + state.telegramUsername, + state.signalUsername, + ), + ); } - let checkingEmailVerification = false; - - async function checkEmailVerifiedAndProceed(): Promise { - if (checkingEmailVerification) return false; - if (state.authMethod === "passkey") return false; - - checkingEmailVerification = true; - try { - const { verified } = await api.checkEmailVerified(state.targetEmail); - if (!verified) return false; - + const verificationPoller = createEmailVerificationPoller({ + async checkVerified() { + if (state.authMethod === "passkey") return false; + if (state.verificationChannel === "email") { + const { verified } = await api.checkEmailVerified(state.targetEmail); + return verified; + } + const { verified } = await api.checkChannelVerified( + state.userDid, + state.verificationChannel, + ); + return verified; + }, + async onVerified() { if (!state.localAccessToken) { const session = await api.createSession( state.targetEmail, @@ -519,12 +515,11 @@ export function createOfflineInboundMigrationFlow() { cleanup(); setStep("success"); - return true; - } catch { - return false; - } finally { - checkingEmailVerification = false; - } + }, + }); + + function checkEmailVerifiedAndProceed(): Promise { + return verificationPoller.checkAndAdvance(); } async function startPasskeyRegistration(): Promise<{ options: unknown }> { @@ -543,41 +538,14 @@ export function createOfflineInboundMigrationFlow() { throw new Error("No passkey setup token"); } - if (!globalThis.PublicKeyCredential) { - throw new Error("Passkeys are not supported in this browser"); - } - - const { options } = await startPasskeyRegistration(); - - const publicKeyOptions = prepareWebAuthnCreationOptions( - options as { publicKey: Record }, + const credential = await createPasskeyCredential( + () => startPasskeyRegistration(), ); - const credential = await navigator.credentials.create({ - publicKey: publicKeyOptions, - }); - - if (!credential) { - throw new Error("Passkey creation was cancelled"); - } - - const publicKeyCredential = credential as PublicKeyCredential; - const response = publicKeyCredential - .response as AuthenticatorAttestationResponse; - - const credentialData = { - id: publicKeyCredential.id, - rawId: base64UrlEncode(publicKeyCredential.rawId), - type: publicKeyCredential.type, - response: { - clientDataJSON: base64UrlEncode(response.clientDataJSON), - attestationObject: base64UrlEncode(response.attestationObject), - }, - }; const result = await api.completePasskeySetup( unsafeAsDid(state.userDid), state.passkeySetupToken, - credentialData, + credential, passkeyName, ); @@ -675,6 +643,10 @@ export function createOfflineInboundMigrationFlow() { plcUpdatedTemporarily: false, handlePreservation: "new", existingHandleVerified: false, + verificationChannel: "email", + discordUsername: "", + telegramUsername: "", + signalUsername: "", }; localServerInfo = null; } diff --git a/frontend/src/lib/migration/types.ts b/frontend/src/lib/migration/types.ts index 3bb181c..e2c0028 100644 --- a/frontend/src/lib/migration/types.ts +++ b/frontend/src/lib/migration/types.ts @@ -50,6 +50,8 @@ export interface MigrationProgress { export type HandlePreservation = "new" | "existing"; +export type VerificationChannel = "email" | "discord" | "telegram" | "signal"; + export interface InboundMigrationState { direction: "inbound"; step: InboundStep; @@ -78,6 +80,10 @@ export interface InboundMigrationState { resumeToStep?: InboundStep; handlePreservation: HandlePreservation; existingHandleVerified: boolean; + verificationChannel: VerificationChannel; + discordUsername: string; + telegramUsername: string; + signalUsername: string; } export interface OfflineInboundMigrationState { @@ -107,6 +113,10 @@ export interface OfflineInboundMigrationState { plcUpdatedTemporarily: boolean; handlePreservation: HandlePreservation; existingHandleVerified: boolean; + verificationChannel: VerificationChannel; + discordUsername: string; + telegramUsername: string; + signalUsername: string; } export type MigrationState = InboundMigrationState; @@ -142,6 +152,7 @@ export interface ServerDescription { availableUserDomains: string[]; inviteCodeRequired: boolean; phoneVerificationRequired?: boolean; + availableCommsChannels?: VerificationChannel[]; links?: { privacyPolicy?: string; termsOfService?: string; @@ -226,17 +237,25 @@ export interface BlobRef { export interface CreateAccountParams { did?: string; handle: string; - email: string; + email?: string; password: string; inviteCode?: string; recoveryKey?: string; + verificationChannel?: VerificationChannel; + discordUsername?: string; + telegramUsername?: string; + signalUsername?: string; } export interface CreatePasskeyAccountParams { did?: string; handle: string; - email: string; + email?: string; inviteCode?: string; + verificationChannel?: VerificationChannel; + discordUsername?: string; + telegramUsername?: string; + signalUsername?: string; } export interface PasskeyAccountSetup { diff --git a/frontend/src/lib/portal.ts b/frontend/src/lib/portal.ts new file mode 100644 index 0000000..4476c04 --- /dev/null +++ b/frontend/src/lib/portal.ts @@ -0,0 +1,11 @@ +export function portal(node: HTMLElement): { destroy: () => void } { + const target = document.body; + target.appendChild(node); + return { + destroy() { + if (node.parentNode === target) { + target.removeChild(node); + } + }, + }; +} diff --git a/frontend/src/lib/registration/AppPasswordStep.svelte b/frontend/src/lib/registration/AppPasswordStep.svelte deleted file mode 100644 index 413eef5..0000000 --- a/frontend/src/lib/registration/AppPasswordStep.svelte +++ /dev/null @@ -1,51 +0,0 @@ - - -
-
- Important: Save this app password! -

- This app password is required to sign into apps that don't support passkeys yet (like bsky.app). - You will only see this password once. -

-
- -
-
- App Password for: {flow.account?.appPasswordName} -
- {flow.account?.appPassword} - -
- -
- -
- - -
- diff --git a/frontend/src/lib/registration/flow.svelte.ts b/frontend/src/lib/registration/flow.svelte.ts index 204f997..f65269e 100644 --- a/frontend/src/lib/registration/flow.svelte.ts +++ b/frontend/src/lib/registration/flow.svelte.ts @@ -1,4 +1,5 @@ import { api, ApiError } from "../api.ts"; +import { createEmailVerificationPoller } from "../flows/email-verification.ts"; import { setSession } from "../auth.svelte.ts"; import { createServiceJwt, @@ -223,43 +224,51 @@ export function createRegistrationFlow( state.step = "creating"; } + async function generateByodToken(): Promise { + if ( + state.info.didType !== "web-external" || + state.externalDidWeb.keyMode !== "byod" || + !state.externalDidWeb.byodPrivateKey + ) { + return undefined; + } + return createServiceJwt( + state.externalDidWeb.byodPrivateKey, + state.info.externalDid!.trim(), + getPdsDid(), + "com.atproto.server.createAccount", + ); + } + + function commonAccountParams() { + return { + didType: state.info.didType, + did: state.info.didType === "web-external" + ? unsafeAsDid(state.info.externalDid!.trim()) + : undefined, + signingKey: state.info.didType === "web-external" && + state.externalDidWeb.keyMode === "reserved" + ? state.externalDidWeb.reservedSigningKey + : undefined, + inviteCode: state.info.inviteCode?.trim() || undefined, + verificationChannel: state.info.verificationChannel, + discordUsername: state.info.discordUsername?.trim() || undefined, + telegramUsername: state.info.telegramUsername?.trim() || undefined, + signalUsername: state.info.signalUsername?.trim() || undefined, + }; + } + async function createPasswordAccount() { state.submitting = true; state.error = null; try { - let byodToken: string | undefined; - - if ( - state.info.didType === "web-external" && - state.externalDidWeb.keyMode === "byod" && - state.externalDidWeb.byodPrivateKey - ) { - byodToken = await createServiceJwt( - state.externalDidWeb.byodPrivateKey, - state.info.externalDid!.trim(), - getPdsDid(), - "com.atproto.server.createAccount", - ); - } - + const byodToken = await generateByodToken(); const result = await api.createAccount({ handle: getFullHandle(), email: state.info.email.trim(), password: state.info.password!, - inviteCode: state.info.inviteCode?.trim() || undefined, - didType: state.info.didType, - did: state.info.didType === "web-external" - ? state.info.externalDid!.trim() - : undefined, - signingKey: state.info.didType === "web-external" && - state.externalDidWeb.keyMode === "reserved" - ? state.externalDidWeb.reservedSigningKey - : undefined, - verificationChannel: state.info.verificationChannel, - discordUsername: state.info.discordUsername?.trim() || undefined, - telegramUsername: state.info.telegramUsername?.trim() || undefined, - signalUsername: state.info.signalUsername?.trim() || undefined, + ...commonAccountParams(), }, byodToken); state.account = { @@ -280,39 +289,13 @@ export function createRegistrationFlow( state.error = null; try { - let byodToken: string | undefined; - - if ( - state.info.didType === "web-external" && - state.externalDidWeb.keyMode === "byod" && - state.externalDidWeb.byodPrivateKey - ) { - byodToken = await createServiceJwt( - state.externalDidWeb.byodPrivateKey, - state.info.externalDid!.trim(), - getPdsDid(), - "com.atproto.server.createAccount", - ); - } - + const byodToken = await generateByodToken(); const result = await api.createPasskeyAccount({ handle: unsafeAsHandle(getFullHandle()), email: state.info.email?.trim() ? unsafeAsEmail(state.info.email.trim()) : undefined, - inviteCode: state.info.inviteCode?.trim() || undefined, - didType: state.info.didType, - did: state.info.didType === "web-external" - ? unsafeAsDid(state.info.externalDid!.trim()) - : undefined, - signingKey: state.info.didType === "web-external" && - state.externalDidWeb.keyMode === "reserved" - ? state.externalDidWeb.reservedSigningKey - : undefined, - verificationChannel: state.info.verificationChannel, - discordUsername: state.info.discordUsername?.trim() || undefined, - telegramUsername: state.info.telegramUsername?.trim() || undefined, - signalUsername: state.info.signalUsername?.trim() || undefined, + ...commonAccountParams(), }, byodToken); state.account = { @@ -343,6 +326,50 @@ export function createRegistrationFlow( persistState(); } + function getAccountPassword(): string { + return state.mode === "passkey" + ? state.account!.appPassword! + : state.info.password!; + } + + async function handlePostVerification( + session: SessionState, + ): Promise { + state.session = session; + + if ( + state.info.didType === "web-external" && + state.externalDidWeb.keyMode === "byod" + ) { + const credentials = await api.getRecommendedDidCredentials( + session.accessJwt, + ); + const newPublicKeyMultibase = + credentials.verificationMethods?.atproto?.replace("did:key:", "") || ""; + + const didDoc = generateDidDocument( + state.info.externalDid!.trim(), + newPublicKeyMultibase, + state.account!.handle, + getPdsEndpoint(), + ); + state.externalDidWeb.updatedDidDocument = JSON.stringify( + didDoc, + null, + "\t", + ); + state.step = "updated-did-doc"; + persistState(); + } else if (state.info.didType === "web-external") { + await api.activateAccount(session.accessJwt); + await finalizeSession(); + state.step = "redirect-to-dashboard"; + } else { + await finalizeSession(); + state.step = "redirect-to-dashboard"; + } + } + async function verifyAccount(code: string) { state.submitting = true; state.error = null; @@ -354,48 +381,13 @@ export function createRegistrationFlow( ); if (state.info.didType === "web-external") { - const password = state.mode === "passkey" - ? state.account!.appPassword! - : state.info.password!; - const session = await api.createSession(state.account!.did, password); - state.session = { - accessJwt: session.accessJwt, - refreshJwt: session.refreshJwt, - }; - - if (state.externalDidWeb.keyMode === "byod") { - const credentials = await api.getRecommendedDidCredentials( - session.accessJwt, - ); - const newPublicKeyMultibase = - credentials.verificationMethods?.atproto?.replace("did:key:", "") || - ""; - - const didDoc = generateDidDocument( - state.info.externalDid!.trim(), - newPublicKeyMultibase, - state.account!.handle, - getPdsEndpoint(), - ); - state.externalDidWeb.updatedDidDocument = JSON.stringify( - didDoc, - null, - "\t", - ); - state.step = "updated-did-doc"; - persistState(); - } else { - await api.activateAccount(session.accessJwt); - await finalizeSession(); - state.step = "redirect-to-dashboard"; - } + const session = await api.createSession( + state.account!.did, + getAccountPassword(), + ); + await handlePostVerification(session); } else { - state.session = { - accessJwt: confirmResult.accessJwt, - refreshJwt: confirmResult.refreshJwt, - }; - await finalizeSession(); - state.step = "redirect-to-dashboard"; + await handlePostVerification(confirmResult); } } catch (err) { setError(err); @@ -419,74 +411,26 @@ export function createRegistrationFlow( } } - let checkingVerification = false; - - async function checkAndAdvanceIfVerified(): Promise { - if (checkingVerification || !state.account) return false; - - checkingVerification = true; - try { + const verificationPoller = createEmailVerificationPoller({ + async checkVerified() { + if (!state.account) return false; const result = await api.checkChannelVerified( state.account.did, state.info.verificationChannel, ); - if (!result.verified) return false; + return result.verified; + }, + async onVerified() { + const session = await api.createSession( + state.account!.did, + getAccountPassword(), + ); + await handlePostVerification(session); + }, + }); - if (state.info.didType === "web-external") { - const password = state.mode === "passkey" - ? state.account.appPassword! - : state.info.password!; - const session = await api.createSession(state.account.did, password); - state.session = { - accessJwt: session.accessJwt, - refreshJwt: session.refreshJwt, - }; - - if (state.externalDidWeb.keyMode === "byod") { - const credentials = await api.getRecommendedDidCredentials( - session.accessJwt, - ); - const newPublicKeyMultibase = - credentials.verificationMethods?.atproto?.replace("did:key:", "") || - ""; - - const didDoc = generateDidDocument( - state.info.externalDid!.trim(), - newPublicKeyMultibase, - state.account.handle, - getPdsEndpoint(), - ); - state.externalDidWeb.updatedDidDocument = JSON.stringify( - didDoc, - null, - "\t", - ); - state.step = "updated-did-doc"; - persistState(); - } else { - await api.activateAccount(session.accessJwt); - await finalizeSession(); - state.step = "redirect-to-dashboard"; - } - } else { - const password = state.mode === "passkey" - ? state.account.appPassword! - : state.info.password!; - const session = await api.createSession(state.account.did, password); - state.session = { - accessJwt: session.accessJwt, - refreshJwt: session.refreshJwt, - }; - await finalizeSession(); - state.step = "redirect-to-dashboard"; - } - - return true; - } catch { - return false; - } finally { - checkingVerification = false; - } + function checkAndAdvanceIfVerified(): Promise { + return verificationPoller.checkAndAdvance(); } function goBack() { diff --git a/frontend/src/lib/registration/index.ts b/frontend/src/lib/registration/index.ts index dda67c8..6a41c0a 100644 --- a/frontend/src/lib/registration/index.ts +++ b/frontend/src/lib/registration/index.ts @@ -3,4 +3,4 @@ export * from "./flow.svelte.ts"; export { default as VerificationStep } from "./VerificationStep.svelte"; export { default as KeyChoiceStep } from "./KeyChoiceStep.svelte"; export { default as DidDocStep } from "./DidDocStep.svelte"; -export { default as AppPasswordStep } from "./AppPasswordStep.svelte"; +