mirror of
https://github.com/supabase/supabase.git
synced 2026-05-10 10:50:18 -04:00
0278672102
## 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>
242 lines
7.1 KiB
TypeScript
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,
|
|
},
|
|
})
|
|
}
|