HomeAssistant app doesn't work on new phone while connected to Wireguard VPN server. Although I can use HA via mobile web-browser

I have HomeAssistant set up at home on a Raspberry Pi 4. I also have the Wireguard add-on set up on HA and connecting to WG VPN server and using the HA app works fine with my old iPhone X. I recently bought a new iPhone 13 Pro and created a new Wireguard configuration for it on the HA Wireguard add-on and added it to the Wireguard app on the new iPhone.
The problem: When I open the HA app on the new phone while connected to the Wireguard VPN server on my HA instance it simply shows blank screen and settings wheel icon on the bottom right. The HA UI doesn’t load on the App. After a while looking at the blank app screen I get the following error on the bottom of the app screen:

The request timed out
NSURLErrorDomain -1001
What makes this weird is if I open my HA UI (<ha_ip_address:8123>) on a mobile web-browser while connected to the Wireguard VPN server on my HA instance the HA UI loads just fine and everything works without any problems.

On the old phone: I can use my HA instance over VPN both on a mobile browser and with the HA App.
On the new phone: I can use my HA instance over VPN on a mobile web-browser but not with the HA App.

Both phones are iPhones, both are on same latest major iOS version, both have the same up-to-date version of every app (including HA and Wireguard). Both phones have the same HA App settings under iOS Settings → Homeassistant as well. Local network, Mobile Data are enabled and every other setting is exactly the same on both phones in the iOS HA app settings view. The required UDP port is forwarded on the router and the forwarding works as I can use HA via a web-browser on the new phone and with the app on the old phone while connected via VPN.

What I tried so far:

  • Lowered firewall settings on my router to the lowest just to see if it was blocking anything.
  • Restarted router.
  • Removed, re-generated and re-added the Wireguard configuration for the new phone on my HA instance.
  • Restarted HA host (Raspberry Pi 4).
  • Removed and re-installed HA app on the new iPhone.

Does anyone have any suggestion as to where and how to debug this further?

I don’t know if the iOS and android app is the same but my android app has 2 connections. One local and one remote. The app uses the local connection if it is connected to the home wifi. It would take the remote connection if it is not connected to my home wifi.

A vpn is a speacial case because you are not connected to the wifi so the app takes the remote setting but it should use the local connection. Just check if you have the correct settings

If you have the app set to connect to homeassistant.local this won’t work over Wireguard as it doesn’t forward mDNS requests.

The local ip address will work because wireguard connects you to the local network (just without mDNS, no .local addresses will work)

The external address (DNS or IP) will work as long as you have that set up via your router or home assistant cloud.

If anyone knows of an easy way to forward mDNS over the Wireguard connection I’d love to hear it though!

This was really helpful. Thank you both of you FloRup and DopeBoogie!

I opened the App Configuration -> Connection view in HomeAssistant App. My External URL input was empty and thus it was using https://homeassistant.myhouse.com as a default value. That’s why the connection failed as network connection wise I wasn’t in my local network and was connected to it via VPN which meant the app was using the External URL parameter. I filled the External URL input with the local address of my HA instance and now it works fine.

Thank you again!