2 files changed, 29 insertions, 1 deletions
diff --git a/apps/mobile/app/signin.tsx b/apps/mobile/app/signin.tsx
index 4f74c331..3dc41a0c 100644
--- a/apps/mobile/app/signin.tsx
+++ b/apps/mobile/app/signin.tsx
@@ -7,6 +7,7 @@ import {
   View,
 } from "react-native";
 import { Redirect, useRouter } from "expo-router";
+import { CustomHeadersModal } from "@/components/CustomHeadersModal";
 import Logo from "@/components/Logo";
 import { TailwindResolver } from "@/components/TailwindResolver";
 import { Button } from "@/components/ui/Button";
@@ -31,6 +32,8 @@ export default function Signin() {
   const [tempServerAddress, setTempServerAddress] = useState(
     "https://cloud.karakeep.app",
   );
+  const [isCustomHeadersModalVisible, setIsCustomHeadersModalVisible] =
+    useState(false);
 
   const emailRef = useRef<string>("");
   const passwordRef = useRef<string>("");
@@ -79,6 +82,10 @@ export default function Signin() {
     return <Redirect href="dashboard" />;
   }
 
+  const handleSaveCustomHeaders = (headers: Record<string, string>) => {
+    setSettings({ ...settings, customHeaders: headers });
+  };
+
   const onSignin = () => {
     if (!tempServerAddress) {
       setError("Server address is required");
@@ -184,6 +191,17 @@ export default function Signin() {
                 </Button>
               </View>
             )}
+            <Pressable
+              onPress={() => setIsCustomHeadersModalVisible(true)}
+              className="mt-1"
+            >
+              <Text className="text-xs text-gray-500 underline">
+                Configure Custom Headers{" "}
+                {settings.customHeaders &&
+                  Object.keys(settings.customHeaders).length > 0 &&
+                  `(${Object.keys(settings.customHeaders).length})`}
+              </Text>
+            </Pressable>
           </View>
           {loginType === LoginType.Password && (
             <>
@@ -264,6 +282,12 @@ export default function Signin() {
           </Pressable>
         </View>
       </TouchableWithoutFeedback>
+      <CustomHeadersModal
+        visible={isCustomHeadersModalVisible}
+        customHeaders={settings.customHeaders || {}}
+        onClose={() => setIsCustomHeadersModalVisible(false)}
+        onSave={handleSaveCustomHeaders}
+      />
     </KeyboardAvoidingView>
   );
 }
diff --git a/apps/mobile/app/test-connection.tsx b/apps/mobile/app/test-connection.tsx
index a9ec6e5e..4cf69fcf 100644
--- a/apps/mobile/app/test-connection.tsx
+++ b/apps/mobile/app/test-connection.tsx
@@ -6,7 +6,7 @@ import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import { Input } from "@/components/ui/Input";
 import { Text } from "@/components/ui/Text";
 import useAppSettings from "@/lib/settings";
-import { cn } from "@/lib/utils";
+import { buildApiHeaders, cn } from "@/lib/utils";
 import { z } from "zod";
 
 export default function TestConnection() {
@@ -70,6 +70,10 @@ export default function TestConnection() {
 
       appendText("Using address: " + settings.address);
       request.open("GET", `${settings.address}/api/health`);
+      const headers = buildApiHeaders(settings.apiKey, settings.customHeaders);
+      Object.entries(headers).forEach(([key, value]) => {
+        request.setRequestHeader(key, value);
+      });
       request.send();
     }
     runTest();