@atlasauth/svelte 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlasauth/svelte changelog
 
+## 0.5.0
+Requires `@atlasauth/js` 0.9.0.
+- **Server errors render in the app's language.** `<SignIn>` / `<SignUp>` show the catalog string
+  `error.<reason>` for an error's `reason` (placeholders filled from its `meta`), falling back to the server's
+  message, then `error.generic`. With `localization: esES` a refused password reads
+  "Esas credenciales son incorrectas." instead of the server's English sentence.
+- **`Accept-Language`.** The client's and the flows' Frontend API requests carry the `locale` tag of the
+  `localization` bundle, so the server localises `message` too.
+- **Added 38 `error.<reason>` keys** to the built-in `EN_US` catalog (see `@atlasauth/localizations` 0.4.0).
+- `AtlasClient` gains `errorCatalog?: Catalog` and `locale?: string`.
+
+
 ## 0.4.0
 - **Safer sign-out.** `signOut(options?)` (on the client, `getAuth()` and the `signOut()` helper) now
   resolves `SignOutResult` — `{ revoked: boolean; activeSessionId?: string }` — instead of `void`

package/dist/accessors.js

@@ -67,6 +67,7 @@ function createFlow() {
     const client = new FapiClient({
         publishableKey: atlas.publishableKey,
         baseUrl: atlas.frontendApi,
+        locale: atlas.locale,
     });
     // 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.

package/dist/components/AttemptFlow.svelte

@@ -1,4 +1,5 @@
 <script>import {
+  localizedErrorMessage,
   nextStep,
   offeredFirstFactors
 } from "@atlasauth/js";
@@ -17,6 +18,7 @@ export let onPrepare = null;
 const atlas = useAtlas();
 const cls = (key, base) => classFor(key, atlas.appearance, base);
 const t = (key, vars) => translate(atlas.catalog, key, vars);
+const errorText = (error) => localizedErrorMessage(error, atlas.errorCatalog ?? atlas.catalog, atlas.catalog);
 let values = {};
 $: step = attempt ? nextStep(attempt) : { kind: "collect_identifier" };
 const strategyName = (s) => typeof s === "string" ? s : String(s?.strategy ?? "");
@@ -89,7 +91,7 @@ function handleSubmit(event) {
   <h1 class={cls('headerTitle', 'atlas-title')}>{t(titleKey)}</h1>
 
   {#each errors.filter((e) => !e.param) as error (error.code)}
-    <p class={cls('formFieldError', 'atlas-error')} role="alert">{error.message}</p>
+    <p class={cls('formFieldError', 'atlas-error')} role="alert">{errorText(error)}</p>
   {/each}
 
   <form on:submit={handleSubmit}>
@@ -112,7 +114,7 @@ function handleSubmit(event) {
             on:input={(e) => (values[f.name] = e.currentTarget.value)}
           />
           {#each errors.filter((e) => e.param === f.name) as error (error.code)}
-            <span class={cls('formFieldError', 'atlas-error')}>{error.message}</span>
+            <span class={cls('formFieldError', 'atlas-error')}>{errorText(error)}</span>
           {/each}
         </label>
       {/each}

package/dist/components/SignUpForm.svelte

@@ -1,4 +1,7 @@
-<script>import { useAtlas } from "../context";
+<script>import {
+  localizedErrorMessage
+} from "@atlasauth/js";
+import { useAtlas } from "../context";
 import { classFor } from "../appearance";
 import { translate } from "../i18n";
 import CaptchaSlot from "./CaptchaSlot.svelte";
@@ -10,6 +13,7 @@ export let onSubmit;
 const atlas = useAtlas();
 const cls = (key, base) => classFor(key, atlas.appearance, base);
 const t = (key, vars) => translate(atlas.catalog, key, vars);
+const errorText = (error) => localizedErrorMessage(error, atlas.errorCatalog ?? atlas.catalog, atlas.catalog);
 let values = {};
 let agreed = false;
 $: legal = settings?.legal;
@@ -38,7 +42,7 @@ function handleSubmit(event) {
   <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>
+    <p class={cls('formFieldError', 'atlas-error')} role="alert">{errorText(error)}</p>
   {/each}
 
   {#if emailUnavailable}
@@ -65,7 +69,7 @@ function handleSubmit(event) {
               {/each}
             </span>
             {#each errors.filter((e) => e.param === f.key) as error (error.code)}
-              <span class={cls('formFieldError', 'atlas-error')}>{error.message}</span>
+              <span class={cls('formFieldError', 'atlas-error')}>{errorText(error)}</span>
             {/each}
           </div>
         {:else}
@@ -113,7 +117,7 @@ function handleSubmit(event) {
               />
             {/if}
             {#each errors.filter((e) => e.param === f.key) as error (error.code)}
-              <span class={cls('formFieldError', 'atlas-error')}>{error.message}</span>
+              <span class={cls('formFieldError', 'atlas-error')}>{errorText(error)}</span>
             {/each}
           </label>
         {/if}
@@ -131,7 +135,7 @@ function handleSubmit(event) {
           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>
+          <span class={cls('formFieldError', 'atlas-error')}>{errorText(error)}</span>
         {/each}
       </label>
 
@@ -147,7 +151,7 @@ function handleSubmit(event) {
           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>
+          <span class={cls('formFieldError', 'atlas-error')}>{errorText(error)}</span>
         {/each}
       </label>
 
@@ -167,7 +171,7 @@ function handleSubmit(event) {
               >{/if}.
           </span>
           {#each errors.filter((e) => e.param === 'consent') as error (error.code)}
-            <span class={cls('formFieldError', 'atlas-error')}>{error.message}</span>
+            <span class={cls('formFieldError', 'atlas-error')}>{errorText(error)}</span>
           {/each}
         </label>
       {/if}

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { CaptchaController, FieldError, InstanceSettings } from '@atlasauth/js';
+import { type CaptchaController, type FieldError, type InstanceSettings } from '@atlasauth/js';
 declare const __propDef: {
     props: {
         /**

package/dist/context.d.ts

@@ -62,6 +62,14 @@ export interface AtlasClient extends AtlasStores {
     frontendApi: string;
     appearance?: Appearance;
     catalog: Catalog;
+    /**
+     * The language layer of `catalog` (the `localization` bundle, without the
+     * English defaults underneath; `EN_US` when none is set). Server errors are
+     * looked up here as `error.<reason>`, falling back to the server's message.
+     */
+    errorCatalog?: Catalog;
+    /** Sent to the Frontend API as `Accept-Language`: the `locale` tag of the `localization` bundle. */
+    locale?: string;
     /**
      * §5.3: a sign-in attempt handed back by an OAuth redirect that still needs a
      * second factor (no session was issued). Null in the ordinary case. `<SignIn>`

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, } from '@atlasauth/js';
+import { FapiClient, SignOutGuard, TokenCache, closeOAuthPopupAfterSignIn, completeOAuthPopupLanding, getProviderToken as fetchProviderToken, mapOAuthPopupPayload, msUntilRefresh, readExpiry, readRedirectResult, resolveFrontendApi, stripRedirectParams, catalogLocale, } 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. */
@@ -29,6 +29,8 @@ export function createAtlasClient(options) {
     });
     const doFetch = options.fetchImpl ?? (typeof fetch !== 'undefined' ? fetch : undefined);
     const catalog = options.localization ? withFallback(options.localization) : EN_US;
+    const errorCatalog = options.localization ?? EN_US;
+    const locale = catalogLocale(options.localization);
     const status = writable('loading');
     const user = writable(null);
     const session = writable(null);
@@ -168,7 +170,7 @@ export function createAtlasClient(options) {
         await refresh();
         return cache.get(5_000)?.jwt ?? null;
     }
-    const fapiClient = new FapiClient({ publishableKey, baseUrl, fetchImpl: doFetch });
+    const fapiClient = new FapiClient({ publishableKey, baseUrl, fetchImpl: doFetch, locale });
     function getProviderToken(provider) {
         return fetchProviderToken(fapiClient, provider);
     }
@@ -277,6 +279,8 @@ export function createAtlasClient(options) {
         frontendApi: baseUrl,
         appearance: options.appearance,
         catalog,
+        errorCatalog,
+        locale,
         pendingAttempt,
         status: { subscribe: status.subscribe },
         user: { subscribe: user.subscribe },

package/dist/i18n.js

@@ -76,6 +76,46 @@ export const EN_US = {
     'organization.roleLabel': 'Role',
     'error.generic': 'Something went wrong. Please try again.',
     'error.network': 'We could not reach the server. Check your connection.',
+    // Server errors, by the stable `reason` the Frontend API sends. Shown instead
+    // of the server's `message` (see `localizedErrorMessage` in @atlasauth/js).
+    'error.form_password_incorrect': 'Those credentials are incorrect.',
+    'error.form_code_incorrect': 'That code is incorrect.',
+    'error.form_code_already_used': 'That code has already been used. Wait for a new one.',
+    'error.form_code_expired': 'That code has expired. Request a new one.',
+    'error.form_code_max_attempts': 'Too many incorrect codes. Request a new code.',
+    'error.form_link_invalid': 'That sign-in link is invalid or has already been used.',
+    'error.form_identifier_not_found': "We couldn't find an account with those details.",
+    'error.form_identifier_exists': "There's already an account for this email. Sign in with {methods}.",
+    'error.form_password_pwned': 'This password has appeared in a known data breach. Please choose a different one.',
+    'error.form_password_too_short': 'Password must be at least {min_length} characters.',
+    'error.form_password_too_long': 'Password must be at most {max_length} characters.',
+    'error.form_password_requires_uppercase': 'Password must contain an uppercase letter.',
+    'error.form_password_requires_lowercase': 'Password must contain a lowercase letter.',
+    'error.form_password_requires_number': 'Password must contain a number.',
+    'error.form_password_requires_symbol': 'Password must contain a symbol.',
+    'error.form_password_not_allowed': 'That password is not allowed. Choose a different one.',
+    'error.form_password_contains_identifier': 'Password must not contain your email or username.',
+    'error.form_password_same_as_current': 'Your new password must be different from your current one.',
+    'error.form_password_reused': 'Your new password must not match any of your last {history_count} passwords.',
+    'error.password_expired': 'Your password has expired. Reset it to continue.',
+    'error.email_not_verified': 'Your email address is not verified yet. Verify it before signing in with your password.',
+    'error.sign_in_token_invalid': 'That sign-in token is invalid or has expired.',
+    'error.too_many_attempts': 'Too many failed attempts. Try again later.',
+    'error.too_many_requests': 'Too many requests. Please try again later.',
+    'error.captcha_required': 'Please complete the security check, then try again.',
+    'error.captcha_failed': "The security check didn't pass. Please try again.",
+    'error.captcha_unavailable': 'The security check is unavailable right now. Please try again later.',
+    'error.email_delivery_unavailable': "This app can't send email right now. Try another sign-in method or contact the app owner.",
+    'error.strategy_disabled': 'This sign-in method is not available for this app.',
+    'error.sign_up_restricted': 'Sign-up on this app is by invitation only.',
+    'error.waitlisted': "You're on the waitlist. We'll email you when a place opens up.",
+    'error.identifier_not_allowed': 'This email or phone number is not allowed on this app.',
+    'error.disposable_email_blocked': 'Sign-up with a disposable or temporary email address is not allowed.',
+    'error.sso_required': 'This organization requires signing in through single sign-on.',
+    'error.sign_ins_disabled': 'Sign-ins are temporarily disabled.',
+    'error.sign_ups_disabled': 'Sign-ups are temporarily disabled.',
+    'error.high_risk_blocked': 'This sign-in was blocked because it looked unusual.',
+    'error.sms_region_blocked': 'Text messages are not available for this phone number.',
 };
 /**
  * Look up a key and interpolate `{placeholders}`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlasauth/svelte",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "@atlasauth/design": "0.2.0",
+    "@atlasauth/js": "0.9.0",
     "@atlasauth/authz": "0.1.1",
-    "@atlasauth/js": "0.8.0",
     "@atlasauth/backend": "0.7.2"
   },
   "peerDependencies": {