@atlasauth/svelte 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @atlasauth/svelte changelog
 
+## 0.13.0 — 2026-10-30
+
+- `<SignIn>` offers "Sign in with a passkey" and passkey autofill on the identifier field when the instance enables passkeys.
+
 ## 0.12.0 — 2026-10-28
 
 - `ManageCiba` component lists sign-in approvals (approve or deny) and manages the CIBA PIN; mounted in the user profile.

package/dist/accessors.d.ts

@@ -1,5 +1,5 @@
 import { type Readable } from 'svelte/store';
-import { type OrganizationAuditLogOptions, type OrganizationAuditLogState, type CaptchaController, type FlowState, type InstanceSettings, type ProviderToken, type SignOutOptions, type SignOutResult, PolicyAcceptanceController, type MfaChoices, type MfaEnrollmentController, type MfaEnrollmentState } from '@atlasauth/js';
+import { type OrganizationAuditLogOptions, type OrganizationAuditLogState, type CaptchaController, type FlowState, type InstanceSettings, type ProviderToken, type SignOutOptions, type SignOutResult, PolicyAcceptanceController, type MfaChoices, type MfaEnrollmentController, type MfaEnrollmentState, type PasskeySignInController } from '@atlasauth/js';
 import { type AuthStatus } from './context';
 import { type ProtectCondition } from './protect';
 import type { AtlasOrganizationMembership, AtlasSession, AtlasUser } from './types';
@@ -174,6 +174,20 @@ export interface FlowController {
     loadPolicies(): Promise<void>;
     /** The user declined a policy a sign-in was waiting on: cancels the attempt and says why. */
     declinePolicy(title: string): void;
+    /**
+     * "Continue with Atlas" (when `settings.signInWithAtlas` is set): starts the
+     * SSO sign-in and sends the browser to Atlas. Resolves the server's message
+     * when it could not start.
+     */
+    signInWithAtlas(connectionId: string): Promise<{
+        error?: string;
+    }>;
+    /**
+     * Passkey sign-in (the "Sign in with a passkey" button and passkey autofill on
+     * the identifier field), offered when `settings.passkeySignIn` is on. The
+     * outcome goes through the same completion as every sign-in.
+     */
+    passkey: PasskeySignInController;
     /** Stop the magic-link poll loop and remove the captcha widgets — call from `onDestroy`. */
     destroy(): void;
 }

package/dist/accessors.js

@@ -1,5 +1,5 @@
 import { derived, get, readable, writable } from 'svelte/store';
-import { FapiClient, advanceWithCaptcha, atlasCaptchaLabels, createCaptchaController, createPasskeySignUp, createSignUp, finishPasskeySignUp, fetchInstanceSettings, fetchLastSignInMethod, flowNeedsCaptcha, signInCaptchaOptions, flowFromPending, pollAttempt, prepareFactor, shouldKeepPolling, createOrganizationAuditLog, createMfaEnrollment, acknowledgeRecoveryCodes, pendingRecoveryCodes, mfaChoicesFrom, prepareSecondFactorCode, resendSignUpVerification, PolicyAcceptanceController, loadPolicies as loadPolicyList, initialFlow as emptyFlow, } from '@atlasauth/js';
+import { FapiClient, advanceWithCaptcha, atlasCaptchaLabels, createCaptchaController, createPasskeySignInController, createPasskeySignUp, createSignUp, finishPasskeySignUp, fetchInstanceSettings, fetchLastSignInMethod, startSignInWithAtlas, flowNeedsCaptcha, signInCaptchaOptions, flowFromPending, pollAttempt, prepareFactor, shouldKeepPolling, createOrganizationAuditLog, createMfaEnrollment, acknowledgeRecoveryCodes, pendingRecoveryCodes, mfaChoicesFrom, prepareSecondFactorCode, resendSignUpVerification, PolicyAcceptanceController, loadPolicies as loadPolicyList, initialFlow as emptyFlow, } from '@atlasauth/js';
 import { useAtlas } from './context';
 import { translate } from './i18n';
 import { evaluate } from './protect';
@@ -261,7 +261,15 @@ function createFlow() {
         maybeStartPolling();
         return next.errors.length === 0;
     }
+    const passkey = createPasskeySignInController({
+        client,
+        onStart: () => state.set({ ...get(state), busy: true, errors: [] }),
+        onResult: finish,
+        captcha: () => captcha,
+        cancelledMessage: () => t('signIn.passkeyCancelled'),
+    });
     function destroy() {
+        passkey.stopAutofill();
         stopPolling();
         unsubscribeCaptcha();
         unsubscribeEnrollment();
@@ -269,6 +277,16 @@ function createFlow() {
         captcha.destroy();
         signUpCaptcha.destroy();
     }
+    async function signInWithAtlas(connectionId) {
+        if (typeof window === 'undefined')
+            return {};
+        const started = await startSignInWithAtlas(client, connectionId, window.location.href);
+        if ('url' in started) {
+            window.location.assign(started.url);
+            return {};
+        }
+        return { error: started.error };
+    }
     return {
         state: { subscribe: state.subscribe },
         submit,
@@ -290,6 +308,8 @@ function createFlow() {
         policies,
         loadPolicies,
         declinePolicy,
+        signInWithAtlas,
+        passkey,
         destroy,
     };
 }

package/dist/components/AttemptFlow.svelte

@@ -85,7 +85,7 @@ function usePassword() {
 $: fields = (() => {
   switch (step.kind) {
     case "collect_identifier":
-      return [{ name: "identifier", labelKey: "signIn.identifierLabel", type: "email" }];
+      return [{ name: "identifier", labelKey: "signIn.identifierLabel", type: "email", autocomplete: "username webauthn" }];
     case "collect_first_factor":
       if (sent === "email_code") {
         return [{ name: "code", labelKey: "signIn.emailCodeLabel", type: "text" }];
@@ -288,6 +288,7 @@ function handleSubmit(event) {
             class={cls('formFieldInput', 'atlas-input')}
             type={f.type}
             name={f.name}
+            autocomplete={f.autocomplete}
             value={values[f.name] ?? ''}
             on:input={(e) => (values[f.name] = e.currentTarget.value)}
           />

package/dist/components/SignIn.svelte

@@ -1,5 +1,5 @@
-<script>import { onDestroy } from "svelte";
-import { lastUsedMethodLabel, pendingRecoveryCodes, signUp as hostedSignUp } from "@atlasauth/js";
+<script>import { onDestroy, onMount } from "svelte";
+import { lastUsedMethodLabel, passkeysSupported, pendingRecoveryCodes, signUp as hostedSignUp } from "@atlasauth/js";
 import { signIn } from "../accessors";
 import { useAtlas } from "../context";
 import { classFor } from "../appearance";
@@ -34,6 +34,24 @@ $: recoveryCodes = pendingRecoveryCodes($flowState);
 $: lastLabel = !$flowState.attempt ? lastUsedMethodLabel($lastMethod, t) : null;
 const drawn = (..._deps) => flow.captcha.needed ? flow.captcha : null;
 $: captcha = drawn($settings, $flowState);
+$: atlasConnection = !$flowState.attempt ? $settings?.signInWithAtlas?.connectionId ?? null : null;
+let atlasError = null;
+async function continueWithAtlas() {
+  if (!atlasConnection) return;
+  atlasError = null;
+  atlasError = (await flow.signInWithAtlas(atlasConnection)).error ?? null;
+}
+let supported = false;
+onMount(() => {
+  supported = passkeysSupported();
+});
+$: passkeyOffered = supported && !$flowState.attempt && $settings?.passkeySignIn === true;
+$: if (passkeyOffered) flow.passkey.armAutofill();
+else flow.passkey.stopAutofill();
+function submitIdentifier(values) {
+  flow.passkey.stopAutofill();
+  flow.submit(values);
+}
 </script>
 
 {#if lastLabel}
@@ -42,6 +60,20 @@ $: captcha = drawn($settings, $flowState);
   </p>
 {/if}
 
+{#if atlasConnection && !recoveryCodes}
+  <button
+    type="button"
+    class={classFor('socialButton', atlas.appearance, 'atlas-social-button')}
+    data-atlas-provider="atlas"
+    on:click={continueWithAtlas}
+  >
+    {t('signIn.continueWithAtlas')}
+  </button>
+  {#if atlasError}
+    <p class={classFor('formFieldError', atlas.appearance, 'atlas-error')} role="alert">{atlasError}</p>
+  {/if}
+{/if}
+
 {#if recoveryCodes}
   <RecoveryCodes codes={recoveryCodes} busy={$flowState.busy} onSaved={flow.saveRecoveryCodes} />
 {:else}
@@ -51,7 +83,7 @@ $: captcha = drawn($settings, $flowState);
   errors={$flowState.errors}
   sessionKept={$flowState.sessionKept}
   titleKey="signIn.title"
-  onSubmit={flow.submit}
+  onSubmit={submitIdentifier}
   onPrepare={flow.prepare}
   onEmailSecondFactor={$settings?.account.emailSecondFactor ? flow.sendEmailSecondFactor : null}
   onSmsSecondFactor={$settings && flow.mfaChoices().sms ? flow.sendSmsSecondFactor : null}
@@ -63,6 +95,18 @@ $: captcha = drawn($settings, $flowState);
 />
 {/if}
 
+{#if passkeyOffered && !recoveryCodes}
+  <button
+    type="button"
+    class={classFor('socialButton', atlas.appearance, 'atlas-social-button atlas-passkey-button')}
+    data-atlas-passkey-sign-in=""
+    disabled={$flowState.busy}
+    on:click={() => flow.passkey.signIn()}
+  >
+    {t('signIn.passkeyButton')}
+  </button>
+{/if}
+
 {#if promptHref}
   <p class={classFor('footerAction', atlas.appearance, 'atlas-footer')} data-atlas-sign-up-prompt="">
     {t('signIn.noAccount')} <a class="atlas-link" href={promptHref}>{t('signIn.signUpLink')}</a>

package/dist/i18n.js

@@ -22,6 +22,7 @@ export const EN_US = {
     'signIn.signUpLink': 'Sign up',
     'signIn.orDivider': 'or',
     'signIn.socialButton': 'Continue with {provider}',
+    'signIn.continueWithAtlas': 'Continue with Atlas',
     'signIn.emailCodeLabel': 'Verification code',
     'signIn.emailCodeOption': 'Email me a code',
     'signIn.emailLinkOption': 'Email me a sign-in link',
@@ -32,6 +33,8 @@ export const EN_US = {
     'signIn.resendCode': 'Resend code',
     'signIn.resendLink': 'Resend link',
     'signIn.passwordOption': 'Use your password instead',
+    'signIn.passkeyButton': 'Sign in with a passkey',
+    'signIn.passkeyCancelled': "Passkey sign-in didn't finish. Try again, or use another way to sign in.",
     'signIn.signedIn': 'You\'re signed in.',
     'signIn.sessionNotKept': 'You signed in, but this browser didn\'t keep the session. If it blocks third-party cookies, allow cookies for this site and try again.',
     'signIn.checkOtherTab': 'You can close this tab — you are signed in where you started.',

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.11.0";
+export declare const ATLAS_SVELTE_VERSION = "0.13.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.11.0';
+export const ATLAS_SVELTE_VERSION = '0.13.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.12.0",
+  "version": "0.13.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -23,9 +23,9 @@
   },
   "dependencies": {
     "@atlasauth/design": "0.3.0",
-    "@atlasauth/js": "0.26.1",
+    "@atlasauth/js": "0.27.0",
     "@atlasauth/authz": "0.3.0",
-    "@atlasauth/backend": "0.27.0"
+    "@atlasauth/backend": "0.28.0"
   },
   "peerDependencies": {
     "svelte": ">=4",