Notion UI
Documentation

Use Account Settings

A React hook for integrating authentication into Notion's Settings Panel.

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

Usage

Settings Panel

You can see Notion Authn for a full example.

function Settings() {
  const [tab, setTab] = useState<TabType>("account");
  const { accountStore, actions } = useAccountSettings(); 
  const settings = useMemo<SettingsStore>(
    () => ({
      account: accountStore,
      workspace: mockWorkspace,
    }),
    [accountStore],
  );
 
  return (
    <SettingsProvider
      settings={settings}
      {...actions} 
    >
      <SettingsPanel>
        <SettingsSidebar>
          <SettingsSidebarPreset tab={tab} onTabChange={setTab} />
        </SettingsSidebar>
        <SettingsContent>
          <SettingsBodyPreset tab={tab} onTabChange={setTab} />
        </SettingsContent>
      </SettingsPanel>
    </SettingsProvider>
  );
}

API Reference

useAccountSettings

Note

It should be used within the <AuthProvider> context.

It returns an object with the following properties:

PropertyTypeDescription
accountStoreAccountStoreThe account store instance.
actionsPartial<SettingsProviderProps>Account settings actions: account, sessions, passkeys, connections

See schema definitions for:

Previous

Login Form

Next

Use Workspace Settings

On this page