Files
supabase/apps/studio/lib/constants/index.ts
Alaister YoungandAlaister Young 46b31eb53a [FE-3379] feat(studio): warn when db passwords need percent-encoding (#47564)
Users who set a database password with special characters (\`@\`, \`#\`,
\`%\`, \`+\`, etc.) get no warning that it must be percent-encoded when
used in a connection URL, which leads to confusing connection failures
([FE-3379](https://linear.app/supabase/issue/FE-3379)).

<img width="700" height="200" alt="Screenshot 2026-07-03 at 6 26 43 PM"
src="https://github.com/user-attachments/assets/48608d65-8057-4abe-96fc-c0ede3550951"
/>
<img width="1002" height="395" alt="Screenshot 2026-07-03 at 6 27 14 PM"
src="https://github.com/user-attachments/assets/1366b985-7d80-4e7d-97f0-c79d5c84cefd"
/>
<img width="548" height="303" alt="Screenshot 2026-07-03 at 6 27 26 PM"
src="https://github.com/user-attachments/assets/b042101a-0e88-4730-adb8-1b490018f208"
/>

**Changed:**
- `PasswordStrengthBar` now shows a warning-colored callout (with a docs
link) whenever the entered password contains characters that need
percent-encoding — this covers project creation, reset database
password, restore-to-new-project, and the Vercel deploy-button flow
- Replaced `DATABASE_PASSWORD_REGEX` (only caught `@`, `:`, `/`) with a
`passwordNeedsPercentEncoding()` helper based on `encodeURIComponent`,
so `#`, `%`, `+`, `?`, `&`, spaces etc. are caught too
- Moved `SpecialSymbolsCallout` from `ProjectCreation/` to
`components/ui/` since it's now shared

**Added:**
- Info admonition in the Connect sheet next to connection strings that
still contain `[YOUR-PASSWORD]` (direct connection + `.env`-based file
setups; hidden for psql and .NET where percent-encoding doesn't apply,
and after a password reset since the substituted password is already
encoded)

## To test

- Project creation → type a password containing \`#\` or \`@\` → warning
callout appears above the strength bar; disappears for alphanumeric
passwords
- Database Settings → Reset database password → same behaviour
- Connect sheet → Direct connection → note shows under the connection
string for URI/JDBC types, not for psql; after resetting the password
from the sheet, the note disappears (password is substituted already
encoded)
- Connect sheet → Node.js/Python/Go/SQLAlchemy file setups show the
note; .NET does not
- \`pnpm vitest run lib/password-strength.test.ts\` passes

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

## Summary by CodeRabbit

* **New Features**
* Added a dedicated password encoding note (with documentation link) on
direct connection screens when the password is embedded in a URL.
* Added an encoding hint to the password strength area when
percent-encoding is required.
* **Bug Fixes**
* Removed regex-based “invalid password” callout and replaced it with
safer percent-encoding detection logic.
* **Tests**
  * Added test coverage for `passwordNeedsPercentEncoding`.
  * Removed obsolete Project Creation password regex tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-07-06 17:38:03 +08:00

84 lines
3.1 KiB
TypeScript

// Ignore barrel file rule here since it's just exporting more constants
// eslint-disable-next-line barrel-files/avoid-re-export-all
export * from './infrastructure'
export const IS_PLATFORM = process.env.NEXT_PUBLIC_IS_PLATFORM === 'true'
/**
* Server-side flag for Supabase CLI (local development) runs. Detected via
* CURRENT_CLI_VERSION, which the CLI sets when launching Studio. The browser
* cannot read this directly — use the /platform/deployment-mode endpoint.
*/
export const IS_CLI = !IS_PLATFORM && !!process.env.CURRENT_CLI_VERSION
/**
* Indicates that the app is running in a test environment (E2E tests).
* Set via NEXT_PUBLIC_NODE_ENV=test in the generateLocalEnv.js script.
*/
export const IS_TEST_ENV = process.env.NEXT_PUBLIC_NODE_ENV === 'test'
/**
* True when running against the staging or local environments. Used to gate
* staff-only debugging affordances (e.g. the unified logs OTEL toggle) that
* should never be visible to customers on production.
*/
export const IS_STAGING_OR_LOCAL =
process.env.NEXT_PUBLIC_ENVIRONMENT === 'staging' ||
process.env.NEXT_PUBLIC_ENVIRONMENT === 'local'
export const API_URL = (() => {
if (process.env.NODE_ENV === 'test') return 'http://localhost:3000/api'
// If running in platform, use API_URL from the env var
if (IS_PLATFORM) return process.env.NEXT_PUBLIC_API_URL!
// If running in browser, let it add the host
if (typeof window !== 'undefined') return '/api'
// If running self-hosted Vercel preview, use VERCEL_URL
if (!!process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}/api`
// If running on self-hosted, use NEXT_PUBLIC_SITE_URL
if (!!process.env.NEXT_PUBLIC_SITE_URL) return `${process.env.NEXT_PUBLIC_SITE_URL}/api`
return '/api'
})()
export const PG_META_URL = IS_PLATFORM
? process.env.PLATFORM_PG_META_URL
: process.env.STUDIO_PG_META_URL
export const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? ''
/**
* @deprecated use DATETIME_FORMAT
*/
export const DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ssZ'
// should be used for all dayjs formattings shown to the user. Includes timezone info.
export const DATETIME_FORMAT = 'DD MMM YYYY, HH:mm:ss (ZZ)'
export const GOTRUE_ERRORS = {
UNVERIFIED_GITHUB_USER: 'Error sending confirmation mail',
}
export const STRIPE_PUBLIC_KEY =
process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY || 'pk_test_XVwg5IZH3I9Gti98hZw6KRzd00v5858heG'
export const POSTHOG_URL =
process.env.NEXT_PUBLIC_ENVIRONMENT === 'staging' ||
process.env.NEXT_PUBLIC_ENVIRONMENT === 'local'
? 'https://ph.supabase.green'
: 'https://ph.supabase.com'
export const USAGE_APPROACHING_THRESHOLD = 0.75
export const DOCS_URL = process.env.NEXT_PUBLIC_DOCS_URL || 'https://supabase.com/docs'
export const SPECIAL_SYMBOLS_IN_PASSWORDS_DOCS_URL = `${DOCS_URL}/guides/database/postgres/roles#special-symbols-in-passwords`
export const OPT_IN_TAGS = {
AI_SQL: 'AI_SQL_GENERATOR_OPT_IN',
AI_DATA: 'AI_DATA_GENERATOR_OPT_IN',
AI_LOG: 'AI_LOG_GENERATOR_OPT_IN',
}
export const GB = 1024 * 1024 * 1024
export const MB = 1024 * 1024
export const KB = 1024
export const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i