Use encrypted auth token for images

[roryabraham]

Details

Uses an encrypted auth token instead of a plain one in URLs to fetch images.

Fixed Issues

Fixes https://github.com/Expensify/Expensify/issues/166503

Tests / QA Steps

1. Upload an image in a chat.
2. Verify that you can view the thumbnail image in the chat.
3. Tap on the image, and verify that you can view the full-size preview in the attachment modal.
4. Make sure you are not logged into E.com.
5. Upload a .zip file to chat.
6. Click on the attachment link for the .zip file, verify that it is downloaded without logging into E.com.
7. Log out then back in, then repeat steps 2, 3, & 6
8. Open the developer console, go to Application, search for the session key, and erase the key-value pair for encryptedAuthToken. Then refresh the page and repeat steps 2, 3, & 6.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

[roryabraham]

HOLD on https://github.com/Expensify/Web-Expensify/pull/31211

[roryabraham]

Added an Onyx migration so users don't have to sign out and back in for images to work.

[roryabraham]

Oops, I introduced a bug with the migration.

[mountiny]

In case it is different problem than you have. The branch should probably not work yet as mentioned above, but for me it keeps hanging on blank page after uploading an image. The thumbnail was loading for a long time so I refreshed the page and I get a blank blue page and the only way to make it work is to Clear site data in the inspector.

[roryabraham]

for me it keeps hanging on blank page after uploading an image

Good call out @mountiny, thanks for testing! This helped me identify a bug in the migration, which is now fixed. For posterity, the two issues here were:

1. (Web-E) The encryptedAuthToken needed to be url-encoded before being sent across the network.
2. I was missing a resolve() in the migration so the promise was hanging.

[roryabraham]

Updated!

[mountiny]

As the HOLD PR https://github.com/Expensify/Web-Expensify/pull/31211 is merged, shall I merge it or do I need to wait for the Title label to be updated?

[roryabraham]

@mountiny Good question – general rule-of-thumb is don't merge a PR with HOLD in the title. In this case we need to wait for that Web-E PR to be deployed to production.

[mountiny]

Perfect! Thanks for clarifying!

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging in version: 1.0.73-4🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production in version: 1.0.74-0🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅