Files
supabase/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.ts
Ali Waseem 0278672102 feat(studio): add Auth sub-page navigation chords (#45696)
## Summary
- Adds contextual `A + <letter>` chord shortcuts for jumping between
Authentication sub-pages while `AuthLayout` is mounted, mirroring the
existing database-nav chord pattern.
- Wires the shared `LIST_PAGE_*` shortcuts (focus search, create new,
reset filters, schema selector) onto the Auth list pages so they behave
like the Database list pages.
- Fills in the previously-missing `A + U` chord for the **Users** page
so every entry in the Auth menu has a chord.

Resolves
[FE-3187](https://linear.app/supabase/issue/FE-3187/add-a-u-keyboard-shortcut-for-auth-users-page).

## Auth navigation chords

Active anywhere under `/project/<ref>/auth/*`. Press `A` then the listed
letter.

| Page | Chord |
| --- | --- |
| Overview | `A` `O` |
| Users | `A` `U` |
| OAuth Apps | `A` `A` |
| Email | `A` `E` |
| Policies | `A` `P` |
| Sign In / Providers | `A` `I` |
| Passkeys | `A` `K` |
| OAuth Server | `A` `V` |
| Sessions | `A` `S` |
| Rate Limits | `A` `R` |
| Multi-Factor | `A` `M` |
| URL Configuration | `A` `L` |
| Attack Protection | `A` `T` |
| Auth Hooks | `A` `H` |
| Audit Logs | `A` `G` |
| Performance | `A` `F` |

## Auth list-page shortcuts

Each Auth list page opts into the shared `LIST_PAGE_*` registry — same
chords as the Database list pages (`Shift+F`, `Shift+N`, `F` `C`, `O`
`S`). Coverage matches the controls each page actually exposes:

| List page | Search (`Shift+F`) | New (`Shift+N`) | Reset filters (`F`
`C`) | Schema selector (`O` `S`) |
| --- | :---: | :---: | :---: | :---: |
| Custom Auth Providers | ✓ | ✓ | ✓ | — |
| OAuth Apps | ✓ | ✓ | ✓ | — |
| Policies | ✓ | — | ✓ | ✓ |
| Auth Hooks | — | ✓ | — | — |
| Redirect URLs | — | ✓ | — | — |
| Third-Party Auth | — | ✓ | — | — |

## Test plan
- [x] While anywhere under `/project/<ref>/auth/*`, every chord in the
navigation table jumps to the corresponding page.
- [x] On each list page in the second table, the marked shortcuts focus
the search input / open the create flow / reset filters / open the
schema picker as expected.
- [x] Chords are not active outside of `/project/<ref>/auth/*` and do
not trigger while typing in inputs (where `ignoreInputs` applies).

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Global keyboard shortcuts for Auth pages: navigate auth sections,
focus/search inputs, reset filters, and open "Add" flows (providers,
OAuth apps, hooks, URLs, policies).
* "Add" controls in lists respond to shortcuts and show appropriate
disabled/tooltip states when unavailable.
* Product menu and shortcuts reference now include an "Auth Navigation"
section and per-item shortcut hints.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2026-05-08 07:13:25 -06:00

242 lines
7.1 KiB
TypeScript

import { useFlag, useParams } from 'common'
import type { ProductMenuGroup } from '@/components/ui/ProductMenu/ProductMenu.types'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
import { IS_PLATFORM } from '@/lib/constants'
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
export interface GenerateAuthMenuOptions {
ref?: string
isPlatform: boolean
showOverview: boolean
features: {
signInProviders: boolean
rateLimits: boolean
emails: boolean
multiFactor: boolean
attackProtection: boolean
performance: boolean
passkeys?: boolean
}
}
export function generateAuthMenu(options: GenerateAuthMenuOptions): ProductMenuGroup[] {
const { ref, isPlatform, showOverview, features } = options
const passkeysInMenu = Boolean(features.passkeys)
const baseUrl = `/project/${ref}/auth`
return [
{
title: 'Manage',
items: [
...(showOverview
? [
{
name: 'Overview',
key: 'overview',
url: `${baseUrl}/overview`,
items: [],
shortcutId: SHORTCUT_IDS.NAV_AUTH_OVERVIEW,
},
]
: []),
{
name: 'Users',
key: 'users',
url: `${baseUrl}/users`,
items: [],
shortcutId: SHORTCUT_IDS.NAV_AUTH_USERS,
},
...(isPlatform
? [
{
name: 'OAuth Apps',
key: 'oauth-apps',
url: `${baseUrl}/oauth-apps`,
items: [],
shortcutId: SHORTCUT_IDS.NAV_AUTH_OAUTH_APPS,
},
]
: []),
],
},
...(features.emails && isPlatform
? [
{
title: 'Notifications',
items: [
...(features.emails
? [
{
name: 'Email',
key: 'email',
pages: ['templates', 'smtp'],
url: `${baseUrl}/templates`,
items: [],
shortcutId: SHORTCUT_IDS.NAV_AUTH_EMAIL,
},
]
: []),
],
},
]
: []),
{
title: 'Configuration',
items: [
{
name: 'Policies',
key: 'policies',
url: `${baseUrl}/policies`,
items: [],
shortcutId: SHORTCUT_IDS.NAV_AUTH_POLICIES,
},
...(isPlatform
? [
...(features.signInProviders
? [
{
name: 'Sign In / Providers',
key: 'sign-in-up',
pages: ['providers', 'third-party'],
url: `${baseUrl}/providers`,
items: [],
shortcutId: SHORTCUT_IDS.NAV_AUTH_SIGN_IN,
},
]
: []),
...(passkeysInMenu
? [
{
name: 'Passkeys',
key: 'passkeys',
url: `${baseUrl}/passkeys`,
label: 'Beta',
shortcutId: SHORTCUT_IDS.NAV_AUTH_PASSKEYS,
},
]
: []),
{
name: 'OAuth Server',
key: 'oauth-server',
url: `${baseUrl}/oauth-server`,
label: 'Beta',
shortcutId: SHORTCUT_IDS.NAV_AUTH_OAUTH_SERVER,
},
{
name: 'Sessions',
key: 'sessions',
url: `${baseUrl}/sessions`,
items: [],
shortcutId: SHORTCUT_IDS.NAV_AUTH_SESSIONS,
},
...(features.rateLimits
? [
{
name: 'Rate Limits',
key: 'rate-limits',
url: `${baseUrl}/rate-limits`,
items: [],
shortcutId: SHORTCUT_IDS.NAV_AUTH_RATE_LIMITS,
},
]
: []),
...(features.multiFactor
? [
{
name: 'Multi-Factor',
key: 'mfa',
url: `${baseUrl}/mfa`,
items: [],
shortcutId: SHORTCUT_IDS.NAV_AUTH_MFA,
},
]
: []),
{
name: 'URL Configuration',
key: 'url-configuration',
url: `${baseUrl}/url-configuration`,
items: [],
shortcutId: SHORTCUT_IDS.NAV_AUTH_URL_CONFIGURATION,
},
...(features.attackProtection
? [
{
name: 'Attack Protection',
key: 'protection',
url: `${baseUrl}/protection`,
items: [],
shortcutId: SHORTCUT_IDS.NAV_AUTH_PROTECTION,
},
]
: []),
{
name: 'Auth Hooks',
key: 'hooks',
url: `${baseUrl}/hooks`,
items: [],
label: 'Beta',
shortcutId: SHORTCUT_IDS.NAV_AUTH_HOOKS,
},
{
name: 'Audit Logs',
key: 'audit-logs',
url: `${baseUrl}/audit-logs`,
items: [],
shortcutId: SHORTCUT_IDS.NAV_AUTH_AUDIT_LOGS,
},
...(features.performance
? [
{
name: 'Performance',
key: 'performance',
url: `${baseUrl}/performance`,
items: [],
shortcutId: SHORTCUT_IDS.NAV_AUTH_PERFORMANCE,
},
]
: []),
]
: []),
],
},
]
}
export const useGenerateAuthMenu = (): ProductMenuGroup[] => {
const { ref } = useParams()
const showOverview = useFlag('authOverviewPage')
const enablePasskeyAuth = useFlag('enablePasskeyAuth')
const {
authenticationSignInProviders,
authenticationRateLimits,
authenticationEmails,
authenticationMultiFactor,
authenticationAttackProtection,
authenticationPerformance,
} = useIsFeatureEnabled([
'authentication:sign_in_providers',
'authentication:rate_limits',
'authentication:emails',
'authentication:multi_factor',
'authentication:attack_protection',
'authentication:performance',
])
return generateAuthMenu({
ref,
isPlatform: IS_PLATFORM,
showOverview,
features: {
signInProviders: authenticationSignInProviders,
rateLimits: authenticationRateLimits,
emails: authenticationEmails,
multiFactor: authenticationMultiFactor,
attackProtection: authenticationAttackProtection,
performance: authenticationPerformance,
passkeys: enablePasskeyAuth,
},
})
}