I want to render files in my Next.JS web application from a secure API. The API returns the the following data
{
"name": "Test1.docx",
"contentUri": "https://api.mypurecloud.ie/api/v2/downloads/xxx",
"contentType": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
}
I am using the react-doc-viewer NPM package. There is no issue with rendering unsecured files. Can anyone show me how to pass the authentication token to the API call with this package?
OR Is there any other way to render the files in the browser without having to download them on the client machine?
My code is
export default function Home() {
const docs = [
{ uri: '/test.pdf' }, // Local File
{ uri: 'https://url-to-my-pdf.pdf' }, // secure remote File
];
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1 className={styles.title}>Document Viewer</h1>
<DocViewer pluginRenderers={DocViewerRenderers} documents={docs} />
</main>
</div>
);
}