Files
supabase/apps/studio/components
Akash MandJoshen Lim 8a4d2e17fc fix: trim leading/trailing whitespaces from SMTP settings input fields (#43530)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix

## What is the current behavior?

Currently, the SMTP Host input field in the Project Dashboard
(Authentication > Email > SMTP Settings) does not sanitize whitespace.
If a user accidentally pastes a hostname with leading or trailing spaces
(e.g., " smtp.resend.com "), the DNS lookup fails during the OTP
delivery process.

This results in the following error in the Auth logs:

```"dial tcp: lookup smtp.resend.com on 127.0.0.53:53: server misbehaving"```

Noticed, the other input fields of Sender details and Host, Username and Password under SMTP Provider settings take leading and trailing whitespaces as well.

## What is the new behavior?

Input sanitization has been applied across the SMTP configuration schema. The following fields now utilize .trim() to ensure data integrity:

- SMTP_HOST
- SMTP_ADMIN_EMAIL & SMTP_SENDER_NAME
- SMTP_USER
- SMTP_PASS

## Screenshots:

Before Fix:

<img width="604" height="198" alt="Screenshot 2026-03-09 at 2 04 49 AM" src="https://github.com/user-attachments/assets/76ae23a6-3ad8-4f82-8f0f-ab12f4168e81" />

After Fix:

<img width="594" height="194" alt="Screenshot 2026-03-09 at 1 58 48 AM" src="https://github.com/user-attachments/assets/03f64294-0bfe-4fca-a82b-12ee07a6d218" />



This fixes the issue #43529

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-09 15:24:49 +07:00
..
…

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-cleaned folder 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.tsx as 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