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
• Custom emoji management
• Workspace icon upload

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, emoji, and billing.

It also provides an uploadFile handler for workspace icon uploads via Supabase Storage.

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
• BillingStore
• EmojiRow