@atlasauth/svelte 0.11.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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.
+
 ## 0.11.0 — 2026-10-24
 
 - Integrator platform release: see the Atlas changelog for 2026-10-24.

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/ManageCiba.svelte

@@ -0,0 +1,78 @@
+<script>import { onMount } from "svelte";
+import {
+  clearCibaPin,
+  decideCibaRequest,
+  getCibaPin,
+  listCibaRequests,
+  setCibaPin
+} from "@atlasauth/js";
+import { useAtlas } from "../context";
+import { classFor } from "../appearance";
+import { FapiClient } from "../fapi";
+import { ATLAS_SVELTE_SDK } from "../version";
+const atlas = useAtlas();
+const client = new FapiClient({
+  publishableKey: atlas.publishableKey,
+  baseUrl: atlas.frontendApi,
+  locale: atlas.locale,
+  sdk: ATLAS_SVELTE_SDK
+});
+let requests = [];
+let pin = null;
+let newPin = "";
+let password = "";
+let message = null;
+async function load() {
+  const [r, p] = await Promise.all([listCibaRequests(client).catch(() => []), getCibaPin(client).catch(() => null)]);
+  requests = r;
+  pin = p;
+}
+onMount(load);
+async function run(fn, fallback) {
+  message = null;
+  try {
+    await fn();
+    newPin = "";
+    password = "";
+    await load();
+  } catch (e) {
+    message = e instanceof Error && e.message ? e.message : fallback;
+  }
+}
+$: cardClass = classFor("card", atlas.appearance, "atlas-card");
+$: buttonClass = classFor("formButtonSecondary", atlas.appearance, "atlas-button-secondary");
+</script>
+
+{#if requests.length || (pin && (pin.set || pin.available))}
+  <section class={cardClass} data-atlas="manage-ciba">
+    {#if requests.length}
+      <h2>Sign-in requests from apps</h2>
+      <ul>
+        {#each requests as r (r.id)}
+          <li>
+            <strong>{r.client_name}</strong>
+            {#if r.binding_message}<div>{r.binding_message}</div>{/if}
+            <small>{r.scope.join(', ')}</small>
+            <button class={buttonClass} type="button" on:click={() => void run(() => decideCibaRequest(client, r.id, 'approve'), 'Could not approve.')}>Approve</button>
+            <button class={buttonClass} type="button" on:click={() => void run(() => decideCibaRequest(client, r.id, 'deny'), 'Could not deny.')}>Deny</button>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    {#if pin && (pin.set || pin.available)}
+      <form on:submit|preventDefault={() => void run(() => setCibaPin(client, { pin: newPin, currentPassword: password }), 'Could not save the PIN.')}>
+        <h2>CIBA PIN</h2>
+        <p>{pin.set ? 'You have a CIBA PIN.' : 'You have not set a CIBA PIN.'} Apps that start a sign-in request for you must send it.</p>
+        <input type="password" autocomplete="current-password" placeholder="Current password" aria-label="Current password" bind:value={password} />
+        <input type="password" inputmode="numeric" autocomplete="off" placeholder="6 to 12 digits" aria-label="New CIBA PIN" bind:value={newPin} />
+        <button class={buttonClass} type="submit">{pin.set ? 'Change PIN' : 'Set PIN'}</button>
+        {#if pin.set}
+          <button class={buttonClass} type="button" on:click={() => void run(() => clearCibaPin(client, { currentPassword: password }), 'Could not remove the PIN.')}>Remove PIN</button>
+        {/if}
+        {#if message}<small role="status">{message}</small>{/if}
+      </form>
+    {:else if message}
+      <small role="status">{message}</small>
+    {/if}
+  </section>
+{/if}

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ManageCibaProps = typeof __propDef.props;
+export type ManageCibaEvents = typeof __propDef.events;
+export type ManageCibaSlots = typeof __propDef.slots;
+export default class ManageCiba extends SvelteComponent<ManageCibaProps, ManageCibaEvents, ManageCibaSlots> {
+}
+export {};

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/components/UserProfile.svelte

@@ -4,6 +4,7 @@ import { classFor } from "../appearance";
 import { translate } from "../i18n";
 import { FapiClient } from "../fapi";
 import { ATLAS_SVELTE_SDK } from "../version";
+import ManageCiba from "./ManageCiba.svelte";
 const atlas = useAtlas();
 const user = getUser();
 const t = (key) => translate(atlas.catalog, key);
@@ -91,5 +92,7 @@ $: buttonClass = classFor("formButtonSecondary", atlas.appearance, "atlas-button
       <h2>{t('userProfile.securitySection')}</h2>
       <p>{current.mfa_enabled ? '2FA on' : '2FA off'}</p>
     </section>
+
+    <ManageCiba />
   </div>
 {/if}

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/index.d.ts

@@ -27,6 +27,7 @@ export { default as SignIn } from './components/SignIn.svelte';
 export { default as SignUp } from './components/SignUp.svelte';
 export { default as UserButton } from './components/UserButton.svelte';
 export { default as UserProfile } from './components/UserProfile.svelte';
+export { default as ManageCiba } from './components/ManageCiba.svelte';
 export { default as OrganizationSwitcher } from './components/OrganizationSwitcher.svelte';
 export { default as OrganizationProfile } from './components/OrganizationProfile.svelte';
 export { default as OrganizationAuditLog } from './components/OrganizationAuditLog.svelte';

package/dist/index.js

@@ -31,6 +31,7 @@ export { default as SignIn } from './components/SignIn.svelte';
 export { default as SignUp } from './components/SignUp.svelte';
 export { default as UserButton } from './components/UserButton.svelte';
 export { default as UserProfile } from './components/UserProfile.svelte';
+export { default as ManageCiba } from './components/ManageCiba.svelte';
 export { default as OrganizationSwitcher } from './components/OrganizationSwitcher.svelte';
 export { default as OrganizationProfile } from './components/OrganizationProfile.svelte';
 export { default as OrganizationAuditLog } from './components/OrganizationAuditLog.svelte';

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.10.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.10.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.11.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/backend": "0.19.0",
-    "@atlasauth/js": "0.20.0",
-    "@atlasauth/authz": "0.2.0"
+    "@atlasauth/js": "0.27.0",
+    "@atlasauth/authz": "0.3.0",
+    "@atlasauth/backend": "0.28.0"
   },
   "peerDependencies": {
     "svelte": ">=4",