@atlasauth/svelte 0.6.1 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlasauth/svelte changelog
 
+## 0.8.0
+
+### Changed
+
+- `@atlasauth/js` 0.15.0: referral capture for any referral program and any consent manager (pass a custom program's reader page-wide with `configureReferralCapture({ referralSource })`).
+
+### Fixed
+
+- Development instances: sign-in from `localhost` keeps working where the browser blocks the instance's cookie as third-party (Chrome, Safari). On a `pk_test_` key the SDK keeps the session's refresh token in `localStorage` and sends it as `x-refresh-token`; production keys never do.
+- After a sign-in completes, the panel says "You're signed in" only once this browser holds the session, and says plainly when the browser didn't keep it, instead of "you are signed in where you started". That message is now shown only for a sign-in completed on another device.
+- `<SignIn>` shows "No account? Sign up" on every step (`signUpUrl`; default the hosted sign-up page with the visitor's referral, `null` hides it), so a newcomer on a password-only instance always has a way to create an account.
+
+## 0.7.0
+- **Referral attribution.** The prebuilt forms send the referral the visitor arrived with on sign-in and sign-up (through `@atlasauth/js` 0.13.0) when the instance has referrals on, and show the captcha for a referred sign-up when the instance requires it. New init options: `referral?: false` and `referralConsent?`.
+
 ## 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`.
 

package/dist/accessors.js

@@ -115,11 +115,12 @@ function createFlow() {
                     return;
                 // The ticket is exchanged by a normal request, so no session token has
                 // ever appeared in a URL.
-                await client.post('/v1/client/tickets/exchange', {
+                const res = await client.post('/v1/client/tickets/exchange', {
                     attempt_id: next.attempt.id,
                     ticket,
                 });
-                await atlas.reload();
+                const kept = res.ok && (await atlas.reload());
+                state.update((current) => ({ ...current, sessionKept: kept }));
             })();
         }, 2_000);
     }
@@ -127,18 +128,24 @@ function createFlow() {
     // 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.
+    // Stays busy until this browser actually holds the session: the completion
+    // alone says nothing about whether the cookie was kept.
     async function finish(next) {
-        state.set(next);
         if (next.attempt?.status === 'complete') {
+            state.set({ ...next, busy: true });
+            let exchanged = true;
             if (next.ticket) {
-                await client.post('/v1/client/tickets/exchange', {
+                const res = await client.post('/v1/client/tickets/exchange', {
                     attempt_id: next.attempt.id,
                     ticket: next.ticket,
                 });
+                exchanged = res.ok;
             }
-            await atlas.reload();
+            const kept = exchanged && (await atlas.reload());
+            state.set({ ...next, busy: false, sessionKept: kept });
             return;
         }
+        state.set(next);
         maybeStartPolling();
     }
     function submit(values) {

package/dist/components/AttemptFlow.svelte

@@ -11,6 +11,7 @@ import CaptchaSlot from "./CaptchaSlot.svelte";
 export let attempt = null;
 export let busy = false;
 export let errors = [];
+export let sessionKept = void 0;
 export let titleKey;
 export let onSubmit;
 export let captcha = null;
@@ -75,6 +76,8 @@ $: message = (() => {
     case "await_oauth":
       return t("signIn.magicLinkSent");
     case "done":
+      if (sessionKept === true) return t("signIn.signedIn");
+      if (sessionKept === false) return t("signIn.sessionNotKept");
       return t("signIn.checkOtherTab");
     case "restart":
       return t("error.generic");
@@ -114,7 +117,11 @@ function handleSubmit(event) {
 
   <form on:submit={handleSubmit}>
     {#if message !== null}
-      <p>{message}</p>
+      {#if step.kind === 'done' && sessionKept === false}
+        <p class={cls('formFieldError', 'atlas-error')} role="alert">{message}</p>
+      {:else}
+        <p>{message}</p>
+      {/if}
     {:else}
       {#if step.kind === 'collect_captcha'}
         <!-- §5 the server withheld the attempt until a captcha clears. Solving

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

@@ -12,6 +12,7 @@ declare const __propDef: {
            */ attempt?: AttemptView | null;
         busy?: boolean;
         errors?: FieldError[];
+        /** `FlowState.sessionKept`: whether this browser kept the session the sign-in created. */ sessionKept?: boolean | undefined;
         titleKey: string;
         onSubmit: (values: Record<string, string>) => void;
         /**

package/dist/components/SignIn.svelte

@@ -1,7 +1,28 @@
 <script>import { onDestroy } from "svelte";
+import { signUp as hostedSignUp } from "@atlasauth/js";
 import { signIn } from "../accessors";
+import { useAtlas } from "../context";
+import { classFor } from "../appearance";
+import { translate } from "../i18n";
 import AttemptFlow from "./AttemptFlow.svelte";
 export let afterUrl = void 0;
+export let signUpUrl = void 0;
+const atlas = useAtlas();
+const t = (key) => translate(atlas.catalog, key);
+function signUpHref(url, after) {
+  if (url === null) return null;
+  if (url) return url;
+  try {
+    return hostedSignUp({
+      frontendApi: atlas.frontendApi,
+      redirectUrl: after ?? (typeof window !== "undefined" ? window.location.href : void 0),
+      navigate: false
+    });
+  } catch {
+    return null;
+  }
+}
+$: promptHref = $flowState.attempt?.status !== "complete" ? signUpHref(signUpUrl, afterUrl) : null;
 const flow = signIn();
 const flowState = flow.state;
 const settings = flow.settings;
@@ -14,9 +35,16 @@ $: captcha = drawn($settings, $flowState);
   attempt={$flowState.attempt}
   busy={$flowState.busy}
   errors={$flowState.errors}
+  sessionKept={$flowState.sessionKept}
   titleKey="signIn.title"
   onSubmit={flow.submit}
   onPrepare={flow.prepare}
   emailDelivery={$settings?.emailDelivery ?? null}
   {captcha}
 />
+
+{#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>
+  </p>
+{/if}

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

@@ -9,6 +9,11 @@ declare const __propDef: {
            * Offers emailed first factors (code / link) only while the app can deliver
            * email (`settings.emailDelivery`).
            */ afterUrl?: string | undefined;
+        /**
+           * Where "No account? Sign up" goes. Default: the instance's hosted sign-up
+           * page (carrying the visitor's referral). `null` hides it. Always shown, never
+           * only after a failed sign-in, so it says nothing about whether an email has an account.
+           */ signUpUrl?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/SignUp.svelte

@@ -16,6 +16,7 @@ $: captcha = drawn($settings, $flowState);
     attempt={$flowState.attempt}
     busy={$flowState.busy}
     errors={$flowState.errors}
+    sessionKept={$flowState.sessionKept}
     titleKey="signUp.title"
     onSubmit={flow.submit}
   />

package/dist/context.d.ts

@@ -1,5 +1,5 @@
 import { type Readable } from 'svelte/store';
-import { type ProviderToken, type SignOutOptions, type SignOutResult, type SignOutEvent, type SignOutListener } from '@atlasauth/js';
+import { type ProviderToken, type SignOutOptions, type SignOutResult, type SignOutEvent, type SignOutListener, type ReferralConsent } from '@atlasauth/js';
 import { type Catalog } from './i18n';
 import { type Appearance, type InstanceDesign } from './appearance';
 import type { AtlasOrganizationMembership, AtlasSession, AtlasUser, SessionClaims } from './types';
@@ -23,6 +23,18 @@ export type AuthStatus = 'loading' | 'signed_in' | 'signed_out';
 export declare const ATLAS_KEY: unique symbol;
 export interface AtlasInitOptions {
     publishableKey: string;
+    /**
+     * Referral attribution: the prebuilt forms send the referral the visitor
+     * arrived with on sign-in / sign-up when the instance has referrals on.
+     * `false` turns that off.
+     */
+    referral?: false;
+    /**
+     * The app's own consent decision for the referral tracking cookie, used only
+     * when Cookie Munch is not on the page: `'granted'` (or a function returning
+     * it) lets the forms read the cookie. Default: the cookie is not read.
+     */
+    referralConsent?: ReferralConsent;
     /**
      * The instance's Frontend API: an absolute URL such as
      * `"https://auth.example.com"`, or `"same-origin"` / a path such as `"/atlas"`
@@ -114,7 +126,8 @@ export interface AtlasClient extends AtlasStores {
      */
     signOut(options?: SignOutOptions): Promise<SignOutResult>;
     setActiveOrganization(organizationId: string | null): Promise<void>;
-    reload(): Promise<void>;
+    /** Re-boot from the Frontend API. Resolves true when a session now exists in this browser. */
+    reload(): Promise<boolean>;
     /**
      * Redirect handling + the first `/v1/client` load. Runs once, in the browser
      * only. {@link initAtlas} calls it automatically unless `manualBoot` is set;

package/dist/context.js

@@ -1,6 +1,6 @@
 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, SDK_HEADER, SignOutNotifier, getTemplateToken, reportSdkAdvisory, sdkHeaderValue, signOutReasonFromClient, } 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, configureReferralCapture, withDevBrowser, } from '@atlasauth/js';
 import { ATLAS_SVELTE_SDK } from './version';
 import { EN_US, withFallback } from './i18n';
 import { instanceDesignFrom } from './appearance';
@@ -28,7 +28,9 @@ export function createAtlasClient(options) {
     const baseUrl = resolveFrontendApi(options.frontendApi, {
         component: '<AtlasProvider> / initAtlas()',
     });
-    const doFetch = options.fetchImpl ?? (typeof fetch !== 'undefined' ? fetch : undefined);
+    const rawFetch = options.fetchImpl ?? (typeof fetch !== 'undefined' ? fetch : undefined);
+    // Development instances keep the session in a header where the browser blocks the cookie.
+    const doFetch = rawFetch ? withDevBrowser(options.publishableKey, rawFetch) : undefined;
     const catalog = options.localization ? withFallback(options.localization) : EN_US;
     const errorCatalog = options.localization ?? EN_US;
     const locale = catalogLocale(options.localization);
@@ -139,7 +141,7 @@ export function createAtlasClient(options) {
             // refused: stay signed out; the guard re-tries the revoke in the background.
             if (!body.session || !body.user || guard.refuse(body.session.id)) {
                 clearSession(body.session ? 'other_tab' : signOutReasonFromClient(body));
-                return;
+                return false;
             }
             notifier.clear();
             user.set(body.user);
@@ -149,6 +151,7 @@ export function createAtlasClient(options) {
                 applyToken(body.jwt, body.session.id);
             status.set('signed_in');
             scheduleRefresh();
+            return true;
         }
         catch {
             /**
@@ -157,6 +160,7 @@ export function createAtlasClient(options) {
              * re-authenticate for no reason.
              */
             status.update((current) => (current === 'loading' ? 'signed_out' : current));
+            return false;
         }
     }
     async function refresh() {
@@ -191,6 +195,8 @@ export function createAtlasClient(options) {
         await refresh();
         return cache.get(5_000)?.jwt ?? null;
     }
+    // Referral attribution: app-wide options every FAPI client on the page falls back to.
+    configureReferralCapture({ referral: options.referral, referralConsent: options.referralConsent });
     const fapiClient = new FapiClient({ publishableKey, baseUrl, fetchImpl: doFetch, locale, sdk: ATLAS_SVELTE_SDK });
     function getProviderToken(provider) {
         return fetchProviderToken(fapiClient, provider);

package/dist/i18n.js

@@ -31,6 +31,8 @@ export const EN_US = {
     'signIn.resendCode': 'Resend code',
     'signIn.resendLink': 'Resend link',
     'signIn.passwordOption': 'Use your password instead',
+    '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.',
     'signUp.title': 'Create your account',
     'signUp.submit': 'Continue',

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.6.1";
+export declare const ATLAS_SVELTE_VERSION = "0.8.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.6.1';
+export const ATLAS_SVELTE_VERSION = '0.8.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.6.1",
+  "version": "0.8.0",
   "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/backend": "0.14.0",
     "@atlasauth/authz": "0.1.1",
-    "@atlasauth/backend": "0.9.0"
+    "@atlasauth/js": "0.15.0"
   },
   "peerDependencies": {
     "svelte": ">=4",