@synqauth/react 0.3.0 → 0.4.0

package/README.md

@@ -40,7 +40,7 @@ To sign people in on your own page (own-UI sign-in, on for the app in the dashbo
 
 The hooks are `useSession()`, `useSignIn()`, `useUser()`, `useWallets()`, `useLinkedAccounts()`, `useAccountSessions()` and `useAuth()`. Every call answers `{ data, error }` and never throws, and a change clicked twice while it's under way is sent once.
 
-The components take Synq's look from `@synqauth/react/styles.css`: Molly's design for Synq, dark with teal actions and pill buttons, and a light counterpart when the page prefers light. Theme it with CSS variables (`--synq-color-primary`, `--synq-color-surface`, `--synq-radius`...; a button that is off takes `--synq-color-disabled`, `--synq-color-disabled-border` and `--synq-color-disabled-text`), or take none of it with `unstyled`. `<AccountManager>` shows the profile, the ways to sign in, passkeys, devices and deleting the account (`sections` picks and orders them); it offers to add the ways your brand turns on, as the account API lists them (`useLinkableMethods()`), and `linkMethods` narrows them. "Add a passkey" shows only where the brand offers passkeys, and makes one on Synq's add-passkey page; elsewhere passkeys are listed and removed, never added. Removing a way in, a wallet or the account asks first. `<SynqProvider messages>` puts their words in your app's language.
+The components take Synq's look from `@synqauth/react/styles.css`: Molly's design for Synq, dark with teal actions and pill buttons, and a light counterpart when the page prefers light. Theme it with CSS variables (`--synq-color-primary`, `--synq-color-surface`, `--synq-radius`...; a button that is off takes `--synq-color-disabled`, `--synq-color-disabled-border` and `--synq-color-disabled-text`), or take none of it with `unstyled`. Text sizes are a scale, `--synq-text-xs` to `--synq-text-3xl`: nothing under 13px, 14px for labels and notes, 16px for body text, inputs and buttons (`--synq-font-size`), and one step up from 1024px wide. `<AccountManager>` shows the profile, the ways to sign in, passkeys, devices and deleting the account (`sections` picks and orders them); it offers to add the ways your brand turns on, as the account API lists them (`useLinkableMethods()`), and `linkMethods` narrows them. "Add a passkey" shows only where the brand offers passkeys, and makes one on Synq's add-passkey page; elsewhere passkeys are listed and removed, never added. Removing a way in, a wallet or the account asks first. `<SynqProvider messages>` puts their words in your app's language.
 
 Plugins hold functions, which a server component can't pass: an app with plugins wraps `SynqProvider` in a client component of its own.
 

package/dist/index.d.ts

@@ -20,6 +20,16 @@ interface SignInProblem {
   readonly message: string;
   /** Seconds to wait first, when Synq said. */
   readonly retryAfter?: number;
+  /**
+   * For `unavailable` (AERO-2757): what the route mount answered, so the
+   * words can tell the person's connection from the app's or Synq's side:
+   * `network_error` when nothing answered, else the mount's own code
+   * (`forbidden`, `origin_mismatch`, `server_error`…), with its status.
+   */
+  readonly cause?: string;
+  readonly status?: number;
+  /** The request's id, to quote to support, when the mount said. */
+  readonly requestId?: string;
 }
 /** What only the hosted page can do for this sign-in, and what to take there. */
 interface SignInHandover {
@@ -492,6 +502,8 @@ interface SynqMessages {
   /** Under a wallet in the picker. */
   readonly walletDetected: string;
   readonly noWalletHere: string;
+  /** The button under that: reload once a wallet is installed. */
+  readonly reload: string;
   /** Signing in on the brand's hosted page instead, where only it can. */
   readonly useSignInPage: string;
   readonly moreOptions: string;
@@ -509,6 +521,26 @@ interface SynqMessages {
   /** A sign-in that couldn't reach the app's server or Synq. */
   readonly signInOffline: string;
   readonly signInFailed: string;
+  /** `<SessionError>`: the app couldn't tell whether anyone is signed in. */
+  readonly sessionUnknown: string;
+  readonly retry: string;
+  /**
+   * Sign-in broke on the app's or Synq's side (AERO-2757): a server error, a
+   * route mount set up wrong, an app Synq refuses. Never the person's doing.
+   */
+  readonly signInBroken: string;
+  /** Synq's sign-in is down for a moment (`temporarily_unavailable`). */
+  readonly signInDown: string;
+  /** The sign-in expired, or finished in another tab (`unknown_state`). */
+  readonly signInStale: string;
+  /** The person left the sign-in before it finished. */
+  readonly signInCanceled: string;
+  /** This account can't use this app (a refusal that came back from the hosted page). */
+  readonly signInRefused: string;
+  /** Synq couldn't read the person's wallets for the app's token gates. */
+  readonly walletsUnchecked: string;
+  /** The app's server takes changes from another address than the page's (`origin_mismatch`). */
+  readonly signInOtherOrigin: string;
   readonly tryAgain: string;
   readonly securedBy: string;
   /** A first sign-in's greeting, with their first name when known. */
@@ -537,6 +569,8 @@ interface SynqMessages {
   readonly showing: string;
   readonly accountSettings: string;
   readonly signOutFailed: string;
+  /** Signing out failed while offline: the person is still signed in. */
+  readonly signOutOffline: string;
   readonly usernamePlaceholder: string;
   readonly checking: string;
   /** The connected wallet, when it isn't on their profile. */
@@ -555,6 +589,8 @@ interface SynqMessages {
   readonly confirmItsYou: string;
   readonly onlyWayIn: string;
   readonly walletInUse: string;
+  /** A wallet on another profile that can't move here (its only way in, or the brand doesn't move them). */
+  readonly walletOnOtherProfile: string;
   readonly moveHere: string;
   readonly linked: string;
   readonly link: string;
@@ -1081,13 +1117,33 @@ export declare function SignedOut({ children }: {
   readonly children?: ReactNode;
 }): ReactNode;
 //#endregion
+//#region src/components/SessionError.d.ts
+/** What `SessionError` takes: its look, and its own words in place of the default. */
+interface SessionErrorProps extends SynqStyleProps {
+  /** What it says, with its own retry: the default line and a Retry button otherwise. */
+  readonly children?: ReactNode;
+}
+/**
+ * Shown only while the app couldn't tell whether anyone is signed in (the
+ * route mount answered an error, or nothing): `<SignedIn>` and
+ * `<SignedOut>` both show nothing then, so a header built on them would
+ * show neither (AERO-2757). It says so, with a one-tap retry, and tells
+ * the app's developers in the console once.
+ */
+export declare function SessionError({ unstyled, className, children }: SessionErrorProps): ReactNode;
+//#endregion
 //#region src/components/SignInButton.d.ts
 /** What `SignInButton` takes: the sign-in's options, its look and its words. */
 interface SignInButtonProps extends SignInOptions, SynqStyleProps {
   /** Its label: the provider's `messages.signIn` by default. */
   readonly children?: ReactNode;
 }
-/** A button that sends the browser to sign in, through the app's route mount. */
+/**
+ * A button that sends the browser to sign in, through the app's route mount.
+ * A press shows at once (AERO-2757): busy, and "Taking you to sign in…" while
+ * the browser leaves; a popup sign-in that fails says why beside it, never
+ * silently, and the person who closed it on purpose hears nothing.
+ */
 export declare function SignInButton({ unstyled, className, children, ...options }: SignInButtonProps): ReactNode;
 //#endregion
 //#region src/components/SignInForm.d.ts
@@ -1615,4 +1671,4 @@ export declare function WalletLayerProvider({ value, children }: {
 /** The wallet layer lent to this component (`WalletLayerProvider`), or null when there is none. */
 export declare function useWalletLayer(): WalletLayer | null;
 //#endregion
-export { type AccountManagerProps, Card as AccountPanelCard, type AccountPanelCardProps, type AccountPanelDialogProps, type AccountPanelGrabberProps, type AccountPanelLayout, LinkRow as AccountPanelLinkRow, type AccountPanelLinkRowProps, Linked as AccountPanelLinked, type AccountPanelLinkedProps, type AccountPanelPending, type AccountPanelProps, Row as AccountPanelRow, type AccountPanelRowProps, type AccountPanelSection, type AccountPanelTriggerProps, Username as AccountPanelUsername, type AccountPanelUsernameProps, type AccountPanelView, Wallets as AccountPanelWallets, type AccountPanelWalletsProps, type AccountSection, type AccountSession, type ApiKey, type ApiKeyInput, type AvatarFallback, type AvatarMomentProps, type AvatarProps, type AvatarSettings, type AvatarSource, type HandoffOptions, type KeyableApi, type LastUsedMethod, type LinkStatus, type LinkableMethod, type LinkedAccount, type NewApiKey, type OneTimeCodeInputProps, type Passkey, type Profile, type ProfileUpdate, type ReauthenticateOptions, type RedirectKind, type RedirectResult, type SessionStatus, type SignInButtonProps, type SignInDisplay, type SignInDone, type SignInEvent, type SignInFormProps, type SignInHandover, type SignInMethod, type SignInMethodInfo, type SignInMethods, type SignInOptions, type SignInPartProps, type SignInProblem, type SignInStep, type SignOutOptions, type SynqClientPlugin, type SynqMessages, type SynqMountRequest, type SynqProviderProps, type SynqResult, type SynqSessionInfo, type SynqStyleProps, type SynqUser, type UseAccountData, type UseAccountPanel, type UseAccountPanelOptions, type UseAuth, type UseAvatar, type UseLink, type UseRedirectResult, type UseSession, type UseSignIn, type UseSignInEvent, type UseSignInMethods, type UseSignInOptions, type UseUser, type UseUsernameField, type UserButtonProps, type UserMetadata, type UsernameCode, type UsernameStatus, type Wallet, type WalletAppInfo, type WalletLayer, type WalletManagerProps, type WalletRequestTarget, type WalletSignedIn };
+export { type AccountManagerProps, Card as AccountPanelCard, type AccountPanelCardProps, type AccountPanelDialogProps, type AccountPanelGrabberProps, type AccountPanelLayout, LinkRow as AccountPanelLinkRow, type AccountPanelLinkRowProps, Linked as AccountPanelLinked, type AccountPanelLinkedProps, type AccountPanelPending, type AccountPanelProps, Row as AccountPanelRow, type AccountPanelRowProps, type AccountPanelSection, type AccountPanelTriggerProps, Username as AccountPanelUsername, type AccountPanelUsernameProps, type AccountPanelView, Wallets as AccountPanelWallets, type AccountPanelWalletsProps, type AccountSection, type AccountSession, type ApiKey, type ApiKeyInput, type AvatarFallback, type AvatarMomentProps, type AvatarProps, type AvatarSettings, type AvatarSource, type HandoffOptions, type KeyableApi, type LastUsedMethod, type LinkStatus, type LinkableMethod, type LinkedAccount, type NewApiKey, type OneTimeCodeInputProps, type Passkey, type Profile, type ProfileUpdate, type ReauthenticateOptions, type RedirectKind, type RedirectResult, type SessionErrorProps, type SessionStatus, type SignInButtonProps, type SignInDisplay, type SignInDone, type SignInEvent, type SignInFormProps, type SignInHandover, type SignInMethod, type SignInMethodInfo, type SignInMethods, type SignInOptions, type SignInPartProps, type SignInProblem, type SignInStep, type SignOutOptions, type SynqClientPlugin, type SynqMessages, type SynqMountRequest, type SynqProviderProps, type SynqResult, type SynqSessionInfo, type SynqStyleProps, type SynqUser, type UseAccountData, type UseAccountPanel, type UseAccountPanelOptions, type UseAuth, type UseAvatar, type UseLink, type UseRedirectResult, type UseSession, type UseSignIn, type UseSignInEvent, type UseSignInMethods, type UseSignInOptions, type UseUser, type UseUsernameField, type UserButtonProps, type UserMetadata, type UsernameCode, type UsernameStatus, type Wallet, type WalletAppInfo, type WalletLayer, type WalletManagerProps, type WalletRequestTarget, type WalletSignedIn };