-
|
Hi all, I'm able to run the application locally without any issues. Everything works as expected using docker compose, including the API, database, and frontend. However, I'm having trouble making the application accessible externally through Cloudflare Tunnel and Zero Trust. My setup:
Local access (LAN or via VPN) works perfectly (I can log in to MyFin without issues). The problem: But when I try to log in I always get the error: "Invalid credentials. Try again!" This happens regardless of the credentials used. Has anyone successfully run this application behind a Cloudflare tunnel with Zero Trust? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
Hi @FilipeAb, Just to confirm — are you able to access the API endpoint from the same browser you're using to access the frontend? You can test this by opening the API base URL directly in your browser (e.g., https://api.myfininstance.xyz). If everything is set up correctly, you should see the following JSON response: {
"info": "MyFin API"
}If that's the case, the API is publicly reachable — which is a good sign. Next, to help troubleshoot the login issue, could you please share the network logs from your browser’s developer tools during a login attempt? Specifically, I'm interested in the request/response details for the POST /auth/ call. This will help us identify whether the request is reaching the API and if the session or cookies are being handled correctly. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @afaneca and thanks again for the help. Yes, I'm able to access the API externally, directly from the browser, with the same JSON response. Looking at the logs, I believe I’ve identified the issue. This means that even though the API is publicly accessible via Cloudflare, the frontend is still trying to reach it via the local/internal address which fails when accessed externally. I assume that using MyFin outside of the local network currently requires a VPN, is that correct? Would it make sense to introduce two separate environment variables:
Then, if the frontend fails to reach the internal URL it could fall back to the external one automatically. This would allow seamless usage both locally and remotely, without requiring a VPN or manual reconfiguration. Let me know if this would make sense or if there's a better approach. Thanks |
Beta Was this translation helpful? Give feedback.
-
|
I'm assuming you're setting VITE_MYFIN_BASE_API_URL to the local IP address using HTTP (e.g. http://192.168.x.x)? For security reasons, browsers block this when the frontend is served over HTTPS — it's considered mixed content. To fix this, you'll need to expose the API through an HTTPS DNS entry (e.g. https://api.myfininstance.xyz) via your Cloudflare Tunnel, just like you're doing for the frontend. This ensures the frontend can securely communicate with the backend without being blocked. |
Beta Was this translation helpful? Give feedback.
-
|
Yes, you're right. I'm currently setting VITE_MYFIN_BASE_API_URL to an internal IP address and that works fine when accessing MyFin locally or over VPN. However, when I change VITE_MYFIN_BASE_API_URL to a public HTTPS address, two concerns come up: All traffic between the Frontend <->API must go through the Internet/CF. This means that if there's no internet connection, the frontend won't be able to reach the API, even if both are running on the same machine. That breaks offline usage or isolated LAN access. Exposing the API publicly raises some security concerns. A publicly accessible API could be scanned, targeted, or abused unless extra protections are put in place. |
Beta Was this translation helpful? Give feedback.
-
I believe they may have intentionally designed it that way However, if you're not fully comfortable exposing the API this way, an alternative approach would be to use a local reverse proxy setup like Nginx Proxy Manager. Generate SSL certificates for *.local.domain.com. There are lots of tutorials on youtube on how to HTTPS/SSL local traffic using NPM and Cloudflare tunnel. |
Beta Was this translation helpful? Give feedback.
I believe they may have intentionally designed it that way
However, if you're not fully comfortable exposing the API this way, an alternative approach would be to use a local reverse proxy setup like Nginx Proxy Manager.
Generate SSL certificates for *.local.domain.com.
Add "*.local" as an A record in your Cloudflare DNS pointing to the IP of your Nginx Proxy Manager host.
Set up internal routing rules with Nginx Proxy Manager.
There are lots of tutorials on youtube on how to HTTPS/SSL local traffic using NPM and Cloudflare t…