npm install -g pnpm
cd logto-source && pnpm install

Public API

Checkbox

import type { InputHTMLAttributes, Ref } from 'react';

type Props = {
  readonly size?: 'small' | 'default';
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>;

const Checkbox: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;

A controlled/uncontrolled checkbox input with a custom SVG icon overlay. Use it inside account settings forms where you need a styled checkbox that supports ref forwarding, disabled, and all standard <input> attributes except type and size.

ConfirmModal

import type { TFuncKey } from 'i18next';
import type { ReactNode } from 'react';

type ButtonType = string; // matches @experience/shared/components/Button ButtonType

type Props = {
  readonly isOpen: boolean;
  readonly title: TFuncKey;
  readonly children: ReactNode;
  readonly confirmText?: TFuncKey;        // default: 'action.continue'
  readonly confirmButtonType?: ButtonType; // default: 'primary'
  readonly cancelText?: TFuncKey;         // default: 'action.cancel'
  readonly isLoading?: boolean;
  readonly onConfirm: () => void;
  readonly onCancel: () => void;
};

export default function ConfirmModal(props: Props): JSX.Element;

A ReactModal-based confirmation dialog. Use it before destructive actions (delete account, unlink identity). Requires ReactModal.setAppElement to be called at app root with the #app DOM node.

CodeVerification

type TranslationKeys = {
  readonly title: TFuncKey;
  readonly description: TFuncKey;
  readonly prepareDescription: TFuncKey;
};

type Props = {
  readonly identifier?: string;
  readonly codeInputName: string;
  readonly translationKeys: TranslationKeys;
  readonly identifierLabelKey:
    | 'account_center.email_verification.email_label'
    | 'account_center.phone_verification.phone_label';
  readonly descriptionPropsBuilder?: (identifier: string) => Record<string, string>;
  readonly onBack?: () => void;
  readonly onSwitchMethod?: () => void;
  readonly hasAlternativeMethod?: boolean;
  readonly sendCode: (
    accessToken: string,
    identifier: string
  ) => Promise<{ verificationRecordId: string; expiresAt: string }>;
  readonly verifyCode: (
    accessToken: string,
    payload: { verificationRecordId: string; code: string; identifier: string }
  ) => Promise<unknown>;
};

export default function CodeVerification(props: Props): JSX.Element;

A full OTP verification flow component with 60-second resend cooldown. Use it whenever you need to verify an email or phone in the account center. Compose it by providing sendCode and verifyCode callbacks that call your backend API.

Working examples

Scenario - Rendering the Checkbox in a settings form

A settings page that collects a boolean user preference using the Logto-styled checkbox.

import React, { useState } from 'react';
import Checkbox from './logto-source/packages/account/src/components/Checkbox';

export function NotificationSettings() {
  const [emailNotifs, setEmailNotifs] = useState(false);

  return (
    <form>
      <label>
        <Checkbox
          size="default"
          checked={emailNotifs}
          onChange={(e) => setEmailNotifs(e.target.checked)}
        />
        Enable email notifications
      </label>
    </form>
  );
}

Scenario - Confirming a destructive action with ConfirmModal

Show a confirmation dialog before deleting a user's linked social account.

import React, { useState } from 'react';
import ReactModal from 'react-modal';
import ConfirmModal from './logto-source/packages/account/src/components/ConfirmModal';

ReactModal.setAppElement(document.querySelector<HTMLElement>('#app')!);

export function UnlinkSocialButton({ onUnlink }: { onUnlink: () => Promise<void> }) {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleConfirm = async () => {
    setLoading(true);
    await onUnlink();
    setLoading(false);
    setOpen(false);
  };

  return (
    <>
      <button onClick={() => setOpen(true)}>Unlink account</button>
      <ConfirmModal
        isOpen={open}
        title="account_center.unlink_account_title"
        confirmText="action.continue"
        confirmButtonType="danger"
        isLoading={loading}
        onConfirm={handleConfirm}
        onCancel={() => setOpen(false)}
      >
        This will permanently unlink your social account.
      </ConfirmModal>
    </>
  );
}

Scenario - Email verification with CodeVerification

Embed the OTP verification flow for email re-verification in your account settings page.

import React from 'react';
import EmailVerification from './logto-source/packages/account/src/components/EmailVerification';

// Wrap with the required providers (PageContextProvider, LoadingContextProvider)
// as defined in logto-source/packages/account/src/Providers/

export function AccountEmailVerificationPage() {
  const handleBack = () => {
    window.history.back();
  };

  return (
    <EmailVerification
      onBack={handleBack}
      hasAlternativeMethod={false}
    />
  );
}

File walkthrough

• .changeset/ - Automated versioning: contains per-PR changeset YAML files consumed by @changesets/cli during release.
• .devcontainer/ - VS Code Remote Container definition for a reproducible dev environment.
• .github/ - All GitHub Actions workflows including integration tests, alteration compatibility checks, and release automation.
• .scripts/ - Internal tooling: database comparison, ESLint report merging, package publishing, and integration test bootstrapping.
• .vscode/ - Workspace-level VS Code settings and recommended extension list.
• assets/ - Logo and feature screenshot images referenced in README.
• end-user-flows/ - Human-readable flow specifications for each auth journey (sign-in, register, consent, forgot password).
• packages/ - The full monorepo: core (API server), experience (sign-in UI), account (account center UI), console (admin UI), cli, connectors, phrases, and more.
• package.json - Root package with workspace scripts for build, lint, and test.
• pnpm-workspace.yaml - Declares all packages/* as pnpm workspace members.
• tsup.shared.config.ts - Shared tsup bundler options reused across library packages.
• vite.shared.config.ts - Shared Vite config reused across React app packages.
• docker-compose.yml - Runs Logto core + PostgreSQL for local development.
• render.yaml - Render.com deployment blueprint for one-click cloud hosting.

Common pitfalls and fixes

• @ac/ and @experience/ aliases unresolved: These are Vite/TypeScript aliases defined per-package. Add them to your tsconfig.json paths and Vite resolve.alias — see Project setup step 3.
• ReactModal.setAppElement warning: Must be called with the actual #app DOM node before rendering any ConfirmModal; call it once at app entry (see packages/account/src/index.tsx).
• pnpm required, not npm/yarn: The workspace uses pnpm-workspace.yaml and pnpm-specific features. Running npm install at repo root will fail; use pnpm install.
• PostgreSQL required for core: The packages/core server will not start without a running PostgreSQL instance. Use docker-compose.yml or set DB_URL to an existing instance.
• i18n TFuncKey type errors: ConfirmModal and CodeVerification accept i18next TFuncKey strings. Ensure your i18n setup includes the account_center and action namespaces from packages/phrases/ and packages/phrases-experience/.
• SVG imports (?react suffix): Components import SVGs as React components via ?react (Vite plugin). If using webpack, install and configure @svgr/webpack and replace the ?react query with your loader syntax.

Vibe-coding prompt template

I have the Logto open-source auth infrastructure monorepo copied into `./logto-source/`.
The integration guide is in `./logto-source/USAGE.md`.
The upstream package is `@logto/root` (logto_io_logto).

Please help me integrate Logto's account center UI components into my existing React + TypeScript project step by step:

1. Read `USAGE.md` and `logto-source/packages/account/src/components/` to understand all available components.
2. Set up the required TypeScript path aliases (`@ac/`, `@experience/`) in my `tsconfig.json` and Vite config.
3. Wire `ReactModal.setAppElement` in my app entry point.
4. Add the required i18n namespaces from `logto-source/packages/phrases/` to my i18next setup.
5. Wrap my account settings route with the `PageContextProvider` and `LoadingContextProvider` from `logto-source/packages/account/src/Providers/`.
6. Render `EmailVerification` on my `/account/verify-email` route using real `sendCode` and `verifyCode` callbacks that call my backend.
7. Add a `ConfirmModal` to my account deletion flow.
8. Show me any missing peer dependencies and how to install them.

Use only the real exports visible in `USAGE.md` and the source files. Do not invent APIs.

License and credit

Logto is licensed under the Mozilla Public License 2.0 (MPL-2.0) — see source/LICENSE. Upstream repository: https://github.com/logto-io/logto. Cloud hosted version: https://cloud.logto.io.

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

Hướng dẫn cài đặt đầy đủ và prompt tích hợp sẽ mở khóa sau khi mua.