Using sharepoint files in an external web application

Question

Hiya

As the title suggests, I'm trying to create a web application that uses sharepoint files. These files are just for display, so you can look through the content of it, without having to click/use sharepoint. The app is hosted on Azure, with the proper app registrations, so it has full access to the sharepoint.

The way I'm trying to achieve the visualisation of such files, is with a direct link of the format (https://xyz.sharepoint.com/sites/sitename/documents/pathtofilename.pdf

These files can be a .docx or a .pdf

We can't allow externally sharing files, so a share link isn't something to consider.
What I already tried to do is:

• using an IFrame with the link just directly into the src (this gives an frame ancestor CSP error)
• using the npx-doc-viewer component (this gives an error with authentication - probably an underlying CSP error)
• downloading the file when loading in the page, and then using that downloaded file (link is a local link to the downloaded file). This works kinda, but isn't a desired solution, since it only works with .pdf and gives the error: NG0904: unsafe value used in a resource URL context.

I'm all ears for another, proper solution!

Any help would be welcome!