Embed API Domain not Authorized

Hi,
I'm currently developing a React Typescript website for reviewing and sorting PDFs. To display the PDFs I use the embed api.

Unfortunately I always get a message that my domain is not authorized. But this is not true. I have registered the domain that leads to the UI. The PDFs are provided via API but given via a FilePromise of the Adobe API to display. What could be the reason for this? After several times recreate the client security code times it works for a few minutes / hours and then again not at all.

Are there any official Typescript-React examples? But since it works every now and then, the logic should be correct?

Thanks for your help

Translated with www.DeepL.com/Translator (free version)

Best Regards

SDK implementation:

/*
Copyright 2020 Adobe
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file in
accordance with the terms of the Adobe license agreement accompanying
it. If you have received this file from a source other than Adobe,
then your use, modification, or distribution of it requires the prior
written permission of Adobe.
*/

export class ViewSDKClient {
    
    constructor() {
        this.readyPromise = new Promise((resolve) => {
            if (window.AdobeDC) {
                resolve();
            } else {
                /* Wait for Adobe Document Services PDF Embed API to be ready */
                document.addEventListener("adobe_dc_view_sdk.ready", () => {
                    resolve();
                });
            }
        });
        this.adobeDCView = undefined;
    }

    ready() {
        return this.readyPromise;
    }

    previewFile(divId, viewerConfig, url, filename, id) {
        const config = {
            /* Pass your registered client id */
            clientId: `${process.env.REACT_APP_ADOBE_CLIENT_ID}`,
        };
        if (divId) { /* Optional only for Light Box embed mode */
            /* Pass the div id in which PDF should be rendered */
            config.divId = divId;
        }
        /* Initialize the AdobeDC View object */
        this.adobeDCView = new window.AdobeDC.View(config);

        /* Invoke the file preview API on Adobe DC View object */
        const previewFilePromise = this.adobeDCView.previewFile({
            /* Pass information on how to access the file */
            content: {
                /* Location of file where it is hosted */
                location: {
                    url: url,
                    /*
                    If the file URL requires some additional headers, then it can be passed as follows:-*/
                    headers: [
                        {
                            key: "Authorization",
                            value: `Bearer xxx`,
                        }
                    ]
                    
                },
            },
            /* Pass meta data of file */
            metaData: {
                /* file name */
                fileName: filename,
            }
        }, viewerConfig);

        return previewFilePromise;
    }

    previewFileUsingFilePromise(divId, filePromise, fileName) {
        /* Initialize the AdobeDC View object */
        this.adobeDCView = new window.AdobeDC.View({
            /* Pass your registered client id */
            clientId: `${process.env.REACT_APP_ADOBE_CLIENT_ID}`,
            /* Pass the div id in which PDF should be rendered */
            divId,
        });

        /* Invoke the file preview API on Adobe DC View object */
        this.adobeDCView.previewFile({
            /* Pass information on how to access the file */
            content: {
                /* pass file promise which resolve to arrayBuffer */
                promise: filePromise,
            },
            /* Pass meta data of file */
            metaData: {
                /* file name */
                fileName: fileName
            }
        }, {});
    }

    registerSaveApiHandler(profile,callback) {
        /* Define Save API Handler */
        const saveApiHandler = (metaData, content, options) => {
            console.log(metaData, content, options);
            console.log("Save btn pressed");
            callback(content);
            return new Promise(resolve => {
                /* Dummy implementation of Save API, replace with your business logic */
                setTimeout(() => {
                    const response = {
                        code: window.AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
                        data: {
                            metaData: Object.assign(metaData, {updatedAt: new Date().getTime()})
                        },
                    };
                    resolve(response);
                }, 2000);
            });
        };
        this.adobeDCView.registerCallback(
            window.AdobeDC.View.Enum.CallbackType.GET_USER_PROFILE_API,
            function() {
               return new Promise((resolve, reject) => {
                  resolve({
                     code: window.AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
                     data: profile
                  });
               });
            },
         {});
        this.adobeDCView.registerCallback(
            window.AdobeDC.View.Enum.CallbackType.SAVE_API,
            saveApiHandler,
            {}
        );
    }

    registerEventsHandler() {
        /* Register the callback to receive the events */
        this.adobeDCView.registerCallback(
            /* Type of call back */
            window.AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
            /* call back function */
            event => {
                console.log(event);
            },
            /* options to control the callback execution */
            {
                /* Enable PDF analytics events on user interaction. */
                enablePDFAnalytics: true,
            }
        );
    }
}

export default ViewSDKClient;

Function Component to View:

export const PDFView: React.FunctionComponent<PDFViewProps> = (props) =>{
    console.debug('Rendering PDFView', props);
    const { accounts } = useMsal();
    const profile = {
        userProfile: {
            name: accounts[0].name,
            email: accounts[0].username
        }
      };
    const dispatch = useDispatch();
        const viewSDKClient = new ViewSDKClient();
        viewSDKClient.ready().then(() => {

            fetch(getDownloadDocumentUrl(props.invoice.id),{

                method: 'GET',
                //Force to receive data in a Blob Format
                headers: {
                    'Access-Control-Allow-Origin' : '*',
                    'Authorization': `Bearer xxxxx`,
            }
            }).then(res => {

                
                viewSDKClient.previewFileUsingFilePromise("pdf-div", Promise.resolve(res.arrayBuffer()), props.invoice.name);
                viewSDKClient.registerSaveApiHandler(profile,function(data : any){
                    if(props.invoice.id !== undefined)
                    dispatch(updateInvoiceContent(props.invoice.id, data));
                });
            }).catch(error => {
                console.log(error);
            });
        });
    return (<>
    <div id="pdf-div" className="w-100"/>
    </>);
}