Assets not loading when hit url with auth token in react native and web also

Web
1
Document html, body, .frame { width: 1080px; height: 800px; margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; padding: 20px; font-size: 14px; border: none; } 
    .warning {
        background-color: #df68a2;
        padding: 3px;
        border-radius: 5px;
        color: white;
    }
</style>

Ready Player Me iframe example

  • Click the "Open Ready Player Me" button.
  • Create an avatar and click the "Done" button when you're done customizing.
  • After creation, this parent page receives the URL to the avatar.
  • The Ready Player Me window closes and the URL is displayed.

If you have a subdomain, replace the 'demo' subdomain in the iframe source URL with yours. 

<input type="button" value="Open Ready Player Me" onClick="displayIframe()" />
<p id="avatarUrl">Avatar URL:</p>

<iframe id="frame" class="frame" allow="camera *; microphone *; clipboard-write" hidden></iframe>

<script>
    const subdomain = 'demo'; // Replace with your custom subdomain
    const frame = document.getElementById('frame');

    frame.src = `https://demo-0x9uml.readyplayer.me/avatar?frameApi&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY2NGRkYzRjNDI5ZTZlMzljYWMxY2E3MiIsInBhcnRuZXIiOiJkZW1vLTB4OXVtbCIsImlhdCI6MTcxNjUzMzQ3MCwiZXhwIjoxNzE2NTMzNDg1fQ.CE3RwlS3f9W6B-8r5-VZimYuAdJ57r6idUgSbXUJCYw`;

    window.addEventListener('message', subscribe);
    document.addEventListener('message', subscribe);

    function subscribe(event) {
        const json = parse(event);

        if (json?.source !== 'readyplayerme') {
            return;
        }

        // Susbribe to all events sent from Ready Player Me once frame is ready
        if (json.eventName === 'v1.frame.ready') {
            frame.contentWindow.postMessage(
                JSON.stringify({
                    target: 'readyplayerme',
                    type: 'subscribe',
                    eventName: 'v1.**'
                }),
                '*'
            );
        }

        // Get avatar GLB URL
        if (json.eventName === 'v1.avatar.exported') {
            console.log(`Avatar URL: ${json.data.url}`);
            document.getElementById('avatarUrl').innerHTML = `Avatar URL: ${json.data.url}`;
            document.getElementById('frame').hidden = true;
        }

        // Get user id
        if (json.eventName === 'v1.user.set') {
            console.log(`User with id ${json.data.id} set: ${JSON.stringify(json)}`);
        }
    }

    function parse(event) {
        try {
            return JSON.parse(event.data);
        } catch (error) {
            return null;
        }
    }

    function displayIframe() {
        document.getElementById('frame').hidden = false;
    }
</script>
![Screenshot 2024-05-24 at 12.22.47 PM|690x382](upload://mtL2kOWBV1IW0SogXu7KjGrZ2um.jpeg)
2

Hi there,

Could you confirm that it works for you now?

3

yes its working now.