@atlasauth/svelte 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlasauth/svelte changelog
 
+## 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`.
+
 ## 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,

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, 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"`

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, } from '@atlasauth/js';
 import { ATLAS_SVELTE_SDK } from './version';
 import { EN_US, withFallback } from './i18n';
 import { instanceDesignFrom } from './appearance';
@@ -191,6 +191,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

@@ -79,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/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.0";
+export declare const ATLAS_SVELTE_VERSION = "0.7.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.0';
+export const ATLAS_SVELTE_VERSION = '0.7.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.0",
+  "version": "0.7.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.10.0",
     "@atlasauth/authz": "0.1.1",
-    "@atlasauth/backend": "0.8.0"
+    "@atlasauth/js": "0.13.0"
   },
   "peerDependencies": {
     "svelte": ">=4",