From c600da71e3ffb873ba0ad27fe49363a44bccd9ae Mon Sep 17 00:00:00 2001
From: Abhinav-kodes <183825080+Abhinav-kodes@users.noreply.github.com>
Date: Wed, 25 Feb 2026 22:07:08 +0530
Subject: [PATCH] fix: sync resource toggle states with context on initial load

- Replace defaultChecked with checked for controlled components
- Add useEffect to sync rulesEnabled, ssoEnabled, whitelistEnabled
  when resource context hydrates after mount
- Add nullish coalescing fallback to prevent undefined initial state
---
 .../proxy/[niceId]/authentication/page.tsx      | 17 +++++++++++++----
 .../resources/proxy/[niceId]/rules/page.tsx     |  9 +++++++--
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/app/[orgId]/settings/resources/proxy/[niceId]/authentication/page.tsx b/src/app/[orgId]/settings/resources/proxy/[niceId]/authentication/page.tsx
index b00ce1ee..a533fb6c 100644
--- a/src/app/[orgId]/settings/resources/proxy/[niceId]/authentication/page.tsx
+++ b/src/app/[orgId]/settings/resources/proxy/[niceId]/authentication/page.tsx
@@ -187,7 +187,11 @@ export default function ResourceAuthenticationPage() {
         number | null
     >(null);
 
-    const [ssoEnabled, setSsoEnabled] = useState(resource.sso);
+    const [ssoEnabled, setSsoEnabled] = useState(resource.sso ?? false);
+
+    useEffect(() => {
+        setSsoEnabled(resource.sso ?? false);
+    }, [resource.sso]);
 
     const [selectedIdpId, setSelectedIdpId] = useState<number | null>(
         resource.skipToIdpId || null
@@ -472,7 +476,7 @@ export default function ResourceAuthenticationPage() {
                             <SwitchInput
                                 id="sso-toggle"
                                 label={t("ssoUse")}
-                                defaultChecked={resource.sso}
+                                checked={ssoEnabled}
                                 onCheckedChange={(val) => setSsoEnabled(val)}
                             />
 
@@ -800,8 +804,13 @@ function OneTimePasswordFormSection({
 }: OneTimePasswordFormSectionProps) {
     const { env } = useEnvContext();
     const [whitelistEnabled, setWhitelistEnabled] = useState(
-        resource.emailWhitelistEnabled
+        resource.emailWhitelistEnabled ?? false
     );
+
+    useEffect(() => {
+        setWhitelistEnabled(resource.emailWhitelistEnabled);
+    }, [resource.emailWhitelistEnabled]);
+
     const queryClient = useQueryClient();
 
     const [loadingSaveWhitelist, startTransition] = useTransition();
@@ -894,7 +903,7 @@ function OneTimePasswordFormSection({
                     <SwitchInput
                         id="whitelist-toggle"
                         label={t("otpEmailWhitelist")}
-                        defaultChecked={resource.emailWhitelistEnabled}
+                        checked={whitelistEnabled}
                         onCheckedChange={setWhitelistEnabled}
                         disabled={!env.email.emailEnabled}
                     />
diff --git a/src/app/[orgId]/settings/resources/proxy/[niceId]/rules/page.tsx b/src/app/[orgId]/settings/resources/proxy/[niceId]/rules/page.tsx
index f0ac0e1a..2b6a1687 100644
--- a/src/app/[orgId]/settings/resources/proxy/[niceId]/rules/page.tsx
+++ b/src/app/[orgId]/settings/resources/proxy/[niceId]/rules/page.tsx
@@ -113,7 +113,12 @@ export default function ResourceRules(props: {
     const [rulesToRemove, setRulesToRemove] = useState<number[]>([]);
     const [loading, setLoading] = useState(false);
     const [pageLoading, setPageLoading] = useState(true);
-    const [rulesEnabled, setRulesEnabled] = useState(resource.applyRules);
+    const [rulesEnabled, setRulesEnabled] = useState(resource.applyRules ?? false);
+
+    useEffect(() => {
+        setRulesEnabled(resource.applyRules);
+    }, [resource.applyRules]);
+
     const [openCountrySelect, setOpenCountrySelect] = useState(false);
     const [countrySelectValue, setCountrySelectValue] = useState("");
     const [openAddRuleCountrySelect, setOpenAddRuleCountrySelect] =
@@ -836,7 +841,7 @@ export default function ResourceRules(props: {
                             <SwitchInput
                                 id="rules-toggle"
                                 label={t("rulesEnable")}
-                                defaultChecked={rulesEnabled}
+                                checked={rulesEnabled}
                                 onCheckedChange={(val) => setRulesEnabled(val)}
                             />
                         </div>