@atlasauth/svelte 0.15.1 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @atlasauth/svelte changelog
 
+## 0.16.0 — 2026-11-06
+
+- Uses `@atlasauth/js` 0.34.0. Emailed links now need the browser that started the flow or the code shown on the starting tab; the components show the code, ask for it on the link page, and offer every factor the instance has on at enrolment.
+
 ## 0.15.1 — 2026-11-05
 
 - Uses `@atlasauth/js` 0.33.1: a sign-up polls only while it waits for a proof, so a poll can't collect a ticket past the recovery codes.

package/dist/accessors.js

@@ -137,8 +137,11 @@ function createFlow(options = {}) {
             return;
         pollTimer = setInterval(() => {
             void (async () => {
-                const { state: next, ticket } = await pollAttempt(client, get(state));
-                state.set(next);
+                const polled = get(state);
+                const { state: next, ticket } = await pollAttempt(client, polled);
+                // A resend rotated the secret meanwhile: this answer is stale.
+                if (get(state).pollSecret === polled.pollSecret)
+                    state.set(next);
                 if (!shouldKeepPolling(next))
                     stopPolling();
                 if (!ticket || !next.attempt)

package/dist/components/AttemptFlow.svelte

@@ -1,5 +1,6 @@
 <script>import {
   awaitingSignUpLink,
+  enrollmentOptionKey,
   enrollmentSubmitKey,
   groupSetupKey,
   localizedErrorMessage,
@@ -25,6 +26,7 @@ export let onEmailSecondFactor = null;
 export let onSmsSecondFactor = null;
 export let enrollment = null;
 export let enrollmentState = null;
+export let matchCode = null;
 export let emailVerification = "code";
 export let onResend = null;
 export let onPolicyDecline = null;
@@ -214,6 +216,9 @@ function handleSubmit(event) {
           </button>
         {/if}
       {/if}
+      {#if matchCode && (step.kind === 'collect_email_code' || (step.kind === 'collect_first_factor' && sent === 'email_link'))}
+        <p class="atlas-text" data-atlas="link-match-code">{t('link.matchCodeHint')} <strong><code>{matchCode}</code></strong></p>
+      {/if}
       {#if enrolling && enrollmentState}
         {#if enrollmentState.method === null}
           <p class="atlas-text">{t('mfa.enrollChoose')}</p>
@@ -225,10 +230,29 @@ function handleSubmit(event) {
               disabled={busy || enrollmentState.busy}
               on:click={() => chooseMethod(m)}
             >
-              {t(m === 'totp' ? 'mfa.enrollTotpOption' : 'mfa.enrollSmsOption')}
+              {t(enrollmentOptionKey(m))}
             </button>
           {/each}
-        {:else if enrollmentState.method === 'totp'}
+        {:else if enrollmentState.method === 'yubikey'}
+          <label class="atlas-field">
+            <span>{t('mfa.yubikeyLabel')}</span>
+            <input class={cls('formFieldInput', 'atlas-input')} type="text" name="otp" autocomplete="off" value={values.otp ?? ''} on:input={(e) => (values.otp = e.currentTarget.value)} />
+          </label>
+          {#each errors.filter((e) => e.param === 'otp') as error (error.code)}
+            <span class={cls('formFieldError', 'atlas-error')}>{errorText(error)}</span>
+          {/each}
+        {:else if enrollmentState.method === 'duo' || enrollmentState.method === 'passkey'}
+          {#if !enrollmentState.enrollment}
+            <p class="atlas-text" aria-live="polite">{enrollmentState.busy ? t('mfa.enrollPreparing') : ''}</p>
+          {:else if enrollmentState.method === 'passkey'}
+            <p class="atlas-text">{t('mfa.enrollPasskeyHelp')}</p>
+          {:else}
+            <p class="atlas-text">{t('mfa.enrollDuoHelp')}</p>
+            {#if enrollmentState.enrollment.authorizationUrl}
+              <a class="atlas-link" data-atlas="mfa-duo-open" href={enrollmentState.enrollment.authorizationUrl} target="_blank" rel="noopener noreferrer">{t('mfa.enrollDuoOpen')}</a>
+            {/if}
+          {/if}
+        {:else if enrollmentState.method === 'totp' || enrollmentState.method === 'hotp'}
           {#if !enrollmentState.enrollment}
             <p class="atlas-text" aria-live="polite">{enrollmentState.busy ? t('mfa.enrollPreparing') : ''}</p>
           {:else}
@@ -245,13 +269,13 @@ function handleSubmit(event) {
               <span>{t('mfa.enrollFirstCodeLabel')}</span>
               <input class={cls('formFieldInput', 'atlas-input')} type="text" name="code" autocomplete="one-time-code" inputmode="numeric" value={values.code ?? ''} on:input={(e) => (values.code = e.currentTarget.value)} />
             </label>
-            {#if enrollmentState.totpCodes >= 2}
+            {#if enrollmentState.method === 'totp' && enrollmentState.totpCodes >= 2}
               <label class="atlas-field">
                 <span>{t('mfa.enrollSecondCodeLabel')}</span>
                 <input class={cls('formFieldInput', 'atlas-input')} type="text" name="secondCode" autocomplete="one-time-code" inputmode="numeric" value={values.secondCode ?? ''} on:input={(e) => (values.secondCode = e.currentTarget.value)} />
               </label>
             {/if}
-            {#each errors.filter((e) => e.param === 'codes') as error (error.code)}
+            {#each errors.filter((e) => e.param === 'codes' || e.param === 'code') as error (error.code)}
               <span class={cls('formFieldError', 'atlas-error')}>{errorText(error)}</span>
             {/each}
           {/if}
@@ -291,7 +315,7 @@ function handleSubmit(event) {
               disabled={busy || enrollmentState.busy}
               on:click={() => chooseMethod(other)}
             >
-              {t(other === 'totp' ? 'mfa.enrollTotpOption' : 'mfa.enrollSmsOption')}
+              {t(enrollmentOptionKey(other))}
             </button>
           {/each}
         {/if}

package/dist/components/AttemptFlow.svelte.d.ts

@@ -48,6 +48,7 @@ declare const __propDef: {
            * asks for two authenticator codes only.
            */ enrollment?: MfaEnrollmentController | null;
         enrollmentState?: MfaEnrollmentState | null;
+        /** `FlowState.matchCode`: shown while a mailed link waits, to type if it's opened on another device. */ matchCode?: string | null;
         /**
            * The instance's `account.emailVerification`. On `link` a sign-up's
            * verification step has nothing to type: it says to open the emailed link

package/dist/components/EmailLinkPage.svelte

@@ -0,0 +1,47 @@
+<script>import { onMount } from "svelte";
+import { FapiClient, createEmailLinkConfirmation, localizedErrorMessage } from "@atlasauth/js";
+import { useAtlas } from "../context";
+import { classFor } from "../appearance";
+import { translate } from "../i18n";
+import { ATLAS_SVELTE_SDK } from "../version";
+export let link;
+const atlas = useAtlas();
+const cls = (key, base) => classFor(key, atlas.appearance, base);
+const t = (key) => translate(atlas.catalog, key);
+const errorText = (error) => localizedErrorMessage(error, atlas.errorCatalog ?? atlas.catalog, atlas.catalog);
+const controller = createEmailLinkConfirmation(
+  new FapiClient({ publishableKey: atlas.publishableKey, baseUrl: atlas.frontendApi, locale: atlas.locale, sdk: ATLAS_SVELTE_SDK }),
+  link
+);
+let state = controller.state;
+let code = "";
+onMount(() => {
+  const stop = controller.subscribe((next) => state = next);
+  void controller.start();
+  return stop;
+});
+</script>
+
+<div class={cls('card', 'atlas-card')} data-atlas="email-link" data-atlas-status={state.status}>
+  <h1 class={cls('headerTitle', 'atlas-title')}>{t('link.title')}</h1>
+  {#if state.status === 'needs_code'}
+    <form on:submit|preventDefault={() => void controller.submitCode(code)}>
+      <p class="atlas-text">{t('link.enterCodeHelp')}</p>
+      <label class="atlas-field">
+        <span>{t('link.codeLabel')}</span>
+        <input class={cls('formFieldInput', 'atlas-input')} type="text" name="match_code" autocomplete="off" inputmode="numeric" required bind:value={code} />
+      </label>
+      {#each state.errors as error (error.code)}
+        <p class={cls('formFieldError', 'atlas-error')} role="alert">{errorText(error)}</p>
+      {/each}
+      <button class={cls('formButtonPrimary', 'atlas-button')} type="submit" disabled={state.busy}>{t('link.confirm')}</button>
+    </form>
+  {:else}
+    <p class="atlas-text" role="status" aria-live="polite">
+      {t(state.status === 'confirmed' ? 'link.confirmed' : state.status === 'invalid' ? 'link.invalid' : 'link.checking')}
+    </p>
+  {/if}
+  {#if state.resetUrl}
+    <p class="atlas-text"><a class="atlas-link" data-atlas-reset-link="" href={state.resetUrl}>{t('signIn.forgotPassword')}</a></p>
+  {/if}
+</div>

package/dist/components/EmailLinkPage.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { type EmailLink } from '@atlasauth/js';
+declare const __propDef: {
+    props: {
+        /**
+           * What `<SignIn>` / `<SignUp>` draw when opened from a mailed link: tries this
+           * browser's stored secret, then asks for the code the starting tab shows. A
+           * success signs nobody in here: the starting tab continues on its own.
+           */ link: EmailLink;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type EmailLinkPageProps = typeof __propDef.props;
+export type EmailLinkPageEvents = typeof __propDef.events;
+export type EmailLinkPageSlots = typeof __propDef.slots;
+export default class EmailLinkPage extends SvelteComponent<EmailLinkPageProps, EmailLinkPageEvents, EmailLinkPageSlots> {
+}
+export {};

package/dist/components/SignIn.svelte

@@ -1,10 +1,12 @@
 <script>import { onDestroy, onMount } from "svelte";
 import { lastUsedMethodLabel, passkeysSupported, pendingRecoveryCodes, signUp as hostedSignUp } from "@atlasauth/js";
+import { emailLinkFromUrl } from "@atlasauth/js";
 import { signIn } from "../accessors";
 import { useAtlas } from "../context";
 import { classFor } from "../appearance";
 import { translate } from "../i18n";
 import AttemptFlow from "./AttemptFlow.svelte";
+import EmailLinkPage from "./EmailLinkPage.svelte";
 import RecoveryCodes from "./RecoveryCodes.svelte";
 export let afterUrl = void 0;
 export let signUpUrl = void 0;
@@ -52,8 +54,15 @@ function submitIdentifier(values) {
   flow.passkey.stopAutofill();
   flow.submit(values);
 }
+let emailLink = null;
+onMount(() => {
+  emailLink = emailLinkFromUrl(void 0, "sign_in");
+});
 </script>
 
+{#if emailLink}
+  <EmailLinkPage link={emailLink} />
+{:else}
 {#if lastLabel}
   <p class={classFor('badge', atlas.appearance, 'atlas-text atlas-last-used-hint')} data-atlas="last-used" data-atlas-method={$lastMethod}>
     {t('signIn.lastUsed')}: {lastLabel}
@@ -85,6 +94,7 @@ function submitIdentifier(values) {
   titleKey="signIn.title"
   onSubmit={submitIdentifier}
   onPrepare={flow.prepare}
+  matchCode={$flowState.matchCode ?? null}
   passwordHold={$flowState.passwordHold ?? null}
   emailVerification={$settings?.account.emailVerification ?? 'code'}
   onEmailSecondFactor={$settings?.account.emailSecondFactor ? flow.sendEmailSecondFactor : null}
@@ -114,3 +124,4 @@ function submitIdentifier(values) {
     {t('signIn.noAccount')} <a class="atlas-link" href={promptHref}>{t('signIn.signUpLink')}</a>
   </p>
 {/if}
+{/if}

package/dist/components/SignUp.svelte

@@ -1,10 +1,12 @@
 <script>import { onDestroy, onMount } from "svelte";
 import { awaitingPasskey, existingAccountResetUrl, passkeysSupported, pendingExistingAccountNotice, pendingRecoveryCodes, signInAfterProofUrl, signUpProvedByLink } from "@atlasauth/js";
+import { emailLinkFromUrl } from "@atlasauth/js";
 import { signUp } from "../accessors";
 import { classFor } from "../appearance";
 import { useAtlas } from "../context";
 import { translate } from "../i18n";
 import AttemptFlow from "./AttemptFlow.svelte";
+import EmailLinkPage from "./EmailLinkPage.svelte";
 import PasskeySignUpStep from "./PasskeySignUpStep.svelte";
 import RecoveryCodes from "./RecoveryCodes.svelte";
 import SignUpForm from "./SignUpForm.svelte";
@@ -32,8 +34,15 @@ $: recoveryCodes = pendingRecoveryCodes($flowState);
 function switchMode() {
   mode = usingPasskey ? "password" : "passkey";
 }
+let emailLink = null;
+onMount(() => {
+  emailLink = emailLinkFromUrl(void 0, "sign_up");
+});
 </script>
 
+{#if emailLink}
+  <EmailLinkPage link={emailLink} />
+{:else}
 {#if recoveryCodes}
   <RecoveryCodes codes={recoveryCodes} busy={$flowState.busy} onSaved={flow.saveRecoveryCodes} />
 {:else if pendingExistingAccountNotice($flowState)}
@@ -70,6 +79,7 @@ function switchMode() {
     onSubmit={flow.submit}
     emailVerification={$settings?.account.emailVerification ?? 'code'}
     onResend={flow.resendSignUp}
+    matchCode={$flowState.matchCode ?? null}
     onEmailSecondFactor={$settings?.account.emailSecondFactor ? flow.sendEmailSecondFactor : null}
     onSmsSecondFactor={$settings && flow.mfaChoices().sms ? flow.sendSmsSecondFactor : null}
     enrollment={flow.enrollment}
@@ -88,3 +98,4 @@ function switchMode() {
     onSwitchMode={canPasskey ? switchMode : undefined}
   />
 {/if}
+{/if}

package/dist/i18n.js

@@ -83,6 +83,23 @@ export const EN_US = {
     'mfa.enrollChoose': 'Set up a second step for signing in.',
     'mfa.enrollTotpOption': 'Use an authenticator app',
     'mfa.enrollSmsOption': 'Use text messages',
+    'link.title': "Confirm it's you",
+    'link.matchCodeHint': 'Opening the link on another device? Enter this code there.',
+    'link.checking': 'Checking your link…',
+    'link.enterCodeHelp': 'Enter the code shown on the device where you started.',
+    'link.codeLabel': 'Code',
+    'link.confirm': 'Confirm',
+    'link.confirmed': 'Confirmed. You can close this tab and go back to where you started.',
+    'link.invalid': 'This link is no longer valid. Go back to where you started and ask for a new one.',
+    'mfa.enrollHotpOption': 'Use a counter-based code generator',
+    'mfa.enrollYubikeyOption': 'Use a YubiKey',
+    'mfa.enrollDuoOption': 'Use Duo',
+    'mfa.enrollPasskeyOption': 'Use a passkey',
+    'mfa.yubikeyLabel': 'Touch your YubiKey',
+    'mfa.enrollDuoHelp': 'Open Duo and approve the request, then come back and continue.',
+    'mfa.enrollDuoOpen': 'Open Duo',
+    'mfa.enrollPasskeyHelp': 'Create a passkey on this device to use as your second step. It must ask for your PIN or biometrics.',
+    'mfa.enrollPasskeyCreate': 'Create passkey',
     'mfa.enrollScan': 'Scan this QR code with your authenticator app, or enter the setup key.',
     'mfa.enrollQrAlt': 'QR code for your authenticator app',
     'mfa.enrollSetupKey': 'Setup key',
@@ -181,6 +198,7 @@ export const EN_US = {
     'error.form_password_reused': 'Your new password must not match any of your last {history_count} passwords.',
     'error.password_expired': 'Your password has expired. Reset it to continue.',
     'error.email_not_verified': 'Your email address is not verified yet. Verify it before signing in with your password.',
+    'error.mfa_setup_unavailable': "This account needs 2-Step Verification, but it can't be set up here. Contact the app's support to continue.",
     'error.sign_in_token_invalid': 'That sign-in token is invalid or has expired.',
     'error.too_many_attempts': 'Too many failed attempts. Try again later.',
     'error.too_many_requests': 'Too many requests. Please try again later.',

package/dist/version.d.ts

@@ -1,4 +1,4 @@
 import type { AtlasSdkInfo } from '@atlasauth/js';
 /** This package's version, sent as `X-Atlas-SDK` (kept in step with package.json by a test). */
-export declare const ATLAS_SVELTE_VERSION = "0.15.1";
+export declare const ATLAS_SVELTE_VERSION = "0.16.0";
 export declare const ATLAS_SVELTE_SDK: AtlasSdkInfo;

package/dist/version.js

@@ -1,3 +1,3 @@
 /** This package's version, sent as `X-Atlas-SDK` (kept in step with package.json by a test). */
-export const ATLAS_SVELTE_VERSION = '0.15.1';
+export const ATLAS_SVELTE_VERSION = '0.16.0';
 export const ATLAS_SVELTE_SDK = { name: '@atlasauth/svelte', version: ATLAS_SVELTE_VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlasauth/svelte",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "@atlasauth/design": "0.3.0",
-    "@atlasauth/js": "0.33.1",
     "@atlasauth/authz": "0.3.0",
+    "@atlasauth/js": "0.34.0",
     "@atlasauth/backend": "0.39.0"
   },
   "peerDependencies": {