1. Declare that you want to use PodOS's authenticated fetch.
<![CDATA[<script src="../component-interop.js"
data-stage="auto"
data-manifest="sol-components.manifest.json pod-os.manifest.json"
data-components="sol-include @pod-os/elements"
<b>data-objects="auth:pod-os"</b>
></script>]]>
2. Put a PodOS button and <pos-resource> element in the page
<![CDATA[<pos-app>
<pos-login></pos-login>
<pos-resource id="pos-priv"><pos-container-contents></pos-container-contents></pos-resource>
<sol-include id="swc-priv" raw></sol-include>
</pos-app>]]>
3. Listen for login to finish, then update URLs.
<![CDATA[<script type="module">
const adopted = () => typeof window.SolidWebComponents?.adoptedFetch === 'function';
document.addEventListener('pod-os:loaded', (e) => {
e.detail.os.observeSession().subscribe((s) => {
if (!s.isLoggedIn || !s.webId) return;
const priv = new URL(s.webId).origin + '/private/';
document.getElementById('pos-priv').setAttribute('uri', priv);
(function go() {
adopted() ? document.getElementById('swc-priv').setAttribute('source', priv)
: setTimeout(go, 20);
})();
});
});
</script>]]>