Use Settings Adapters

Installation

pnpm add @notion-kit/auth-ui

Supported Features

• Account settings
  • Change password
  • Logged in sessions
  • Passkeys management
  • Link social accounts
• Theme select
• Localization support for EN, DE, ES
• Timezone support
• Update/delete/leave workspace
• Members & scopes management
• Teamspaces management
• Billing & subscription management

Usage

Settings Panel

You can see Notion Authn for a full example.

import { useSettingsAdapters } from "@notion-kit/auth-ui"; 

function Settings() {
  const [tab, setTab] = useState<TabType>("account");
  const adapters = useSettingsAdapters(); 

  return (
    <SettingsProvider adapters={adapters}>
      <SettingsPanel>
        <SettingsSidebar>
          <SettingsSidebarPreset tab={tab} onTabChange={setTab} />
        </SettingsSidebar>
        <SettingsContent>
          <SettingsBodyPreset tab={tab} onTabChange={setTab} />
        </SettingsContent>
      </SettingsPanel>
    </SettingsProvider>
  );
}

API Reference

useSettingsAdapters

Returns a SettingsAdapters object containing domain-specific adapters for account, sessions, passkeys, connections, workspace, people, invitations, teamspaces, and billing.

Each adapter provides query (getAll) and mutation methods for its domain. All adapters are optional — include only the ones your application supports.

Individual Adapter Hooks

You can also use individual adapter hooks for more granular control:

See schema definitions for:

• SettingsAdapters
• AccountStore
• WorkspaceStore