@atlasauth/svelte 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,68 @@
+# @atlasauth/svelte changelog
+
+## 0.3.0
+- **`<SignUp>` now creates accounts.** Its first step is a create-account form (the instance's
+  configured sign-up fields, email, password and the legal-consent row) that posts
+  `POST /v1/client/sign_ups`; the emailed-code step and the ticket exchange then run through the shared
+  flow. Previously `<SignUp>` rendered the sign-in identifier step and could not create an account.
+- **Captcha renders automatically.** When the instance turns captcha on for a flow, `<SignUp>` and
+  `<SignIn>` show the provider's widget (Turnstile, hCaptcha, reCAPTCHA v2/v3/Enterprise) in the
+  configured mode (`visible`, `managed`, or `invisible` — run on submit), send its token as
+  `captcha_token`, answer the sign-in `needs_captcha` step (continuing as soon as it is solved), and on
+  `CAPTCHA_REQUIRED` / `CAPTCHA_FAILED` show a localized message and a fresh widget.
+- **Added to `FlowController`** (returned by `signIn()` / `signUp()`): `create(values, consent?)`,
+  `settings: Readable<InstanceSettings | null>`, `captcha: CaptchaController`,
+  `signUpCaptcha: CaptchaController`; `destroy()` now also removes the captcha widgets.
+- **Added type re-exports** `InstanceSettings`, `PublicSignUpField`, `CaptchaController`,
+  `CaptchaFlowKey`, `CaptchaWidgetMode`, `FlowCaptcha` from `@atlasauth/js`.
+- **Added catalog keys** (en-US): `signUp.emailLabel`, `signUp.passwordLabel`, `signUp.optionalField`,
+  `signUp.selectPlaceholder`, `signUp.consentAgree`, `signUp.consentNotice`, `signUp.terms`,
+  `signUp.privacy`, `signUp.and`, `captcha.prompt`, `captcha.required`, `captcha.failed`.
+- New element classes `atlas-captcha`, `atlas-consent`, `atlas-choices`, `atlas-choice`, `atlas-text`,
+  `atlas-link`; the flow's inputs now carry `name` attributes.
+- **`frontendApi` is validated at `initAtlas()` / `<AtlasProvider>`.** A missing (or non-string) or malformed value now throws an
+  `AtlasConfigError` (from `@atlasauth/js`; `code: 'FRONTEND_API_REQUIRED'` or `'FRONTEND_API_INVALID'`)
+  instead of silently sending requests to relative URLs on the app's own origin. Accepted: an absolute
+  `https:` URL (`http:` only for localhost / local development hosts), or `"same-origin"` / a root-relative path such as `"/atlas"` for a reverse proxy.
+- **Deprecated:** `frontendApi: ""` (the original same-origin spelling) still works as same-origin, with a
+  one-time console warning; use `"same-origin"` instead.
+
+## 0.2.1
+- **Front-channel logout on sign-out.** `signOut()` now loads the `frontchannel_logout_urls` the
+  Frontend API returns (apps signed in with "Sign in with Atlas" through this session) in hidden,
+  sandboxed iframes, so those apps clear their sessions in this browser too. It waits until the frames
+  load or 5 s pass, never fails the sign-out, only loads `https:` URLs (and `http://localhost`), and
+  does nothing during SSR. Pass `signOut({ frontchannel: false })` to skip it.
+
+## 0.2.0
+- **Design system.** `<AtlasProvider>` now applies the design configured in the Atlas dashboard
+  automatically (fetched after mount; opt out with `appearance.instanceDesign: false`).
+- **New `appearance.preset` and `appearance.design`** — the same settings and semantics as
+  `@atlasauth/react`: dashboard design < `preset` < `variables` < `design`. Invalid values are dropped
+  with a development warning and never reach CSS. The provider root gets stable `data-atlas-*`
+  attributes and the `--atlas-*` design variables; web fonts are linked from your Frontend API.
+- The client gains `loadInstanceDesign()`.
+- `appearance.variables` / `baseTheme` are unchanged when no design is in play.
+- New dependency: `@atlasauth/design`.
+
+## 0.1.5
+- **`getAuth()` now also returns `status` and `session`.** `status` is the three-state `AuthStatus` (`loading` | `signed_in` | `signed_out`) and `session` is the active session or `null`; both come from the same source as `isLoaded` / `isSignedIn`. The `UseAuth` type gains both fields.
+- README uses the published `@atlasauth/*` package names.
+
+## 0.1.4
+- **Docs fix.** Frontend API host examples use a single-label host (`your-instance-fapi.atlasauth.net`); a two-level `*.fapi.atlasauth.net` host isn't TLS-covered behind Cloudflare.
+
+## 0.1.3
+- **Metadata.** Added `repository` (monorepo + package directory), `homepage`, and `bugs` so the npm page links back to source.
+
+## 0.1.2
+- **Docs fix.** README Frontend API examples now use the real host shape `https://your-instance.fapi.atlasauth.net` (was a non-resolving `.atlas.dev`).
+
+## 0.1.1
+- First published release.
+- **Client and context.** Install with `initAtlas()` or `<AtlasProvider>`; `createAtlasClient()` and `useAtlas()` give direct access to the client and its stores.
+- **Store accessors.** `getUser()`, `getSession()`, `getAuth()` and `getOrganization()` return reactive stores; `getToken()`, `signIn()`, `signUp()` and `signOut()` are the action helpers.
+- **Components.** `SignedIn`, `SignedOut`, `AtlasLoading`, `AtlasLoaded`, `Protect`, `SignIn`, `SignUp`, `UserButton`, `UserProfile`, `OrganizationSwitcher` and `OrganizationProfile`.
+- **SvelteKit server.** The separate `@atlasauth/svelte/server` entry provides `handleAtlas()` (a `handle` hook that verifies the session) and `getServerAuth()` for load functions and endpoints, so the backend verifier never enters a browser bundle.
+- Appearance, localization and authorization helpers shared with the other Atlas UI SDKs.
+

package/dist/accessors.d.ts

@@ -1,5 +1,5 @@
 import { type Readable } from 'svelte/store';
-import { type FlowState, type ProviderToken } from '@atlasauth/js';
+import { type CaptchaController, type FlowState, type InstanceSettings, type ProviderToken, type SignOutOptions } from '@atlasauth/js';
 import { type AuthStatus } from './context';
 import { type ProtectCondition } from './protect';
 import type { AtlasOrganizationMembership, AtlasSession, AtlasUser } from './types';
@@ -48,7 +48,7 @@ export interface UseAuth {
     getToken(): Promise<string | null>;
     /** §6.6 the user's own live access token at a connected social provider. */
     getProviderToken(provider: string): Promise<ProviderToken | null>;
-    signOut(): Promise<void>;
+    signOut(options?: SignOutOptions): Promise<void>;
     /** Mirrors `<Protect>`, for logic that is not a render decision. */
     has(condition: ProtectCondition): boolean;
 }
@@ -64,7 +64,7 @@ export declare function getOrganization(): Readable<UseOrganization>;
 /** Refresh-if-stale, then hand over the JWT. The `useAuth().getToken` shortcut. */
 export declare function getToken(): Promise<string | null>;
 /** Revoke the session and drop all in-memory state. */
-export declare function signOut(): Promise<void>;
+export declare function signOut(options?: SignOutOptions): Promise<void>;
 /**
  * A running sign-in / sign-up attempt: a reactive `state` store plus `submit`.
  *
@@ -77,10 +77,31 @@ export declare function signOut(): Promise<void>;
 export interface FlowController {
     state: Readable<FlowState>;
     submit(values: Record<string, string>): void;
-    /** Stop the magic-link poll loop — call from `onDestroy`. */
+    /**
+     * Create an account (`POST /v1/client/sign_ups`) from a create-account form's
+     * values — email, password and any configured sign-up fields — carrying the
+     * sign-up captcha's token when the instance requires one. The emailed code is
+     * then posted with {@link submit}.
+     */
+    create(values: Record<string, string>, consent?: boolean): void;
+    /**
+     * The instance's public sign-in / sign-up settings (captcha, sign-up fields,
+     * legal consent) from `GET /v1/appearance`; null until loaded or when the
+     * server could not be reached.
+     */
+    settings: Readable<InstanceSettings | null>;
+    /** The sign-in captcha (identifier step / `needs_captcha` challenge). */
+    captcha: CaptchaController;
+    /** The sign-up captcha (the create-account step). */
+    signUpCaptcha: CaptchaController;
+    /** Stop the magic-link poll loop and remove the captcha widgets — call from `onDestroy`. */
     destroy(): void;
 }
 /** Start (or resume) a sign-in flow. Drives `<SignIn>`; usable standalone too. */
 export declare function signIn(): FlowController;
-/** Start a sign-up flow. Drives `<SignUp>`; usable standalone too. */
+/**
+ * Start a sign-up flow. Drives `<SignUp>`; usable standalone too:
+ * `create(values)` posts `/v1/client/sign_ups` (the account is created there),
+ * then `submit({ code })` verifies the emailed code and completes the session.
+ */
 export declare function signUp(): FlowController;

package/dist/accessors.js

@@ -1,6 +1,7 @@
 import { derived, get, writable } from 'svelte/store';
-import { FapiClient, advance, flowFromPending, pollAttempt, shouldKeepPolling, } from '@atlasauth/js';
+import { FapiClient, advanceWithCaptcha, createCaptchaController, createSignUp, fetchInstanceSettings, flowNeedsCaptcha, signInCaptchaOptions, flowFromPending, pollAttempt, shouldKeepPolling, } from '@atlasauth/js';
 import { useAtlas } from './context';
+import { translate } from './i18n';
 import { evaluate } from './protect';
 export function getUser() {
     const atlas = useAtlas();
@@ -54,8 +55,8 @@ export function getToken() {
     return useAtlas().getToken();
 }
 /** Revoke the session and drop all in-memory state. */
-export function signOut() {
-    return useAtlas().signOut();
+export function signOut(options) {
+    return useAtlas().signOut(options);
 }
 function createFlow() {
     const atlas = useAtlas();
@@ -66,6 +67,25 @@ function createFlow() {
     // 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.
     const state = writable(flowFromPending(atlas.pendingAttempt));
+    const settings = writable(null);
+    const t = (key) => translate(atlas.catalog, key);
+    // §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();
+    let identifier = '';
+    const unsubscribeCaptcha = derived([settings, state], (pair) => pair).subscribe(([current, flow]) => {
+        captcha.configure(signInCaptchaOptions(current?.captchaFlows.signIn, flow, () => submit({})));
+        const signUpFlow = current?.captchaFlows.signUp;
+        signUpCaptcha.configure({ flow: signUpFlow, active: !flow.attempt && flowNeedsCaptcha(signUpFlow) });
+    });
+    if (typeof window !== 'undefined') {
+        void fetchInstanceSettings(client).then((loaded) => {
+            if (loaded)
+                settings.set(loaded);
+        });
+    }
     let pollTimer = null;
     function stopPolling() {
         if (pollTimer)
@@ -94,35 +114,63 @@ function createFlow() {
             })();
         }, 2_000);
     }
+    // On completion the response carries a one-time ticket (§7.1). Exchange it
+    // for cookies over a same-origin request — FAPI is cross-origin to the app
+    // and cannot set the cookie on the completion response itself — THEN
+    // re-boot so the rest of the app sees a signed-in user.
+    async function finish(next) {
+        state.set(next);
+        if (next.attempt?.status === 'complete') {
+            if (next.ticket) {
+                await client.post('/v1/client/tickets/exchange', {
+                    attempt_id: next.attempt.id,
+                    ticket: next.ticket,
+                });
+            }
+            await atlas.reload();
+            return;
+        }
+        maybeStartPolling();
+    }
     function submit(values) {
         void (async () => {
             state.update((current) => ({ ...current, busy: true, errors: [] }));
-            const next = await advance(client, get(state), values);
-            state.set(next);
-            // On completion the response carries a one-time ticket (§7.1). Exchange it
-            // for cookies over a same-origin request — FAPI is cross-origin to the app
-            // and cannot set the cookie on the completion response itself — THEN
-            // re-boot so the rest of the app sees a signed-in user.
-            if (next.attempt?.status === 'complete') {
-                if (next.ticket) {
-                    await client.post('/v1/client/tickets/exchange', {
-                        attempt_id: next.attempt.id,
-                        ticket: next.ticket,
-                    });
-                }
-                await atlas.reload();
-                return;
-            }
-            maybeStartPolling();
+            const out = await advanceWithCaptcha(client, get(state), values, { captcha, identifier, t });
+            identifier = out.identifier;
+            await finish(out.state);
         })();
     }
-    return { state: { subscribe: state.subscribe }, submit, destroy: stopPolling };
+    function create(values, consent = true) {
+        void (async () => {
+            state.update((current) => ({ ...current, busy: true, errors: [] }));
+            await finish(await createSignUp(client, values, { consent, captcha: signUpCaptcha, t }));
+        })();
+    }
+    function destroy() {
+        stopPolling();
+        unsubscribeCaptcha();
+        captcha.destroy();
+        signUpCaptcha.destroy();
+    }
+    return {
+        state: { subscribe: state.subscribe },
+        submit,
+        create,
+        settings: { subscribe: settings.subscribe },
+        captcha,
+        signUpCaptcha,
+        destroy,
+    };
 }
 /** Start (or resume) a sign-in flow. Drives `<SignIn>`; usable standalone too. */
 export function signIn() {
     return createFlow();
 }
-/** Start a sign-up flow. Drives `<SignUp>`; usable standalone too. */
+/**
+ * Start a sign-up flow. Drives `<SignUp>`; usable standalone too:
+ * `create(values)` posts `/v1/client/sign_ups` (the account is created there),
+ * then `submit({ code })` verifies the emailed code and completes the session.
+ */
 export function signUp() {
     return createFlow();
 }

package/dist/components/AtlasProvider.svelte

@@ -14,7 +14,7 @@ const client = initAtlas({
   fetchImpl
 });
 let instanceDesign = null;
-$: rendered = renderAppearance(appearance, instanceDesign, { frontendApi });
+$: rendered = renderAppearance(appearance, instanceDesign, { frontendApi: client.frontendApi });
 $: style = Object.entries(rendered.style).map(([name, value]) => `${name}: ${value}`).join("; ");
 $: designStyle = rendered.css ? `<style data-atlas-design="${rendered.key}">${rendered.css}</style>` : "";
 onMount(() => {

package/dist/components/AttemptFlow.svelte

@@ -2,11 +2,13 @@
 import { useAtlas } from "../context";
 import { classFor } from "../appearance";
 import { translate } from "../i18n";
+import CaptchaSlot from "./CaptchaSlot.svelte";
 export let attempt = null;
 export let busy = false;
 export let errors = [];
 export let titleKey;
 export let onSubmit;
+export let captcha = null;
 const atlas = useAtlas();
 const cls = (key, base) => classFor(key, atlas.appearance, base);
 const t = (key, vars) => translate(atlas.catalog, key, vars);
@@ -41,6 +43,7 @@ $: message = (() => {
       return t("signIn.checkOtherTab");
     case "restart":
       return t("error.generic");
+    case "collect_captcha":
     case "collect_identifier":
     case "collect_first_factor":
     case "collect_second_factor":
@@ -53,6 +56,7 @@ $: message = (() => {
   }
 })();
 $: showSubmit = step.kind !== "done" && step.kind !== "await_oauth" && message === null;
+$: showCaptcha = !!captcha && (step.kind === "collect_identifier" || step.kind === "collect_captcha");
 function handleSubmit(event) {
   event.preventDefault();
   onSubmit(values);
@@ -70,12 +74,18 @@ function handleSubmit(event) {
     {#if message !== null}
       <p>{message}</p>
     {:else}
+      {#if step.kind === 'collect_captcha'}
+        <!-- §5 the server withheld the attempt until a captcha clears. Solving
+             the widget resubmits the identifier on its own; the button retries. -->
+        <p class="atlas-text">{t('captcha.prompt')}</p>
+      {/if}
       {#each fields as f (f.name)}
         <label class="atlas-field">
           <span>{t(f.labelKey)}</span>
           <input
             class={cls('formFieldInput', 'atlas-input')}
             type={f.type}
+            name={f.name}
             value={values[f.name] ?? ''}
             on:input={(e) => (values[f.name] = e.currentTarget.value)}
           />
@@ -86,6 +96,10 @@ function handleSubmit(event) {
       {/each}
     {/if}
 
+    {#if showCaptcha && captcha}
+      <CaptchaSlot controller={captcha} />
+    {/if}
+
     {#if showSubmit}
       <button class={cls('formButtonPrimary', 'atlas-button')} disabled={busy} type="submit">
         {t('signIn.submit')}

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type AttemptView, type FieldError } from '@atlasauth/js';
+import { type AttemptView, type CaptchaController, type FieldError } from '@atlasauth/js';
 declare const __propDef: {
     props: {
         /**
@@ -14,6 +14,11 @@ declare const __propDef: {
         errors?: FieldError[];
         titleKey: string;
         onSubmit: (values: Record<string, string>) => void;
+        /**
+           * The sign-in captcha, drawn above the submit button on the identifier step
+           * (an always-on sign-in captcha) and on the challenge step the server demands
+           * with `needs_captcha`. Null when the flow draws none.
+           */ captcha?: CaptchaController | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/CaptchaSlot.svelte

@@ -0,0 +1,19 @@
+<script>export let controller;
+function attach(node, c) {
+  let current = c;
+  current.attach(node);
+  return {
+    update(next) {
+      if (next === current) return;
+      current.attach(null);
+      current = next;
+      current.attach(node);
+    },
+    destroy() {
+      current.attach(null);
+    }
+  };
+}
+</script>
+
+<div class="atlas-captcha" data-atlas-captcha="" use:attach={controller} />

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { CaptchaController } from '@atlasauth/js';
+declare const __propDef: {
+    props: {
+        /**
+           * The element a flow's captcha widget draws into (see `createCaptchaController`
+           * in `@atlasauth/js`). The parent renders it only while the flow needs a
+           * captcha; the action attaches / detaches the controller with the element.
+           */ controller: CaptchaController;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CaptchaSlotProps = typeof __propDef.props;
+export type CaptchaSlotEvents = typeof __propDef.events;
+export type CaptchaSlotSlots = typeof __propDef.slots;
+export default class CaptchaSlot extends SvelteComponent<CaptchaSlotProps, CaptchaSlotEvents, CaptchaSlotSlots> {
+}
+export {};

package/dist/components/SignIn.svelte

@@ -4,7 +4,10 @@ import AttemptFlow from "./AttemptFlow.svelte";
 export let afterUrl = void 0;
 const flow = signIn();
 const flowState = flow.state;
+const settings = flow.settings;
 onDestroy(() => flow.destroy());
+const drawn = (..._deps) => flow.captcha.needed ? flow.captcha : null;
+$: captcha = drawn($settings, $flowState);
 </script>
 
 <AttemptFlow
@@ -13,4 +16,5 @@ onDestroy(() => flow.destroy());
   errors={$flowState.errors}
   titleKey="signIn.title"
   onSubmit={flow.submit}
+  {captcha}
 />

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

@@ -4,7 +4,8 @@ declare const __propDef: {
         /**
            * §10.2 `<SignIn/>` — a full multi-step flow driven entirely by the
            * server-side attempt status. Contains no decision about what comes next; it
-           * renders whatever `status` the server returned.
+           * renders whatever `status` the server returned. Draws the instance's sign-in
+           * captcha when it is required (always-on, or a `needs_captcha` challenge).
            */ afterUrl?: string | undefined;
     };
     events: {

package/dist/components/SignUp.svelte

@@ -1,16 +1,30 @@
 <script>import { onDestroy } from "svelte";
 import { signUp } from "../accessors";
 import AttemptFlow from "./AttemptFlow.svelte";
+import SignUpForm from "./SignUpForm.svelte";
 export let afterUrl = void 0;
 const flow = signUp();
 const flowState = flow.state;
+const settings = flow.settings;
 onDestroy(() => flow.destroy());
+const drawn = (..._deps) => flow.signUpCaptcha.needed ? flow.signUpCaptcha : null;
+$: captcha = drawn($settings, $flowState);
 </script>
 
-<AttemptFlow
-  attempt={$flowState.attempt}
-  busy={$flowState.busy}
-  errors={$flowState.errors}
-  titleKey="signUp.title"
-  onSubmit={flow.submit}
-/>
+{#if $flowState.attempt}
+  <AttemptFlow
+    attempt={$flowState.attempt}
+    busy={$flowState.busy}
+    errors={$flowState.errors}
+    titleKey="signUp.title"
+    onSubmit={flow.submit}
+  />
+{:else}
+  <SignUpForm
+    settings={$settings}
+    busy={$flowState.busy}
+    errors={$flowState.errors}
+    {captcha}
+    onSubmit={flow.create}
+  />
+{/if}

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

@@ -2,8 +2,11 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
-           * §10.2 `<SignUp/>` — the server-driven registration flow. Same shell as
-           * `<SignIn/>`, only the title differs; the step sequence comes from the server.
+           * §10.2 `<SignUp/>` — creates an account. The first step is the
+           * create-account form (the instance's configured fields, email, password,
+           * legal consent and — when required — the captcha), which POSTs
+           * `/v1/client/sign_ups`; from there the flow is server-driven exactly like
+           * `<SignIn/>` (the emailed-code step, then the ticket exchange).
            */ afterUrl?: string | undefined;
     };
     events: {

package/dist/components/SignUpForm.svelte

@@ -0,0 +1,183 @@
+<script>import { useAtlas } from "../context";
+import { classFor } from "../appearance";
+import { translate } from "../i18n";
+import CaptchaSlot from "./CaptchaSlot.svelte";
+export let settings = null;
+export let busy = false;
+export let errors = [];
+export let captcha = null;
+export let onSubmit;
+const atlas = useAtlas();
+const cls = (key, base) => classFor(key, atlas.appearance, base);
+const t = (key, vars) => translate(atlas.catalog, key, vars);
+let values = {};
+let agreed = false;
+$: legal = settings?.legal;
+$: showLegal = !!legal && (!!legal.termsUrl || !!legal.privacyUrl);
+$: consentOk = !legal?.required || agreed;
+$: fields = settings?.signUpFields ?? [];
+const label = (f) => f.required ? f.label : t("signUp.optionalField", { label: f.label });
+const inputType = (f) => ["email", "tel", "url", "number", "date"].includes(f.type) ? f.type : "text";
+const picked = (key) => values[key] ? values[key].split(", ") : [];
+function toggle(f, option, on) {
+  if (f.type === "radio") values[f.key] = option;
+  else {
+    const current = picked(f.key);
+    values[f.key] = (on ? [...current, option] : current.filter((p) => p !== option)).join(", ");
+  }
+}
+function handleSubmit(event) {
+  event.preventDefault();
+  if (!consentOk) return;
+  onSubmit({ ...values }, legal?.required ? agreed : true);
+}
+</script>
+
+<div class={cls('card', 'atlas-card')}>
+  <h1 class={cls('headerTitle', 'atlas-title')}>{t('signUp.title')}</h1>
+
+  {#each errors.filter((e) => !e.param) as error (error.code)}
+    <p class={cls('formFieldError', 'atlas-error')} role="alert">{error.message}</p>
+  {/each}
+
+  <form on:submit={handleSubmit}>
+    {#each fields as f (f.key)}
+      {#if f.type === 'radio' || f.type === 'multiselect'}
+        <!-- A choice group holds several inputs, so it can't sit inside one <label>. -->
+        <div class={cls('formField', 'atlas-field')}>
+          <span class={cls('formFieldLabel', 'atlas-field-label')}>{label(f)}</span>
+          <span class="atlas-choices">
+            {#each f.options as o (o)}
+              <label class="atlas-choice">
+                <input
+                  type={f.type === 'radio' ? 'radio' : 'checkbox'}
+                  name={f.key}
+                  value={o}
+                  checked={picked(f.key).includes(o)}
+                  on:change={(e) => toggle(f, o, e.currentTarget.checked)}
+                />
+                {o}
+              </label>
+            {/each}
+          </span>
+          {#each errors.filter((e) => e.param === f.key) as error (error.code)}
+            <span class={cls('formFieldError', 'atlas-error')}>{error.message}</span>
+          {/each}
+        </div>
+      {:else}
+        <label class={cls('formField', 'atlas-field')}>
+          <span class={cls('formFieldLabel', 'atlas-field-label')}>{label(f)}</span>
+          {#if f.type === 'checkbox'}
+            <input
+              type="checkbox"
+              name={f.key}
+              checked={values[f.key] === 'true'}
+              on:change={(e) => (values[f.key] = e.currentTarget.checked ? 'true' : '')}
+            />
+          {:else if f.type === 'select'}
+            <select
+              class={cls('formFieldInput', 'atlas-input')}
+              name={f.key}
+              value={values[f.key] ?? ''}
+              required={f.required}
+              on:change={(e) => (values[f.key] = e.currentTarget.value)}
+            >
+              <option value="">{f.placeholder ?? t('signUp.selectPlaceholder')}</option>
+              {#each f.options as o (o)}
+                <option value={o}>{o}</option>
+              {/each}
+            </select>
+          {:else if f.type === 'textarea'}
+            <textarea
+              class={cls('formFieldInput', 'atlas-input')}
+              name={f.key}
+              rows="3"
+              value={values[f.key] ?? ''}
+              required={f.required}
+              placeholder={f.placeholder ?? undefined}
+              on:input={(e) => (values[f.key] = e.currentTarget.value)}
+            />
+          {:else}
+            <input
+              class={cls('formFieldInput', 'atlas-input')}
+              type={inputType(f)}
+              name={f.key}
+              value={values[f.key] ?? ''}
+              required={f.required}
+              placeholder={f.placeholder ?? undefined}
+              on:input={(e) => (values[f.key] = e.currentTarget.value)}
+            />
+          {/if}
+          {#each errors.filter((e) => e.param === f.key) as error (error.code)}
+            <span class={cls('formFieldError', 'atlas-error')}>{error.message}</span>
+          {/each}
+        </label>
+      {/if}
+    {/each}
+
+    <label class={cls('formField', 'atlas-field')}>
+      <span class={cls('formFieldLabel', 'atlas-field-label')}>{t('signUp.emailLabel')}</span>
+      <input
+        class={cls('formFieldInput', 'atlas-input')}
+        type="email"
+        name="email"
+        autocomplete="email"
+        required
+        value={values.email ?? ''}
+        on:input={(e) => (values.email = e.currentTarget.value)}
+      />
+      {#each errors.filter((e) => e.param === 'email') as error (error.code)}
+        <span class={cls('formFieldError', 'atlas-error')}>{error.message}</span>
+      {/each}
+    </label>
+
+    <label class={cls('formField', 'atlas-field')}>
+      <span class={cls('formFieldLabel', 'atlas-field-label')}>{t('signUp.passwordLabel')}</span>
+      <input
+        class={cls('formFieldInput', 'atlas-input')}
+        type="password"
+        name="password"
+        autocomplete="new-password"
+        required
+        value={values.password ?? ''}
+        on:input={(e) => (values.password = e.currentTarget.value)}
+      />
+      {#each errors.filter((e) => e.param === 'password') as error (error.code)}
+        <span class={cls('formFieldError', 'atlas-error')}>{error.message}</span>
+      {/each}
+    </label>
+
+    {#if showLegal && legal}
+      <label class={cls('formField', 'atlas-consent')}>
+        {#if legal.required}
+          <input type="checkbox" name="consent" bind:checked={agreed} />
+        {/if}
+        <span class="atlas-text">
+          {t(legal.required ? 'signUp.consentAgree' : 'signUp.consentNotice')}
+          {#if legal.termsUrl}
+            <a class="atlas-link" href={legal.termsUrl} target="_blank" rel="noopener noreferrer"
+              >{t('signUp.terms')}</a
+            >{/if}{#if legal.termsUrl && legal.privacyUrl}{' '}{t('signUp.and')}{' '}{/if}{#if legal.privacyUrl}
+            <a class="atlas-link" href={legal.privacyUrl} target="_blank" rel="noopener noreferrer"
+              >{t('signUp.privacy')}</a
+            >{/if}.
+        </span>
+        {#each errors.filter((e) => e.param === 'consent') as error (error.code)}
+          <span class={cls('formFieldError', 'atlas-error')}>{error.message}</span>
+        {/each}
+      </label>
+    {/if}
+
+    {#if captcha}
+      <CaptchaSlot controller={captcha} />
+    {/if}
+
+    <button
+      class={cls('formButtonPrimary', 'atlas-button')}
+      disabled={busy || !consentOk}
+      type="submit"
+    >
+      {t('signUp.submit')}
+    </button>
+  </form>
+</div>

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

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { CaptchaController, FieldError, InstanceSettings } from '@atlasauth/js';
+declare const __propDef: {
+    props: {
+        /**
+           * The create-account step of `<SignUp/>`: the instance's configured extra
+           * fields, email + password, the legal-consent row and — when the instance
+           * requires one on sign-up — the captcha widget. Values live in local state so
+           * a refused submit never clears them.
+           */ settings?: InstanceSettings | null;
+        busy?: boolean;
+        errors?: FieldError[];
+        captcha?: CaptchaController | null;
+        onSubmit: (values: Record<string, string>, consent: boolean) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SignUpFormProps = typeof __propDef.props;
+export type SignUpFormEvents = typeof __propDef.events;
+export type SignUpFormSlots = typeof __propDef.slots;
+export default class SignUpForm extends SvelteComponent<SignUpFormProps, SignUpFormEvents, SignUpFormSlots> {
+}
+export {};

package/dist/context.d.ts

@@ -1,5 +1,5 @@
 import { type Readable } from 'svelte/store';
-import { type ProviderToken } from '@atlasauth/js';
+import { type ProviderToken, type SignOutOptions } from '@atlasauth/js';
 import { type Catalog } from './i18n';
 import { type Appearance, type InstanceDesign } from './appearance';
 import type { AtlasOrganizationMembership, AtlasSession, AtlasUser, SessionClaims } from './types';
@@ -23,7 +23,14 @@ export type AuthStatus = 'loading' | 'signed_in' | 'signed_out';
 export declare const ATLAS_KEY: unique symbol;
 export interface AtlasInitOptions {
     publishableKey: string;
-    /** The instance's FAPI origin. Empty for same-origin. */
+    /**
+     * The instance's Frontend API: an absolute URL such as
+     * `"https://auth.example.com"`, or `"same-origin"` / a path such as `"/atlas"`
+     * behind a reverse proxy on the app's own origin. Required at runtime — a
+     * missing or malformed value throws an `AtlasConfigError`
+     * (`FRONTEND_API_REQUIRED` / `FRONTEND_API_INVALID`). Optional in the type
+     * only so existing call sites keep compiling.
+     */
     frontendApi?: string;
     appearance?: Appearance;
     localization?: Catalog;
@@ -71,7 +78,7 @@ export interface AtlasClient extends AtlasStores {
      * exposed; the server refreshes a stale token on read.
      */
     getProviderToken(provider: string): Promise<ProviderToken | null>;
-    signOut(): Promise<void>;
+    signOut(options?: SignOutOptions): Promise<void>;
     setActiveOrganization(organizationId: string | null): Promise<void>;
     reload(): Promise<void>;
     /**

package/dist/context.js

@@ -1,6 +1,6 @@
 import { getContext, setContext } from 'svelte';
 import { derived, get, writable } from 'svelte/store';
-import { FapiClient, TokenCache, getProviderToken as fetchProviderToken, msUntilRefresh, readExpiry, readRedirectResult, stripRedirectParams, } from '@atlasauth/js';
+import { FapiClient, TokenCache, getProviderToken as fetchProviderToken, msUntilRefresh, readExpiry, readRedirectResult, resolveFrontendApi, stripRedirectParams, runFrontChannelLogoutFromResponse, } from '@atlasauth/js';
 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. */
@@ -22,7 +22,11 @@ function decodeClaims(jwt) {
  */
 export function createAtlasClient(options) {
     const { publishableKey } = options;
-    const baseUrl = options.frontendApi ?? '';
+    // Throws on a missing/invalid value rather than quietly sending every request
+    // to a relative path on the app's origin.
+    const baseUrl = resolveFrontendApi(options.frontendApi, {
+        component: '<AtlasProvider> / initAtlas()',
+    });
     const doFetch = options.fetchImpl ?? (typeof fetch !== 'undefined' ? fetch : undefined);
     const catalog = options.localization ? withFallback(options.localization) : EN_US;
     const status = writable('loading');
@@ -148,10 +152,16 @@ export function createAtlasClient(options) {
     function getProviderToken(provider) {
         return fetchProviderToken(fapiClient, provider);
     }
-    async function signOut() {
+    async function signOut(options) {
         const current = cache.peek();
         if (current) {
-            await call(`/v1/client/sessions/${current.sessionId}/revoke`, { method: 'POST' }).catch(() => undefined);
+            const revoked = await call(`/v1/client/sessions/${current.sessionId}/revoke`, {
+                method: 'POST',
+            }).catch(() => undefined);
+            // OIDC Front-Channel Logout: let the apps signed in through this session
+            // clear theirs in this browser (hidden iframes, capped at 5 s). Best-effort.
+            if (options?.frontchannel !== false)
+                await runFrontChannelLogoutFromResponse(revoked);
         }
         if (timer)
             clearTimeout(timer);

package/dist/i18n.js

@@ -27,6 +27,18 @@ export const EN_US = {
     'signUp.submit': 'Continue',
     'signUp.haveAccount': 'Already have an account?',
     'signUp.signInLink': 'Sign in',
+    'signUp.emailLabel': 'Email address',
+    'signUp.passwordLabel': 'Password',
+    'signUp.optionalField': '{label} (optional)',
+    'signUp.selectPlaceholder': 'Select…',
+    'signUp.consentAgree': 'I agree to the',
+    'signUp.consentNotice': 'By continuing you agree to the',
+    'signUp.terms': 'Terms of Service',
+    'signUp.privacy': 'Privacy Policy',
+    'signUp.and': 'and',
+    '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.",
     'mfa.title': 'Two-step verification',
     'mfa.subtitle': 'Enter the code from your authenticator app.',
     'mfa.codeLabel': 'Code',

package/dist/index.d.ts

@@ -29,3 +29,4 @@ export { default as UserButton } from './components/UserButton.svelte';
 export { default as UserProfile } from './components/UserProfile.svelte';
 export { default as OrganizationSwitcher } from './components/OrganizationSwitcher.svelte';
 export { default as OrganizationProfile } from './components/OrganizationProfile.svelte';
+export type { InstanceSettings, PublicSignUpField, CaptchaController, CaptchaFlowKey, CaptchaWidgetMode, FlowCaptcha, } from '@atlasauth/js';

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@atlasauth/svelte",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "exports": {
     ".": {
@@ -21,10 +22,10 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
+    "@atlasauth/js": "0.6.0",
+    "@atlasauth/backend": "0.7.0",
     "@atlasauth/design": "0.1.0",
-    "@atlasauth/authz": "0.1.1",
-    "@atlasauth/js": "0.4.0",
-    "@atlasauth/backend": "0.3.0"
+    "@atlasauth/authz": "0.1.1"
   },
   "peerDependencies": {
     "svelte": ">=4",