mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 04:15:04 +03:00
Ali Waseem
e63cca3b4a
## Summary
Toggling the Phone auth provider on in Studio appeared to save (success
toast) but snapped back to **Disabled** immediately. The backend value
never changed.
## Root cause
In `AuthProvidersFormValidation.tsx`, the phone schema's final
`.transform` replaced the parsed values with
`enabledSchema.parse(values)`:
```
.transform((values) => {
if (values.EXTERNAL_PHONE_ENABLED === true) {
return enabledSchema.parse(values) // ← strips EXTERNAL_PHONE_ENABLED
}
return values
})
```
`enabledSchema` is a `z.discriminatedUnion('SMS_PROVIDER', [...])` whose
branch schemas (twilio / twilio_verify / messagebird / vonage /
textlocal) don't declare `EXTERNAL_PHONE_ENABLED`. Zod objects strip
unknown keys by default, so the flag was dropped from the submitted
payload. The PATCH request to `/platform/auth/{ref}/config` went out
without `EXTERNAL_PHONE_ENABLED`, the backend kept its previous value,
and `form.reset` on the response snapped the toggle back to disabled.
Regression was introduced in #44865 (zod migration). The recent #44974
fix addressed the `shouldUnregister` side of the form but not this
transform.
## Fix
Spread `enabledSchema.parse(values)` and re-add `EXTERNAL_PHONE_ENABLED:
true` so the flag survives the transform.
## Test plan
- [x] On a project with no phone provider configured, pick an SMS
provider (e.g. Twilio), fill credentials, toggle Phone on, Save → toggle
stays **Enabled**, network tab shows `EXTERNAL_PHONE_ENABLED: true` in
PATCH payload and response
- [x] Toggle Phone off → stays **Disabled** (unchanged behavior)
- [x] Change SMS provider credentials while enabled → saves correctly
- [x] With SMS hook enabled, phone provider fields remain optional as
before
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Fixed an issue where phone authentication provider settings were not
being properly retained during form submission.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly
const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}
export default ComponentA