[SOLVED] Getting 401 Error from Cloud When Attempting to Preview Images From Cloud

Only is an issue on IOS

This is an Ionic Capacitor App and I believe the issue is that the API call is being made from the device. The same code works correctly when running from web/local host.

Everything else works fine, the images are uploaded properly, I can authenticate and retrieve documents, it is just when using the preview URL that is returned I get the 401 Error

Is this a configuration issue? Do I need to set the hostnames value in the project configuration?

I am currently out of ideas, Thanks In Advance

the SDK for Web uses cookies for session management. Typically, the cookie is sent automatically, but in some cases 3rd party cookies or some other runtime environments can cause problems.

In those cases, you might need to generate a JWT token and include that in the headers of the network request

that is interesting because it works fine with Android...

a quick search on "capacitor ios cookies" gave: https://github.com/ionic-team/capacitor/discussions/3537

since i ma using the javascript API, I would need to generate the toke and pass it with the URL that was returned from the getPreview call?

i read all that already, but that did seemed to be discussing auth

yes...this is an auth problem...

the rest of the application works fine... it is only when i try to rended the preview url

are you rendering any other images using storage.getFileView() or storage.getFileDownload()?

i was about to switch to the FileDownload call to see if i get different results

go ahead. You'll probably get the same error. Then, you can try to grant any user read access to your bucket and try again

i believe it is the client hostname is getting rejected by the server when i request using the url

we don't return a 401 for origin validation

Please try with bucket read permissions set to any

setting it to any works

right so it's an access problem because the cookie is not being sent in the network request for the image

hmm.... i would like to find a better solution

if you want to go down the cookie route, you'll need to find out what's wrong with capacitor and the cookies. otherwise, you can try to see how to pass a JWT token in the header when fetching the image...although im not sure how to do that using capacitor

i am passing the url to an image tag... not sure how i would be able to provide a token?

thanks

right...maybe capacitor exposes some special way to pass headers? 🤷🏼‍♂️

ideally, if you get cookies to work, it would work automatically

Leaving this here for anyone else who comes across this problem. I solved it by modifying my capacitor.config.ts

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

const config: CapacitorConfig = {
  appId: "io.ionic.starter",
  appName: "appwrite_1",
  webDir: "dist",
  bundledWebRuntime: false,
  plugins: {
    CapacitorCookies: {
      enabled: true,
    },
  },
};

export default config;

I added the plugins configuration

here is a video tutorial on the first part of the project , source code is linked in description - https://youtu.be/3d71O1zvlaw

[SOLVED] Getting 401 Error from Cloud When Attempting to Preview Images From Cloud