@synqauth/react 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Aerosol
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,49 @@
-# Temporary Holding Version
+# @synqauth/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React hooks and components for Synq.
+
+Synq is customer identity for businesses: an OpenID Connect issuer for each of your brands, with Solana wallet, social, email and passkey sign-in. The documentation is at [docs.synq.build](https://docs.synq.build).
+
+This package is at 0.x and hasn't been published yet: its API can change in any release until Synq's first customer depends on it.
+
+## Quick start
+
+`@synqauth/react` talks to your app's own route mount, which `@synqauth/nextjs` serves, so the browser never holds a Synq token. Set that up first (its README), then give the pages that need the session a provider, in a route group's layout so the rest of the app (marketing pages, say) stays static:
+
+```tsx
+// app/(app)/layout.tsx
+import { SynqProvider } from '@synqauth/react'
+import { synq } from '@/lib/synq'
+
+export default async function AppLayout({ children }: { children: React.ReactNode }) {
+  return <SynqProvider initialSession={await synq.getSession()}>{children}</SynqProvider>
+}
+```
+
+```tsx
+// app/(app)/settings/page.tsx
+import '@synqauth/react/styles.css'
+import { AccountManager, UserButton, WalletManager } from '@synqauth/react'
+
+export default function Settings() {
+  return (
+    <>
+      <UserButton accountHref="/settings" />
+      <AccountManager />
+      <WalletManager />
+    </>
+  )
+}
+```
+
+To sign people in on your own page (own-UI sign-in, on for the app in the dashboard), render `<SignInForm returnTo="/dashboard" />`, lay out its parts (`PasskeyButton`, `PasswordForm`, `EmailCodeForm`, `VerifyEmailForm`) your own way, or build your own form on `useSignIn()`. It offers a passkey where the browser can use the brand's on your page (Chrome and Edge 128+, Safari 18+, Firefox 152+), then an emailed code or a password. Anything only Synq's hosted page can do, such as a token gate, goes there.
+
+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`, themed with CSS variables (`--synq-color-primary`, `--synq-radius`...), or none with `unstyled`. `<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.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,575 @@
+
+import { InputHTMLAttributes, ReactNode } from "react";
+import { AccountComponents, ChallengeMethod, ChallengeProblem, DeniedReason, RedirectReason, SynqError } from "@synqauth/js";
+//#region src/sign-in.d.ts
+/** Where a sign-in is: what the form shows. */
+type SignInStep = 'start' | 'code' | 'verify-email' | 'done';
+/** What went wrong with the last step: branch on `code`, never on the English. */
+interface SignInProblem {
+  /**
+   * Synq's problem with the step (`wrong_credentials`, `wrong_code`…), or
+   * the sign-in's own: `expired` (it timed out: start again), `refused`
+   * (this person can't sign in here: see `reason`), `passkey_cancelled`
+   * (the browser's passkey prompt closed with none), `unavailable` (the
+   * app's server couldn't be reached, or failed).
+   */
+  readonly code: ChallengeProblem | 'expired' | 'refused' | 'passkey_cancelled' | 'unavailable';
+  /** Why, when `refused`. */
+  readonly reason?: DeniedReason;
+  /** Synq's words for it, in English: show your own for `code` in another language. */
+  readonly message: string;
+  /** Seconds to wait first, when Synq said. */
+  readonly retryAfter?: number;
+}
+/** What only the hosted page can do for this sign-in, and what to take there. */
+interface SignInHandover {
+  readonly reason: RedirectReason;
+  readonly method?: ChallengeMethod;
+  readonly loginHint?: string;
+}
+/** What `useSignIn()` takes: where to go once signed in, or what to do instead. */
+interface UseSignInOptions {
+  /** Where to go once signed in: the page it started on by default. */
+  readonly returnTo?: string;
+  /** Called once signed in, with where to go, instead of going there. */
+  readonly onSignedIn?: (returnTo: string) => void;
+}
+/** What `useSignIn()` answers: the sign-in's step, what went wrong, and each method's steps. */
+interface UseSignIn {
+  readonly step: SignInStep;
+  /** Whether a step is on its way to Synq. */
+  readonly pending: boolean;
+  readonly problem: SignInProblem | null;
+  /** The address a code went to. */
+  readonly email: string | undefined;
+  /** Whether a new account's address may be left unverified for now. */
+  readonly canSkip: boolean;
+  /** Set when only the hosted page can go on: `continueOnHostedPage()` goes there. */
+  readonly handover: SignInHandover | null;
+  readonly password: {
+    readonly signIn: (input: {
+      email: string;
+      password: string;
+    }) => Promise<void>;
+    readonly signUp: (input: {
+      email: string;
+      password: string;
+    }) => Promise<void>;
+  };
+  readonly emailCode: {
+    readonly send: (email: string) => Promise<void>;
+    readonly verify: (code: string) => Promise<void>;
+    readonly resend: () => Promise<void>;
+  };
+  readonly passkey: {
+    /** Whether this browser takes the issuer's passkeys on this page (related origins). */
+    readonly supported: boolean;
+    /** Whether it offers them in the address field as the person types (conditional UI). */
+    readonly autofill: boolean;
+    /**
+     * On a brand's custom domain, the brand's own Synq host, whose passkeys
+     * work too (`signIn({ related: true })`): known after the first passkey
+     * prompt.
+     */
+    readonly relatedDomain: string | null;
+    readonly signIn: (options?: {
+      related?: boolean;
+    }) => Promise<void>;
+    /** Offers passkeys in the address field (`autocomplete="username webauthn"`): call once it's on the page. */
+    readonly startAutofill: () => Promise<void>;
+  };
+  readonly verifyEmail: {
+    readonly verify: (code: string) => Promise<void>;
+    readonly resend: () => Promise<void>;
+    readonly skip: () => Promise<void>;
+  };
+  /** Goes on at the hosted page, with the method and address Synq named, or these. */
+  readonly continueOnHostedPage: (options?: {
+    method?: ChallengeMethod;
+    loginHint?: string;
+  }) => void;
+  /** Drops the sign-in under way and goes back to the first step. */
+  readonly startOver: () => Promise<void>;
+}
+/** One sign-in on the app's own screens, through the route mount's `sign-in/flow`. */
+export declare function useSignIn(options?: UseSignInOptions): UseSignIn;
+//#endregion
+//#region src/messages.d.ts
+/** Every word the components show, for `<SynqProvider messages>`; any left out stay English. */
+interface SynqMessages {
+  readonly signIn: string;
+  readonly signOut: string;
+  readonly manageAccount: string;
+  /** What to call someone with no name, username or email address. */
+  readonly account: string;
+  readonly loading: string;
+  readonly save: string;
+  readonly saving: string;
+  readonly saved: string;
+  readonly cancel: string;
+  readonly profile: string;
+  readonly name: string;
+  readonly username: string;
+  readonly waysToSignIn: string;
+  readonly remove: string;
+  /** The label of the button that stops a way signing them in. */
+  readonly removeAccount: (provider: string, subject: string) => string;
+  /** What each way to sign in is called, by provider: `email`, `solana`, `google`... */
+  readonly providers: Readonly<Record<string, string>>;
+  readonly devices: string;
+  /** A session whose sign-in time Synq didn't keep. */
+  readonly signedIn: string;
+  /** The mark on the session this page is signed in with (`current`). */
+  readonly thisDevice: string;
+  /** The label of the button that signs a device out. */
+  readonly signOutDevice: (when: string) => string;
+  readonly apps: (count: number) => string;
+  readonly wallets: string;
+  readonly noWallets: string;
+  readonly primary: string;
+  readonly rename: string;
+  readonly renameWallet: (name: string) => string;
+  readonly makePrimary: string;
+  readonly makeWalletPrimary: (name: string) => string;
+  /** The label of the field naming a wallet. */
+  readonly walletName: (address: string) => string;
+  /** API keys for the brand's APIs (AERO-1693). */
+  readonly apiKeys: string;
+  readonly noApiKeys: string;
+  readonly newApiKey: string;
+  /** The field picking which of the brand's APIs a key is for. */
+  readonly api: string;
+  /** The scopes a key may use. */
+  readonly keyScopes: string;
+  readonly expires: string;
+  readonly never: string;
+  readonly inDays: (days: number) => string;
+  readonly makeKey: string;
+  readonly makingKey: string;
+  readonly revoke: string;
+  /** The label of the button that revokes a key. */
+  readonly revokeKey: (name: string) => string;
+  readonly revoked: string;
+  readonly expired: string;
+  readonly lastUsed: (when: string) => string;
+  readonly neverUsed: string;
+  readonly expiresOn: (when: string) => string;
+  /** Over the key just made, the only time it shows. */
+  readonly copyKeyNow: string;
+  readonly copy: string;
+  readonly copied: string;
+  readonly done: string;
+  /** When making a key needs a sign-in from the last few minutes. */
+  readonly keyNeedsFreshSignIn: string;
+  readonly signInAgain: string;
+  /** `<SignInForm>` (AERO-1411): sign-in on the app's own screens. */
+  readonly email: string;
+  readonly password: string;
+  readonly signInWithPasskey: string;
+  /** The button for a passkey made at the brand's own Synq host, on its custom domain. */
+  readonly passkeyFor: (domain: string) => string;
+  readonly emailMeACode: string;
+  /** Between a passkey and the other ways. */
+  readonly or: string;
+  readonly code: string;
+  readonly codeSentTo: (email: string) => string;
+  /** Over the code that proves a new account's address. */
+  readonly verifyYourEmail: (email: string) => string;
+  readonly verify: string;
+  readonly sendAnotherCode: string;
+  readonly useAnotherWay: string;
+  readonly skipForNow: string;
+  /** The link to the hosted page's password step, where resetting one lives. */
+  readonly forgotPassword: string;
+  readonly createAccount: string;
+  /** Before the link to the sign-up screen. */
+  readonly newHere: string;
+  /** Before the link back to the sign-in screen. */
+  readonly haveAnAccount: string;
+  /** While the browser goes to the hosted page for what only it can do. */
+  readonly continuingToSignIn: string;
+  readonly tryAgainIn: (seconds: number) => string;
+  /** What went wrong with a step, by `SignInProblem.code`; Synq's English for any left out. */
+  readonly signInProblems: Readonly<Partial<Record<SignInProblem['code'], string>>>;
+  /** Why this person can't sign in here, by `SignInProblem.reason`. */
+  readonly signInRefusals: Readonly<Partial<Record<DeniedReason, string>>>;
+}
+/** The components' English words, which an app's own messages override one by one. */
+export declare const DEFAULT_MESSAGES: SynqMessages;
+//#endregion
+//#region src/types.d.ts
+/** A call's outcome: its data, or the `SynqError` it failed with (branch on `error.code`). */
+type SynqResult<T> = {
+  readonly data: T;
+  readonly error: null;
+} | {
+  readonly data: null;
+  readonly error: SynqError;
+};
+/** A signed-in person, from the ID token Synq issued at sign-in. */
+interface SynqUser {
+  /** The user's id at the brand (`usr_…`). */
+  readonly sub: string;
+  readonly email?: string;
+  readonly email_verified?: boolean;
+  readonly name?: string;
+  readonly preferred_username?: string;
+  readonly picture?: string;
+  /** When they signed in, in seconds since the epoch. */
+  readonly auth_time?: number;
+  /** How they signed in: `pwd`, `otp`, `wallet`, `hwk`, `fed`... */
+  readonly amr?: readonly string[];
+  readonly [claim: string]: unknown;
+}
+/** Who is signed in, as the app's server tells the browser: `await synq.getSession()`, or the route mount's `session`. */
+interface SynqSessionInfo {
+  readonly user: SynqUser | null;
+  /** When the session's main access token expires, in seconds since the epoch. */
+  readonly expiresAt: number | null;
+}
+/**
+ * What the brand keeps for the person (the account API's `metadata`).
+ * Augment it to type what the app reads:
+ *
+ * ```ts
+ * declare module '@synqauth/react' {
+ *   interface UserMetadata {
+ *     plan?: 'free' | 'pro'
+ *   }
+ * }
+ * ```
+ */
+interface UserMetadata {
+  readonly [field: string]: unknown;
+}
+/**
+ * The ways a brand signs people in, as `synq_method` names them: the hosted
+ * page goes straight to one. A brand's own connection joins them the same way:
+ *
+ * ```ts
+ * declare module '@synqauth/react' {
+ *   interface SignInMethods {
+ *     okta: true
+ *   }
+ * }
+ * ```
+ */
+interface SignInMethods {
+  readonly password: true;
+  readonly email: true;
+  readonly passkey: true;
+  readonly wallet: true;
+  readonly google: true;
+  readonly microsoft: true;
+  readonly discord: true;
+}
+/** One of the brand's sign-in methods. */
+type SignInMethod = Extract<keyof SignInMethods, string>;
+/** How to send the person to sign in. */
+interface SignInOptions {
+  /** Where to come back to: a path on the app, the current page by default. */
+  readonly returnTo?: string;
+  /** Go straight to one sign-in method. */
+  readonly method?: SignInMethod;
+  /** Fills in their email address. */
+  readonly loginHint?: string;
+  readonly prompt?: 'login' | 'none' | 'consent' | 'select_account';
+  /** Ask them to sign in again when their last sign-in is older than this many seconds. */
+  readonly maxAge?: number;
+  /** Offer a new passkey once they've signed in again. */
+  readonly intent?: 'add-passkey';
+}
+/** The person's profile at the brand. */
+type Profile = AccountComponents['schemas']['Profile'];
+/** Changes to it: only the fields given change, and `null` clears one. */
+type ProfileUpdate = AccountComponents['schemas']['ProfileUpdate'];
+/** A Solana wallet the person signs in with. */
+type Wallet = AccountComponents['schemas']['Wallet'];
+/** A way the person signs in: their email address, a wallet, a Google account... */
+type LinkedAccount = AccountComponents['schemas']['Identity'];
+/** One of the person's sessions at the brand, on some device. */
+type AccountSession = AccountComponents['schemas']['Session'];
+/** One of the person's API keys for the brand's APIs (AERO-1693): never the key itself. */
+type ApiKey = AccountComponents['schemas']['UserApiKey'];
+/** A key just made: `key` is the key itself, in this answer only. */
+type NewApiKey = AccountComponents['schemas']['NewUserApiKey'];
+/** What making an API key takes: the API's identifier, a name, its scopes, an expiry if any. */
+type ApiKeyInput = AccountComponents['schemas']['UserApiKeyCreate'];
+/** One of the brand's APIs the person may make keys for, with the scopes it defines. */
+type KeyableApi = AccountComponents['schemas']['KeyableApi'];
+//#endregion
+//#region src/mount.d.ts
+/** Calls the app's route mount: `request('session')`, `request('account/v1/profile', { method: 'PATCH', ... })`. */
+type SynqMountRequest = (path: string, init?: RequestInit) => Promise<Response>;
+/**
+ * A browser plugin: actions over its server plugin's routes. The same shape
+ * as `@synqauth/nextjs/client`'s `defineSynqClientPlugin`, so its plugins
+ * work here as they are.
+ */
+interface SynqClientPlugin<Id extends string = string, Actions = unknown> {
+  readonly id: Id;
+  actions(request: SynqMountRequest): Actions;
+}
+//#endregion
+//#region src/store.d.ts
+/** `error` when the app couldn't be asked who is signed in, and nothing is known yet: the provider asks again, waiting longer each time. */
+type SessionStatus = 'loading' | 'signed-in' | 'signed-out' | 'error';
+//#endregion
+//#region src/provider.d.ts
+/** What `SynqProvider` takes: the server's session, the route mount, the words and the plugins. */
+interface SynqProviderProps {
+  /**
+   * Who is signed in, from the server: `await synq.getSession()` in a layout.
+   * With it the first render needs no request; without it the provider asks
+   * the route mount once it mounts.
+   */
+  readonly initialSession?: SynqSessionInfo | null;
+  /** The route mount: `/api/auth` by default. */
+  readonly basePath?: string;
+  /**
+   * Browser plugins (`defineSynqClientPlugin`), their actions on
+   * `useAuth().plugins` and `usePlugin()`. Plugins hold functions, so a
+   * server component can't pass them: wrap the provider in a client
+   * component of the app's own.
+   */
+  readonly plugins?: readonly SynqClientPlugin[];
+  /** How to reach the mount: the browser's `fetch` by default. */
+  readonly fetch?: typeof fetch;
+  /** How to go to sign-in and sign-out pages: `location.assign` by default. */
+  readonly navigate?: (url: string) => void;
+  /** The components' words, in the app's language: any left out are English. */
+  readonly messages?: Partial<SynqMessages>;
+  readonly children?: ReactNode;
+}
+/** Synq for the components under it. Its route mount and `fetch` are read once, when it mounts. */
+export declare function SynqProvider({ initialSession, basePath, plugins, fetch: fetcher, navigate, messages, children }: SynqProviderProps): ReactNode;
+/** A browser plugin's actions, typed by the plugin, which must be one of the provider's `plugins`. */
+export declare function usePlugin<Actions>(plugin: SynqClientPlugin<string, Actions>): Actions;
+//#endregion
+//#region src/hooks.d.ts
+/** What `useSession()` answers: who is signed in, and whether the app said yet. */
+interface UseSession {
+  /** `loading` until the app says who is signed in; never with `initialSession`. */
+  readonly status: SessionStatus;
+  readonly isLoaded: boolean;
+  readonly isSignedIn: boolean;
+  readonly user: SynqUser | null;
+  /** When the session's main access token expires; the app's server refreshes it. */
+  readonly expiresAt: number | null;
+  /** Why the app couldn't say who is signed in, the last time it was asked. */
+  readonly error: SynqError | null;
+  /** Asks the app again. */
+  readonly refresh: () => Promise<void>;
+}
+/** Who is signed in. It reads the session alone, and asks the account API nothing. */
+export declare function useSession(): UseSession;
+/** What the account hooks (`useWallets`, `useLinkedAccounts`, `useAccountSessions`) answer: the data, the error, and whether it loaded. */
+interface UseAccountData<T> {
+  readonly data: T | null;
+  readonly error: SynqError | null;
+  /** While it is read, or about to be: someone is signed in and nothing has come back yet. */
+  readonly isLoading: boolean;
+  /** Reads it again. */
+  readonly reload: () => Promise<void>;
+}
+/** The person's wallets, the primary one marked. */
+export declare function useWallets(): UseAccountData<readonly Wallet[]>;
+/** The ways the person signs in: their email address, wallets, social accounts. */
+export declare function useLinkedAccounts(): UseAccountData<readonly LinkedAccount[]>;
+/** The person's sessions at the brand, on every device. */
+export declare function useAccountSessions(): UseAccountData<readonly AccountSession[]>;
+/** The person's API keys for the brand's APIs (AERO-1693), revoked and expired ones too. */
+export declare function useApiKeys(): UseAccountData<readonly ApiKey[]>;
+/** The brand's APIs that let the person make keys, with the scopes each defines. */
+export declare function useKeyableApis(): UseAccountData<readonly KeyableApi[]>;
+/** What `useUser()` answers: the person's claims, profile and metadata, and `update` for the profile. */
+interface UseUser {
+  readonly isLoaded: boolean;
+  readonly isSignedIn: boolean;
+  /** Who they are, from the ID token: there at once. */
+  readonly user: SynqUser | null;
+  /** Their profile at the brand, read from the account API. */
+  readonly profile: Profile | null;
+  /** What the brand keeps for them: `UserMetadata`, augmented by the app. */
+  readonly metadata: UserMetadata | null;
+  readonly isLoading: boolean;
+  readonly error: SynqError | null;
+  /** Changes their profile: only the fields given, `null` clearing one. */
+  readonly update: (changes: ProfileUpdate) => Promise<SynqResult<Profile>>;
+  /** Reads the profile and metadata again. */
+  readonly reload: () => Promise<void>;
+}
+/** The signed-in person: their ID token's claims at once, then their profile and metadata. */
+export declare function useUser(): UseUser;
+/** What `useAuth()` answers: `signIn`, `signOut`, `link`, and the account's wallets, ways to sign in and sessions. */
+interface UseAuth {
+  readonly isLoaded: boolean;
+  readonly isSignedIn: boolean;
+  readonly userId: string | null;
+  /** Sends the browser to sign in, coming back to `returnTo` (this page by default). */
+  readonly signIn: (options?: SignInOptions) => void;
+  /** Where `signIn` sends the browser: the route mount's `sign-in`. */
+  readonly signInUrl: (options?: SignInOptions) => string;
+  /** Ends the session in the app and at the brand, then goes where the brand sends the browser. */
+  readonly signOut: () => Promise<SynqResult<null>>;
+  /**
+   * Adds a way to sign in to the person's account: Synq asks them to sign in
+   * again, then for `method`, and the browser comes back to `returnTo` (this
+   * page by default). Answers only when it can't start: the method isn't
+   * offered, or they have as many ways in as one may.
+   */
+  readonly link: (method: SignInMethod, options?: {
+    returnTo?: string;
+  }) => Promise<SynqResult<null>>;
+  readonly wallets: {
+    readonly list: () => Promise<SynqResult<readonly Wallet[]>>;
+    /** Names a wallet; `null` takes its name away. */
+    readonly rename: (id: string, label: string | null) => Promise<SynqResult<Wallet>>;
+    /** Makes it their primary wallet, in place of the one that was. */
+    readonly setPrimary: (id: string) => Promise<SynqResult<Wallet>>;
+  };
+  /** The ways they sign in. */
+  readonly accounts: {
+    readonly list: () => Promise<SynqResult<readonly LinkedAccount[]>>;
+    /** Stops a way signing them in. */
+    readonly unlink: (id: string) => Promise<SynqResult<null>>;
+  };
+  readonly sessions: {
+    readonly list: () => Promise<SynqResult<readonly AccountSession[]>>;
+    /** Signs that device out. */
+    readonly end: (id: string) => Promise<SynqResult<null>>;
+  };
+  /** Their API keys for the brand's own APIs (AERO-1693). */
+  readonly apiKeys: {
+    readonly list: () => Promise<SynqResult<readonly ApiKey[]>>;
+    /**
+     * Makes a key: its `key` is in this answer only, so show it once. Making
+     * one needs a sign-in from the last 5 minutes (`fresh_sign_in_required`:
+     * `signIn({ maxAge: 300 })`).
+     */
+    readonly create: (input: ApiKeyInput) => Promise<SynqResult<NewApiKey>>;
+    /** Revokes a key at once. */
+    readonly revoke: (id: string) => Promise<SynqResult<null>>;
+  };
+  /** Each browser plugin's actions, by its id (`usePlugin` types them). */
+  readonly plugins: Readonly<Record<string, unknown>>;
+}
+/** Everything the signed-in person can do. */
+export declare function useAuth(): UseAuth;
+//#endregion
+//#region src/components/SignedIn.d.ts
+/** Shows its children only while someone is signed in. It renders no element of its own. */
+export declare function SignedIn({ children }: {
+  readonly children?: ReactNode;
+}): ReactNode;
+//#endregion
+//#region src/components/SignedOut.d.ts
+/** Shows its children only once the app has said nobody is signed in. It renders no element of its own. */
+export declare function SignedOut({ children }: {
+  readonly children?: ReactNode;
+}): ReactNode;
+//#endregion
+//#region src/components/styling.d.ts
+/** What every component takes for its look: Synq's classes, or `unstyled`. */
+interface SynqStyleProps {
+  /** The same elements, roles and labels, with none of Synq's classes: the app styles them. */
+  readonly unstyled?: boolean;
+  /** Added to the component's outer element. */
+  readonly className?: string;
+}
+//#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. */
+export declare function SignInButton({ unstyled, className, children, ...options }: SignInButtonProps): ReactNode;
+//#endregion
+//#region src/components/SignInForm.d.ts
+/** What `SignInForm` takes: which ways to offer, where it starts, and its look. */
+interface SignInFormProps extends UseSignInOptions, SynqStyleProps {
+  /** The ways to offer, of those the app has on: all three by default. */
+  readonly methods?: readonly ChallengeMethod[];
+  /** Which screen it opens on. People can switch, where passwords are on. */
+  readonly screen?: 'sign-in' | 'sign-up';
+}
+/** What each part of the form takes: the sign-in it works on, and its look. */
+interface SignInPartProps extends SynqStyleProps {
+  /** The sign-in, from `useSignIn()`. */
+  readonly signIn: UseSignIn;
+}
+/**
+ * Sign-in on the app's own page: a passkey where the browser takes the
+ * issuer's, then an emailed code or a password, and the code or the new
+ * address's proof after. Whatever only the hosted page can do, it goes
+ * there for.
+ */
+export declare function SignInForm({ methods, screen: initialScreen, returnTo, onSignedIn, unstyled, className }: SignInFormProps): ReactNode;
+/** The button for a passkey: the brand's, or with `related` its own host's on its custom domain. */
+export declare function PasskeyButton({ signIn, related, children, unstyled, className }: SignInPartProps & {
+  readonly related?: boolean;
+  readonly children?: ReactNode;
+}): ReactNode;
+/**
+ * An email address and a password: signs in, or with `screen="sign-up"`
+ * makes an account. With `emailCode`, it offers a code by email for the
+ * same address too.
+ */
+export declare function PasswordForm({ signIn, screen, emailCode, autofill, unstyled, className }: SignInPartProps & {
+  readonly screen?: 'sign-in' | 'sign-up';
+  readonly emailCode?: boolean;
+  /** Offer passkeys in the address field as the person types, where the browser can. */
+  readonly autofill?: boolean;
+}): ReactNode;
+/** An emailed code: the address to send it to, then the code it held. */
+export declare function EmailCodeForm({ signIn, autofill, unstyled, className }: SignInPartProps & {
+  /** Offer passkeys in the address field as the person types, where the browser can. */
+  readonly autofill?: boolean;
+}): ReactNode;
+/** The code that proves a new account's address, or "Skip for now" where the brand allows. */
+export declare function VerifyEmailForm({ signIn, unstyled, className }: SignInPartProps): ReactNode;
+/** What `OneTimeCodeInput` takes: its label, its look, and any input attribute. */
+interface OneTimeCodeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'>, SynqStyleProps {
+  readonly label: ReactNode;
+}
+/** The field for an emailed code, named `code`: digits, filled from the message where the device can. */
+export declare function OneTimeCodeInput({ label, unstyled, className, ...input }: OneTimeCodeInputProps): ReactNode;
+//#endregion
+//#region src/components/UserButton.d.ts
+/** What `UserButton` takes: where its account link goes, and its look. */
+interface UserButtonProps extends SynqStyleProps {
+  /** The app's page with `<AccountManager>`, linked as "Manage account". */
+  readonly accountHref?: string;
+}
+/**
+ * The signed-in person's picture and name, showing a panel to manage their
+ * account or sign out: a disclosure (a button that shows and hides it), so
+ * its link and button are reached with Tab as anywhere else. Escape or a
+ * click elsewhere hides it. Nothing while nobody is signed in.
+ */
+export declare function UserButton({ unstyled, className, accountHref }: UserButtonProps): ReactNode;
+//#endregion
+//#region src/components/AccountManager.d.ts
+/** One part of `AccountManager`: the profile, the ways to sign in, the sessions, or the API keys. */
+type AccountSection = 'profile' | 'accounts' | 'sessions' | 'apiKeys';
+/** What `AccountManager` takes: which sections it shows, and its look. */
+interface AccountManagerProps extends SynqStyleProps {
+  /**
+   * The parts it shows, in this order: all four by default. The API keys
+   * show only where one of the brand's APIs lets people make keys, or the
+   * person has some.
+   */
+  readonly sections?: readonly AccountSection[];
+}
+/** Manage the signed-in person's account. Nothing while nobody is signed in. */
+export declare function AccountManager({ unstyled, className, sections }: AccountManagerProps): ReactNode;
+//#endregion
+//#region src/components/WalletManager.d.ts
+/** What `WalletManager` takes: its look. */
+type WalletManagerProps = SynqStyleProps;
+/** Manage the signed-in person's wallets. Nothing while nobody is signed in. */
+export declare function WalletManager({ unstyled, className }: WalletManagerProps): ReactNode;
+//#endregion
+export type { AccountManagerProps, AccountSection, AccountSession, ApiKey, ApiKeyInput, KeyableApi, LinkedAccount, NewApiKey, OneTimeCodeInputProps, Profile, ProfileUpdate, SessionStatus, SignInButtonProps, SignInFormProps, SignInHandover, SignInMethod, SignInMethods, SignInOptions, SignInPartProps, SignInProblem, SignInStep, SynqClientPlugin, SynqMessages, SynqMountRequest, SynqProviderProps, SynqResult, SynqSessionInfo, SynqStyleProps, SynqUser, UseAccountData, UseAuth, UseSession, UseSignIn, UseSignInOptions, UseUser, UserButtonProps, UserMetadata, Wallet, WalletManagerProps };