Files
supabase/apps/studio/lib/password-strength.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

57 lines
1.8 KiB
TypeScript

import { DEFAULT_MINIMUM_PASSWORD_STRENGTH, PASSWORD_STRENGTH } from '@/lib/constants'
// This is the same as the ZXCVBNScore type from zxcvbn
// but we need to define it here because we don't to import zxcvbn everywhere
export type PasswordStrengthScore = 0 | 1 | 2 | 3 | 4
/**
* True when the password contains characters that must be percent-encoded
* before the password can be used in a connection string URL.
*/
export function passwordNeedsPercentEncoding(password: string) {
try {
return password !== encodeURIComponent(password)
} catch {
// encodeURIComponent throws on lone surrogates
return true
}
}
export async function passwordStrength(value: string) {
// [Alaister]: Lazy load zxcvbn to avoid bundling it with the main app (it's pretty chunky)
const zxcvbn = await import('zxcvbn').then((module) => module.default)
let message: string = ''
let warning: string = ''
let strength: PasswordStrengthScore = 0
if (value && value !== '') {
if (value.length > 99) {
message = `${PASSWORD_STRENGTH[0]} Maximum length of password exceeded`
warning = `Password should be less than 100 characters`
} else {
const result = zxcvbn(value)
const resultScore = result?.score ?? 0
const score = (PASSWORD_STRENGTH as any)[resultScore]
const suggestions = result.feedback?.suggestions?.join(' ') ?? ''
message = `${score} ${suggestions}`
strength = resultScore
// warning message for anything below 4 strength :string
if (resultScore < DEFAULT_MINIMUM_PASSWORD_STRENGTH) {
warning = `${
result?.feedback?.warning ? result?.feedback?.warning + '.' : ''
} You need a stronger password.`
}
}
}
return {
message,
warning,
strength,
}
}