fix: allow rate limit configuration on custom smtp config

studio/components/to-be-cleaned/forms/Toggle.js

@@ -16,7 +16,7 @@ const sizes = {
 export default function Toggle({
   isOn = true,
   size = 'md',
-  onToggle = () => {},
+  onToggle = (value) => {},
   isDisabled = false,
 }) {
   const toggleSizes = sizes[size]
@@ -24,7 +24,7 @@ export default function Toggle({
     <span
       role="checkbox"
       aria-checked="false"
-      onClick={!isDisabled ? onToggle : () => {}}
+      onClick={!isDisabled ? () => onToggle(!isOn) : () => {}}
       className={`${isOn ? 'bg-green-500' : 'bg-gray-200'} ${toggleSizes.background} ${
         isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'
       } relative inline-block flex-shrink-0 border-transparent rounded-full transition-colors ease-in-out duration-200 focus:outline-none focus:ring `}

studio/pages/project/[ref]/auth/settings.tsx

@@ -19,8 +19,6 @@ import ToggleField from 'components/to-be-cleaned/forms/ToggleField'
 import SecretField from 'components/to-be-cleaned/forms/SecretField'
 import SchemaFormPanel from 'components/to-be-cleaned/forms/SchemaFormPanel'
 
-const SMTP_ADMIN_EMAIL = 'noreply@mail.app.supabase.io'
-
 const Auth = () => {
   return (
     <AuthLayout title="Auth">
@@ -37,7 +35,7 @@ const Settings = () => {
   const [model, setModel] = useState<any>({})
   const [smsProviderModel, setSmsProviderModel] = useState<any>({})
   const [externalProvidersModel, setExternalProvidersModel] = useState<any>({})
-  const [isCustomSMTPEnabled, setCustomSMTP] = useState<any>(false)
+  const [isCustomSMTPEnabled, setCustomSMTP] = useState<boolean>(false)
   const URL = `${API_URL}/auth/${router.query.ref}/config`
   const { data: config, error }: any = useSWR(URL, get)
   const { ref: projectRef } = router.query
@@ -54,12 +52,11 @@ const Settings = () => {
   useEffect(() => {
     if (config) {
       const temp =
-        (config.SMTP_ADMIN_EMAIL && config.SMTP_ADMIN_EMAIL !== SMTP_ADMIN_EMAIL) ||
+        config.SMTP_ADMIN_EMAIL ||
         config.SMTP_HOST ||
         config.SMTP_PORT ||
         config.SMTP_USER ||
-        config.SMTP_PASS ||
-        config.SMTP_SENDER_NAME
+        config.SMTP_PASS
       setCustomSMTP(temp)
     }
     setModel({ ...config })
@@ -152,15 +149,17 @@ const Settings = () => {
             'SMTP_USER',
             'SMTP_PASS',
             'SMTP_SENDER_NAME',
+            'RATE_LIMIT_EMAIL_SENT',
           ])}
           model={{
             MAILER_SECURE_EMAIL_CHANGE_ENABLED: model.MAILER_SECURE_EMAIL_CHANGE_ENABLED,
-            SMTP_ADMIN_EMAIL: isCustomSMTPEnabled ? model.SMTP_ADMIN_EMAIL : SMTP_ADMIN_EMAIL,
-            SMTP_HOST: isCustomSMTPEnabled ? model.SMTP_HOST : undefined,
-            SMTP_PORT: isCustomSMTPEnabled ? model.SMTP_PORT : undefined,
-            SMTP_USER: isCustomSMTPEnabled ? model.SMTP_USER : undefined,
-            SMTP_PASS: isCustomSMTPEnabled ? model.SMTP_PASS : undefined,
-            SMTP_SENDER_NAME: isCustomSMTPEnabled ? model.SMTP_SENDER_NAME : undefined,
+            SMTP_ADMIN_EMAIL: isCustomSMTPEnabled ? model.SMTP_ADMIN_EMAIL : "",
+            SMTP_HOST: isCustomSMTPEnabled ? model.SMTP_HOST : "",
+            SMTP_PORT: isCustomSMTPEnabled ? model.SMTP_PORT : "",
+            SMTP_USER: isCustomSMTPEnabled ? model.SMTP_USER : "",
+            SMTP_PASS: isCustomSMTPEnabled ? model.SMTP_PASS : "",
+            SMTP_SENDER_NAME: isCustomSMTPEnabled ? model.SMTP_SENDER_NAME : "",
+            RATE_LIMIT_EMAIL_SENT: isCustomSMTPEnabled ? model.RATE_LIMIT_EMAIL_SENT : 30,
           }}
           onSubmit={(model: any) =>
             onFormSubmit({
@@ -205,20 +204,22 @@ const Settings = () => {
             <label className="">Enable Custom SMTP</label>
             <div className="form-control flex items-center">
               <Toggle
-                onToggle={() => {
+                onToggle={(value : any) => {
                   /*
                    * temporary solution
                    * clear the values of SMTP when toggling
-                   */
-                  onFormSubmit({
-                    SMTP_ADMIN_EMAIL: SMTP_ADMIN_EMAIL,
-                    SMTP_HOST: null,
-                    SMTP_PORT: null,
-                    SMTP_USER: null,
-                    SMTP_PASS: null,
-                    SMTP_SENDER_NAME: null,
-                  })
-
+                   */ 
+                  if(!value) {
+                    onFormSubmit({
+                      SMTP_ADMIN_EMAIL: "",
+                      SMTP_HOST: "",
+                      SMTP_PORT: "",
+                      SMTP_USER: "",
+                      SMTP_PASS: "",
+                      SMTP_SENDER_NAME: "",
+                      RATE_LIMIT_EMAIL_SENT: 30,
+                    })
+                  }
                   setCustomSMTP(!isCustomSMTPEnabled)
                 }}
                 isOn={isCustomSMTPEnabled}
@@ -241,6 +242,12 @@ const Settings = () => {
                 showInlineError
                 errorMessage="Please enter from name."
               />
+              <NumField
+                showInlineError
+                step="1"
+                name="RATE_LIMIT_EMAIL_SENT"
+                errorMessage="Please enter a value between 1 to 32767"
+              />
             </>
           )}
         </SchemaFormPanel>

studio/stores/jsonSchema/auth_gotrue_config.json

@@ -22,8 +22,6 @@
     "EXTERNAL_SLACK_ENABLED",
     "EXTERNAL_SPOTIFY_ENABLED",
     "EXTERNAL_SPOTIFY_ENABLED",
-    "SMTP_ADMIN_EMAIL",
-    "SMTP_MAX_FREQUENCY",
     "SMS_AUTOCONFIRM",
     "SMS_MAX_FREQUENCY",
     "SMS_OTP_EXP",
@@ -264,6 +262,14 @@
       "title": "SMTP Sender Name",
       "type": "string"
     },
+    "RATE_LIMIT_EMAIL_SENT": {
+      "title": "Rate Limit",
+      "type": "number",
+      "help": "Maximum number of emails sent per hour (Default: 30, Max: 32,767)",
+      "minimum": 1,
+      "maximum": 32767,
+      "multipleof": 1
+    },
     "MAILER_SECURE_EMAIL_CHANGE_ENABLED": {
       "title": "Double confirm email changes",
       "type": "boolean",