Notion UIUse Account Settings
A React hook for integrating authentication into Notion's Settings Panel.
Installation
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:
| Property | Type | Description |
|---|---|---|
accountStore | AccountStore | The account store instance. |
actions | Partial<SettingsProviderProps> | Account settings actions: account, sessions, passkeys, connections |
See schema definitions for: