@atlasauth/svelte 0.5.1 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlasauth/svelte changelog
 
+## 0.6.1
+- **`<UserProfile>` can verify an address.** Each unverified email address now has a **Verify** button: it emails a code (`POST /v1/client/me/email_addresses/{id}/prepare_verification`) and shows a field to enter it (`attempt_verification`), then reloads the user. This includes the sign-up address on an app that does not require email verification, which now reads unverified until it is proven. New catalog keys: `userProfile.verify`, `userProfile.verifyConfirm`, `userProfile.verifyCodePlaceholder`, `userProfile.verifySendFailed`, `userProfile.verifyCodeRejected`.
+
+## 0.6.0
+- **New `initAtlas({ onSignOut })` and `client.onSignOut(listener)`**: `onSignOut({ reason, sessionId })` fired once each time a signed-in user becomes signed out, on every
+  path: `reason` is `user` (this tab), `other_tab`, `session_expired`, `revoked` (the session was ended elsewhere,
+  detected on the next token refresh or re-check) or `unknown`. The same event is dispatched on `window` as
+  `atlas:signout`. Use it to reset an embedded widget (a support chat, a docs reader session).
+- **`getToken({ template })`**: a short-lived token from a named JWT template for the current session (for
+  example `'chatly'`, a support-chat identity token, when the instance has a Chatly connection).
+- **SDK version advisories.** Every Frontend API request carries `X-Atlas-SDK: @atlasauth/svelte/<version>`. When the
+  response carries `Atlas-SDK-Advisory: upgrade; min=<version>; reason=<code>` (a version with a known bug), the SDK
+  logs one console warning per advisory per page load. The Frontend API must allow the header in CORS, which Atlas
+  does; a reverse proxy that forwards a fixed `Access-Control-Allow-Headers` list must add `x-atlas-sdk`.
+- Requires `@atlasauth/js` 0.12.0.
+- The prebuilt forms draw the **Atlas captcha** (provider `atlas`, no keys needed) through `@atlasauth/js` 0.12.0,
+  with its words from the form's catalog. New catalog keys: `captcha.checking`, `captcha.verified`,
+  `captcha.puzzlePrompt`, `captcha.puzzleConfirm`, `captcha.puzzleTile`, `captcha.puzzleAlternative`.
+
 ## 0.5.1
 - **Fixed: email-code sign-in on instances without password sign-in.** After the email step the sign-in form now
   sends the code itself (`prepare_first_factor`), shows "We sent a code to …" with the code field and a

package/dist/accessors.js

@@ -1,8 +1,9 @@
 import { derived, get, writable } from 'svelte/store';
-import { FapiClient, advanceWithCaptcha, createCaptchaController, createSignUp, fetchInstanceSettings, flowNeedsCaptcha, signInCaptchaOptions, flowFromPending, pollAttempt, prepareFactor, shouldKeepPolling, } from '@atlasauth/js';
+import { FapiClient, advanceWithCaptcha, atlasCaptchaLabels, createCaptchaController, createSignUp, fetchInstanceSettings, flowNeedsCaptcha, signInCaptchaOptions, flowFromPending, pollAttempt, prepareFactor, shouldKeepPolling, } from '@atlasauth/js';
 import { useAtlas } from './context';
 import { translate } from './i18n';
 import { evaluate } from './protect';
+import { ATLAS_SVELTE_SDK } from './version';
 export function getUser() {
     const atlas = useAtlas();
     return derived([atlas.status, atlas.user], ([$status, $user]) => ({
@@ -68,6 +69,7 @@ function createFlow() {
         publishableKey: atlas.publishableKey,
         baseUrl: atlas.frontendApi,
         locale: atlas.locale,
+        sdk: ATLAS_SVELTE_SDK,
     });
     // Seeded from a redirect that came back mid-flow (e.g. OAuth needing a second
     // factor), so the user resumes at the demanded step instead of starting over.
@@ -77,8 +79,10 @@ function createFlow() {
     // §5 the per-flow captcha, driven by the instance's settings so turning it on
     // in the dashboard needs no code change. Kept in step with the settings and
     // the flow's step synchronously, before the components re-render.
-    const captcha = createCaptchaController();
-    const signUpCaptcha = createCaptchaController();
+    // The Atlas captcha's words follow the form's catalog.
+    const captchaSettings = { atlasLabels: () => atlasCaptchaLabels(t) };
+    const captcha = createCaptchaController(undefined, captchaSettings);
+    const signUpCaptcha = createCaptchaController(undefined, captchaSettings);
     let identifier = '';
     const unsubscribeCaptcha = derived([settings, state], (pair) => pair).subscribe(([current, flow]) => {
         captcha.configure(signInCaptchaOptions(current?.captchaFlows.signIn, flow, () => submit({})));

package/dist/components/UserProfile.svelte

@@ -2,11 +2,50 @@
 import { getUser } from "../accessors";
 import { classFor } from "../appearance";
 import { translate } from "../i18n";
+import { FapiClient } from "../fapi";
+import { ATLAS_SVELTE_SDK } from "../version";
 const atlas = useAtlas();
 const user = getUser();
 const t = (key) => translate(atlas.catalog, key);
+const client = new FapiClient({
+  publishableKey: atlas.publishableKey,
+  baseUrl: atlas.frontendApi,
+  locale: atlas.locale,
+  sdk: ATLAS_SVELTE_SDK
+});
+let verifying = null;
+let code = "";
+let busy = false;
+let verifyError = null;
+async function sendCode(id) {
+  verifyError = null;
+  busy = true;
+  const res = await client.post(`/v1/client/me/email_addresses/${id}/prepare_verification`);
+  busy = false;
+  if (!res.ok) {
+    verifyError = t("userProfile.verifySendFailed");
+    return;
+  }
+  code = "";
+  verifying = id;
+}
+async function confirmCode() {
+  if (!verifying) return;
+  verifyError = null;
+  busy = true;
+  const res = await client.post(`/v1/client/me/email_addresses/${verifying}/attempt_verification`, { code });
+  busy = false;
+  if (!res.ok) {
+    verifyError = t("userProfile.verifyCodeRejected");
+    return;
+  }
+  verifying = null;
+  await atlas.reload();
+}
 $: current = $user.user;
 $: cardClass = classFor("card", atlas.appearance, "atlas-card");
+$: inputClass = classFor("formFieldInput", atlas.appearance, "atlas-account-input");
+$: buttonClass = classFor("formButtonSecondary", atlas.appearance, "atlas-button-secondary");
 </script>
 
 {#if current}
@@ -21,10 +60,31 @@ $: cardClass = classFor("card", atlas.appearance, "atlas-card");
             {email.email_address}
             {#if !email.verified}
               <em> — {t('userProfile.unverified')}</em>
+              {#if verifying === email.id}
+                <span data-atlas="email-verify">
+                  <input
+                    class={inputClass}
+                    inputmode="numeric"
+                    autocomplete="one-time-code"
+                    placeholder={t('userProfile.verifyCodePlaceholder')}
+                    bind:value={code}
+                  />
+                  <button class={buttonClass} type="button" disabled={busy} on:click={() => void confirmCode()}>
+                    {t('userProfile.verifyConfirm')}
+                  </button>
+                </span>
+              {:else}
+                <button class={buttonClass} type="button" disabled={busy} on:click={() => void sendCode(email.id)}>
+                  {t('userProfile.verify')}
+                </button>
+              {/if}
             {/if}
           </li>
         {/each}
       </ul>
+      {#if verifyError}
+        <p role="alert">{verifyError}</p>
+      {/if}
     </section>
 
     <section>

package/dist/context.d.ts

@@ -1,5 +1,5 @@
 import { type Readable } from 'svelte/store';
-import { type ProviderToken, type SignOutOptions, type SignOutResult } from '@atlasauth/js';
+import { type ProviderToken, type SignOutOptions, type SignOutResult, type SignOutEvent, type SignOutListener } from '@atlasauth/js';
 import { type Catalog } from './i18n';
 import { type Appearance, type InstanceDesign } from './appearance';
 import type { AtlasOrganizationMembership, AtlasSession, AtlasUser, SessionClaims } from './types';
@@ -35,6 +35,11 @@ export interface AtlasInitOptions {
     appearance?: Appearance;
     localization?: Catalog;
     fetchImpl?: typeof fetch;
+    /**
+     * Called once each time a signed-in user becomes signed out, on every path
+     * (see `AtlasClient.onSignOut`).
+     */
+    onSignOut?: (event: SignOutEvent) => void;
     /**
      * Skip the automatic browser boot (redirect handling + `/v1/client` load).
      * Useful in tests, or when the caller wants to drive `boot()` by hand.
@@ -79,7 +84,16 @@ export interface AtlasClient extends AtlasStores {
         id: string;
         status: string;
     } | null;
-    getToken(): Promise<string | null>;
+    /** The session JWT; with `{ template }` a short-lived named-template token (e.g. `'chatly'`). */
+    getToken(options?: {
+        template?: string;
+    }): Promise<string | null>;
+    /**
+     * Listen for sign-out on every path: `reason` is `user`, `other_tab`,
+     * `session_expired`, `revoked` (ended elsewhere, seen on the next refresh) or
+     * `unknown`. Returns the unsubscribe. Also dispatched as `atlas:signout` on `window`.
+     */
+    onSignOut(listener: SignOutListener): () => void;
     /**
      * §6.6 the signed-in user's OWN live token at a connected provider (Google,
      * GitHub, …). Null when there is no usable token. The refresh token is never

package/dist/context.js

@@ -1,6 +1,7 @@
 import { getContext, setContext } from 'svelte';
 import { derived, get, writable } from 'svelte/store';
-import { FapiClient, SignOutGuard, TokenCache, closeOAuthPopupAfterSignIn, completeOAuthPopupLanding, getProviderToken as fetchProviderToken, mapOAuthPopupPayload, msUntilRefresh, readExpiry, readRedirectResult, resolveFrontendApi, stripRedirectParams, catalogLocale, } from '@atlasauth/js';
+import { FapiClient, SignOutGuard, TokenCache, closeOAuthPopupAfterSignIn, completeOAuthPopupLanding, getProviderToken as fetchProviderToken, mapOAuthPopupPayload, msUntilRefresh, readExpiry, readRedirectResult, resolveFrontendApi, stripRedirectParams, catalogLocale, SDK_HEADER, SignOutNotifier, getTemplateToken, reportSdkAdvisory, sdkHeaderValue, signOutReasonFromClient, } from '@atlasauth/js';
+import { ATLAS_SVELTE_SDK } from './version';
 import { EN_US, withFallback } from './i18n';
 import { instanceDesignFrom } from './appearance';
 /** The context key. A `Symbol` so it cannot collide with an app's own context. */
@@ -55,18 +56,26 @@ export function createAtlasClient(options) {
     async function call(path, init) {
         if (!doFetch)
             throw new Error('No fetch implementation available.');
-        return doFetch(`${baseUrl}${path}`, {
+        const response = await doFetch(`${baseUrl}${path}`, {
             ...init,
             // Cookies carry the session; a fetch without this looks identical to being
             // signed out.
             credentials: 'include',
             headers: {
                 'x-publishable-key': publishableKey,
+                // Names this SDK so the Frontend API can flag a version with a known bug.
+                [SDK_HEADER]: sdkHeaderValue(ATLAS_SVELTE_SDK),
                 ...(init?.body ? { 'content-type': 'application/json' } : {}),
                 ...init?.headers,
             },
         });
+        reportSdkAdvisory(response, ATLAS_SVELTE_SDK);
+        return response;
     }
+    // ATL-S-30 one sign-out notifier for the client's lifetime.
+    const notifier = new SignOutNotifier();
+    if (options.onSignOut)
+        notifier.subscribe(options.onSignOut);
     /**
      * The sessions this browser signed out of (tombstones, shared by every tab via
      * localStorage per Frontend API). Nothing here re-adopts one — not a reload, a
@@ -78,6 +87,7 @@ export function createAtlasClient(options) {
     // store): drop the token and re-check, which refuses the session.
     const stopWatch = typeof window !== 'undefined'
         ? guard.watch(() => cache.peek()?.sessionId ?? get(session)?.id, () => {
+            notifier.expect('other_tab');
             cache.clear();
             void reload();
         })
@@ -92,13 +102,19 @@ export function createAtlasClient(options) {
         cache.set({ jwt, expiresAt, sessionId });
         claims.set(decodeClaims(jwt));
     }
-    function clearSession() {
+    function clearSession(reason) {
+        // A signed-in → signed-out transition tells the sign-out listeners why.
+        const ended = get(status) === 'signed_in' ? (get(session)?.id ?? cache.peek()?.sessionId ?? null) : undefined;
         cache.clear();
         status.set('signed_out');
         user.set(null);
         session.set(null);
         claims.set(null);
         memberships.set([]);
+        if (ended !== undefined)
+            notifier.signedOut(ended, reason);
+        else
+            notifier.clear();
     }
     function scheduleRefresh() {
         if (timer)
@@ -122,9 +138,10 @@ export function createAtlasClient(options) {
             // A session this browser signed out of (the revoke never landed) is
             // refused: stay signed out; the guard re-tries the revoke in the background.
             if (!body.session || !body.user || guard.refuse(body.session.id)) {
-                clearSession();
+                clearSession(body.session ? 'other_tab' : signOutReasonFromClient(body));
                 return;
             }
+            notifier.clear();
             user.set(body.user);
             session.set(body.session);
             memberships.set(body.organization_memberships ?? []);
@@ -161,7 +178,11 @@ export function createAtlasClient(options) {
             await reload();
         }
     }
-    async function getToken() {
+    async function getToken(opts) {
+        if (opts?.template) {
+            const sessionId = cache.peek()?.sessionId ?? get(session)?.id ?? null;
+            return sessionId ? ((await getTemplateToken(fapiClient, sessionId, opts.template))?.jwt ?? null) : null;
+        }
         // A 5s skew so a token that would die inside the caller's request is
         // refreshed first rather than handed over.
         const usable = cache.get(5_000);
@@ -170,7 +191,7 @@ export function createAtlasClient(options) {
         await refresh();
         return cache.get(5_000)?.jwt ?? null;
     }
-    const fapiClient = new FapiClient({ publishableKey, baseUrl, fetchImpl: doFetch, locale });
+    const fapiClient = new FapiClient({ publishableKey, baseUrl, fetchImpl: doFetch, locale, sdk: ATLAS_SVELTE_SDK });
     function getProviderToken(provider) {
         return fetchProviderToken(fapiClient, provider);
     }
@@ -180,11 +201,12 @@ export function createAtlasClient(options) {
         // so a missing in-memory token never skips the server-side sign-out. It
         // tombstones the session first, revokes it (retried once) and runs OIDC
         // front-channel logout.
+        notifier.expect('user');
         const attempt = await guard.revoke(cache.peek()?.sessionId ?? get(session)?.id ?? null, options);
         if (timer)
             clearTimeout(timer);
         timer = null;
-        clearSession();
+        clearSession('user');
         // The server promoted another session signed in on this browser: adopt it
         // deliberately (the revoke response already set its cookies).
         if (guard.promoted(attempt))
@@ -290,6 +312,7 @@ export function createAtlasClient(options) {
         isSignedIn,
         isLoaded,
         getToken,
+        onSignOut: (listener) => notifier.subscribe(listener),
         getProviderToken,
         signOut,
         setActiveOrganization,

package/dist/i18n.js

@@ -50,6 +50,12 @@ export const EN_US = {
     'captcha.prompt': 'Complete the security check to continue.',
     'captcha.required': 'Please complete the security check, then try again.',
     'captcha.failed': "The security check didn't pass. Please try again.",
+    'captcha.checking': 'Checking your browser…',
+    'captcha.verified': 'Security check complete.',
+    'captcha.puzzlePrompt': "Select every picture that shows the same shape as this one. Colour and size don't matter.",
+    'captcha.puzzleConfirm': 'Confirm',
+    'captcha.puzzleTile': 'Picture {n}',
+    'captcha.puzzleAlternative': "Can't do the picture check? Use a longer automatic check instead.",
     'mfa.title': 'Two-step verification',
     'mfa.subtitle': 'Enter the code from your authenticator app.',
     'mfa.codeLabel': 'Code',
@@ -73,6 +79,11 @@ export const EN_US = {
     'userProfile.addEmail': 'Add an email address',
     'userProfile.makePrimary': 'Make primary',
     'userProfile.unverified': 'Unverified',
+    'userProfile.verify': 'Verify',
+    'userProfile.verifyConfirm': 'Confirm',
+    'userProfile.verifyCodePlaceholder': 'Code from the email',
+    'userProfile.verifySendFailed': 'We could not send a code right now. Try again in a minute.',
+    'userProfile.verifyCodeRejected': 'That code was not accepted.',
     'userProfile.revokeDevice': 'Sign out',
     'userProfile.deleteAccount': 'Delete account',
     'organization.switcher': 'Switch organization',

package/dist/index.d.ts

@@ -32,3 +32,6 @@ export { default as OrganizationProfile } from './components/OrganizationProfile
 export type { InstanceSettings, EmailDelivery, PublicSignUpField, CaptchaController, CaptchaFlowKey, CaptchaWidgetMode, FlowCaptcha, } from '@atlasauth/js';
 export { SignOutError } from '@atlasauth/js';
 export type { SignOutOptions, SignOutResult } from '@atlasauth/js';
+export { SIGN_OUT_EVENT, onAtlasSignOut } from '@atlasauth/js';
+export type { SignOutEvent, SignOutReason } from '@atlasauth/js';
+export { ATLAS_SVELTE_SDK, ATLAS_SVELTE_VERSION } from './version';

package/dist/index.js

@@ -35,3 +35,6 @@ export { default as OrganizationSwitcher } from './components/OrganizationSwitch
 export { default as OrganizationProfile } from './components/OrganizationProfile.svelte';
 // What `signOut()` resolves with, and what it rejects with under `{ strict: true }`.
 export { SignOutError } from '@atlasauth/js';
+// `onSignOut({ reason })` event types + the `atlas:signout` window event; this SDK's version.
+export { SIGN_OUT_EVENT, onAtlasSignOut } from '@atlasauth/js';
+export { ATLAS_SVELTE_SDK, ATLAS_SVELTE_VERSION } from './version';

package/dist/version.d.ts

@@ -0,0 +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.6.1";
+export declare const ATLAS_SVELTE_SDK: AtlasSdkInfo;

package/dist/version.js

@@ -0,0 +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.6.1';
+export const ATLAS_SVELTE_SDK = { name: '@atlasauth/svelte', version: ATLAS_SVELTE_VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlasauth/svelte",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "type": "module",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -23,9 +23,9 @@
   },
   "dependencies": {
     "@atlasauth/design": "0.2.0",
+    "@atlasauth/js": "0.12.0",
     "@atlasauth/authz": "0.1.1",
-    "@atlasauth/backend": "0.7.3",
-    "@atlasauth/js": "0.10.0"
+    "@atlasauth/backend": "0.9.0"
   },
   "peerDependencies": {
     "svelte": ">=4",