feat(mobile): add additional request headers

[matejkramny]

Hi,

I've attempted successfully to add authentication for an authentication proxy (cloudflare access in my example).
This would enable users like myself to safely expose immich to the internet without having to worry about security patches etc.

To replicate this, generate cloudflare service token and exchange it for the cookie:

curl -v -H "CF-Access-Client-Id: abc.access" -H "CF-Access-Client-Secret: secret" https://<domain>
< set-cookie: CF_Authorization=jwt-token; Expires=Wed, 24 Jul 2024 21:39:02 GMT; Path=/; Secure; HttpOnly; SameSite=none

In the Immich app, under Custom Headers set the cf-access-token header with the jwt-token cookie value (as documented here: https://developers.cloudflare.com/cloudflare-one/identity/service-tokens/)

Then login and all works well.

I might need your help to bring this over to a state where this could be merged. I couldn't figure out how to do something like setState within the HookConsumerWidget

Some todos from what i can tell:

• Do this authentication flow in the app. Reauthenticate when needed
• • On this point the flow doesn't have to be done, you could always pass the cf-access-client-id and secret.
• Put the header settings page under Advanced
• Translations
• Documentation

[Triple-Z]

Thanks for your code! I have been tested this branch and it works!

I also found some issues with this:

• header couldn't be deleted since it added.
• can not play live photo / video.

[matejkramny]

Hey, thanks for testing!. I'll check out the live photos/videos.

I'm sure i'll figure out the state management, but would appreciate any pointers :).

cheers

[matejkramny]

Thanks for your code! I have been tested this branch and it works!

I also found some issues with this:

• header couldn't be deleted since it added.
• can not play live photo / video.

Hi, I've tested videos, they seem to work for me. Perhaps your setup didn't work?
I'll try live images if I find any.

Fixed the headers deleting, and figured out the state management finally.

Let you know when it's ready for review.. thanks!

[alextran1502]

Can you help resolve the conflict and provide the screenshot of the UI change?

[matejkramny]

Screenshots below:

[alextran1502]

@matejkramny I tested and refactored some stuff. Working well! Thanks for your contribution <3

[alextran1502]

@matejkramny Can you help with a separate PR for documentation?

[matejkramny]

@matejkramny I tested and refactored some stuff. Working well! Thanks for your contribution <3

Heppy to help out. You guys are great

[backyardaussie]

This is amazing work!! This is exactly what I wanted (and wish every app out there could do:) )

This app keeps getting better and better

[awydler]

Thank you so much for this contribution. I am also using Cloudflare and was veeeery exited when I saw your commit. Thank you!

[DoubleDennis]

First off, sorry if this is not the right space to ask. I am getting a bit stuck in many different information holes 😓
I believe I have set everything up correctly with the help of multiple guides.

The only part where I get stuck is adding the servicetoken to the custom headers section. Which and what part do I fill in, in what section of the custom proxy headers?

e.g. is it the entire "curl -H "CF-Access-Client-Id: <CLIENT_ID>" -H "CF-Access-Client-Secret: <CLIENT_SECRET>" https://app.example.com" into header value? and then with a random header name?
(with this one I get error logging you in, check server url, email, pw)

Or is it split up, like header name: client id, value: secret?

Another note, is the last part (url) the same url as you use for the server endpoint url?

running version IOS 1.116.1
log is showing: "Pinging server with response code 200"

[matejkramny]

@DoubleDennis can you have a look at this guide (if you haven't already), follow steps at bottom of the page (under "In the Immich app:")

Reminds me i need to merge the guide elsewhere as the author of the upstream fork isn't responding.

The response code 200 is cloudflare presenting the login page very likely

[DoubleDennis]

@matejkramny you are my hero! Thank you so much, that was the last peace of the puzzle <3
It works now!

And this guide in general I was not able to find but seems really good! Definitely recommend this one to become more publicly available.
I wil retrace my steps to see if I did anything different and/or missed something during my steps to make sure my connection is secure.

Again, thank you!

[matejkramny]

Thank you, I wrote it after merging the PR and should be living in the community documentation. I forgot to merge it

[DoubleDennis]

@matejkramny I noticed a did step 2.1 to 2.3 different as I used CLoudflare's edge certificate instead of using origin server. It was quite easy and didn't require messing around within my Ubuntu server. Would you say that is less secure? Otherwise it could potentially be easier alternative steps.

Just trying share my few cents as a newby sharing my learnings to potentially other newbies :)

[matejkramny]

@DoubleDennis depends if you have full(strict) encryption between cloudflare and your server. Your server might be presenting a certificate that cloudflare accepts but doesn't trust.

I find it useful to try to connect to your server from your machine (effectively try to bypass cloudflare). Also try port scan your server because ufw doesn't apply to docker apparently, if your dockers expose their ports to all interfaces (e.g. 0.0.0.0:port).

The guide I wrote prevents you from bypassing cloudflare via 2 mechanisms:

1. firewall limiting incoming https IP to cloudflare
2. nginx requiring the incoming request to present a client certificate

Edge certificates seem like something different, maybe i'm looking at the wrong thing?

Edge Certificates
Customize your edge certificates, which encrypt traffic between your visitors and Cloudflare.