I'm trying to embed Azure Dgital Twins 3d scene into a React application, using this exact repo

https://github.com/malichishti/adt-3d-embedder-app

The app uses msal to authenticate with the azure tenant.

I created all the infrastructure as mentioned there, but when I'm running the app, getting a 403 with blob access

GET http://localhost:3000/proxy/blob/3ds/3DScenesConfiguration.json? cachebust=1762260419270 403 (This request is not authorized to perform this operation using this permission.)

I added the host entry as well, to see if that could fix this, but it did not.

Here is the proxy,

const blobProxy = createProxyMiddleware({
        changeOrigin: true,
        headers: {
            connection: 'keep-alive'
        },
        secure: true,
        target: '/',
        onProxyReq: (proxyReq) => {
            // Remove all unnecessary headers
            const newHeaderMap = {};
            validHeaders.forEach((header) => {
                const headerValue = proxyReq.getHeader(header);
                // eslint-disable-next-line no-undefined
                if (headerValue !== undefined) {
                    newHeaderMap[header] = headerValue;

                    console.log(headerValue);

                }
            });
            Object.keys(proxyReq.getHeaders()).forEach((header) => {
                proxyReq.removeHeader(header);
            });
            Object.keys(newHeaderMap).forEach((header) => {
                proxyReq.setHeader(header, newHeaderMap[header]);
            });
        },
        onProxyRes: (proxyRes) => {
            Object.keys(proxyResponseHeaders).forEach((header) => {
                proxyRes.headers[header] = proxyResponseHeaders[header];
            });
        },
        pathRewrite: {
            '/proxy/blob': ''
        },
        router: (req) => {
            const blobHost = req.headers['x-blob-host'];
            const blobHostUrl = `https://${blobHost}/`;
            const blobHostUrlObject = new URL(blobHostUrl);
            if (
                validBlobHostSuffixes.some((suffix) =>
                    blobHostUrlObject.host.endsWith(suffix)
                )
            ) {
                return blobHostUrl;
            }
            throw new Error('Invalid Blob URL');
        },
        onError: (err, req, res) => {
            const code = err.code;
            if (code == 'ECONNRESET') {
                if (
                    !req.currentRetryAttempt ||
                    req.currentRetryAttempt <= retryNumber
                ) {
                    req.currentRetryAttempt = req.currentRetryAttempt
                        ? req.currentRetryAttempt++
                        : 1;
                    console.log(
                        'Proxy server retry request attempt number: ' +
                        req.currentRetryAttempt
                    );
                    blobProxy.call(blobProxy, req, res); // resend the original request to proxy middleware again
                } else {
                    console.log(
                        'All proxy server retry attempts failed, returning error...'
                    );
                    res.status(504);
                    res.send(err.message);
                }
            } else {
                switch (code) {
                    case 'ENOTFOUND':
                    case 'ECONNREFUSED':
                        res.status(504);
                        break;
                    default:
                        res.status(500);
                }
                res.send(err.message);
            }
        }
    });

    app.use('/proxy/blob', (req, res, next) =>
        blobProxy.call(blobProxy, req, res, next)
    );