How to Change “localhost” in Capacitor iOS Location Permission Prompt

If you’re developing a Capacitor-based iOS app and notice that the location permission prompt displays “localhost” instead of your app’s name, you’re not alone. This issue occurs because Capacitor runs a local development server on localhost, and iOS references this when requesting permissions. However, with a few configuration updates, you can replace “localhost” with your app’s actual name. In this guide, we’ll walk through the steps to fix this and optimize your app’s user experience.

Why Does iOS Show “localhost” Instead of the App Name?

Capacitor apps use a built-in local server (localhost) to serve web content. When requesting sensitive permissions such as location access, iOS displays the origin of the request. Since the default server is localhost, it appears in system dialogs instead of your app’s name.

To change this behavior, we need to configure Capacitor to use a custom hostname.

Step-by-Step Guide to Changing “localhost” in the Location Prompt

1. Update capacitor.config.ts or capacitor.config.json

Modify your Capacitor configuration file to set a custom hostname:

For capacitor.config.ts (TypeScript)

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.zing',
  appName: 'Zing',
  webDir: 'www',
  server: {
    hostname: 'zing-app'  // 👈 Change "localhost" to "zing-app"
  }
};

export default config;

For capacitor.config.json (JSON)

{
  "appId": "com.yourcompany.zing",
  "appName": "Zing",
  "webDir": "www",
  "server": {
    "hostname": "zing-app"
  }
}

This tells Capacitor to use “zing-app” instead of “localhost.”

2. Sync and Rebuild Your iOS Project

After updating the configuration, apply the changes to your iOS project:

npx cap sync ios
npx cap open ios

This regenerates the Xcode project with the new hostname.

3. Update Info.plist for Proper Location Permission Descriptions

Capacitor iOS apps must define permission messages in Info.plist. Ensure you add these entries:

1. Open ios/App/App/Info.plist
2. Add or update the following keys:

   <key>NSLocationWhenInUseUsageDescription</key>
   <string>Zing needs access to your location to enhance your experience.</string>
   
   <key>NSLocationAlwaysUsageDescription</key>
   <string>Zing requires background location access for accurate services.</string>
   

3. Save the file.

These messages are displayed when iOS prompts the user for location permissions.

4. Uninstall and Reinstall the App on Your Device

iOS caches app settings, so removing the app ensures the new hostname takes effect. Run:

npx cap run ios --device

Or manually delete the app from your iPhone and reinstall it via Xcode.

Final Outcome

After completing these steps, the location permission prompt will now display: ✅ “Zing” would like to use your current location. ❌ Instead of “localhost” would like to use your current location.”

This improves the user experience and makes your app look more professional.

Conclusion

Ensuring your Capacitor iOS app displays the correct name in system dialogs enhances user trust and app credibility. By setting a custom hostname in capacitor.config.ts and updating Info.plist, you can prevent the confusing “localhost” label from appearing in permission prompts.

Following this guide, your app should now correctly show its name when requesting location access. If issues persist, ensure you have properly synced and reinstalled your app on a physical iOS device.

Now your app looks more polished and professional, improving user experience and engagement!

Did this guide help? Share your feedback in the comments!