jellyfin-plugin-oidc/Jellyfin.Plugin.OIDC-Auth/Assets/OIDC-Auth-auth.html

<div>
    <p>Logging in...</p>
    <noscript>Please enable Javascript to complete the login</noscript>
    <!-- We explicitly don't want this to run we are going to inject it into the index.html iframe below -->
    <script id="injected-js" type="text/javascript">
        (() => {
            if (!(window.location.pathname.endsWith('/web/') || window.location.pathname.endsWith('/web/index.html'))) {
                console.log('Skipping iframe script due to location', window.location.pathname);
                return
            }
            window.parent.postMessage({ 'from': 'OIDC-Auth', 'type': 'script-injected' });
            async function link(request) {
                const jfUser = ApiClient._currentUser.Id;
                // Do we even need this??? we never even check the result of this request
                // TODO: If we do need this remove the ID and provider we should already know the user from the request
                return ApiClient.fetch({
                    type: 'POST',
                    url: ApiClient.getUrl(`oidc/Link/${request.provider}/${jfUser}`),
                    dataType: 'json',
                    data: JSON.stringify(request),
                    contentType: 'application/json',
                    headers: {
                        accept: 'application/json'
                    },
                })
            }
            async function auth(request) {
                return ApiClient.fetch({
                    type: 'POST',
                    url: ApiClient.getUrl(`OIDC/Auth/${request.provider}`),
                    dataType: 'json',
                    contentType: 'application/json',
                    headers: {
                        accept: 'application/json'
                    },
                    data: JSON.stringify(request),
                })
            }

            async function authenticated(response) {
                response.User.EnableAutoLogin = true;
                ApiClient.setAuthenticationInfo(response.AccessToken, response.User.Id)
                await ApiClient.onAuthenticated(ApiClient, response);
                // Sometimes it doesn't stick repeatedly set it every 200ms
                setInterval(() => {
                    ApiClient.onAuthenticated(ApiClient, response);
                }, 200);
                window.stop();
                window.parent.postMessage({ 'from': 'OIDC-Auth', 'auth': response, 'type': 'authentication-result', 'authenticated': true });
            }

            async function main(injectObject) {
                var deviceId = ApiClient.deviceId();
                var appName = ApiClient.appName();
                var appVersion = ApiClient.appVersion();
                var deviceName = ApiClient.deviceName()

                // TODO: remove provider and punyURL. Link/Auth endpoint should already have this info
                var request = { deviceId, appName, appVersion, deviceName, 'data': injectObject.data, 'punyURL': injectObject.punyURL, 'provider': injectObject.provider };

                if (injectObject.isLinking) {
                    await link(request);
                }

                auth(request).then(authenticated, () => { main(injectObject) });
            }

            function waitForWindowProperty(propName, callback, interval = 100) {
                const timer = setInterval(() => {
                    if (window[propName] !== undefined) {
                        clearInterval(timer);
                        callback(window[propName]);
                    }
                }, interval);
            }
            window.addEventListener('message', message => {
                if (message.origin !== window.location.origin && message.data.from === 'OIDC-Auth') {
                    return;
                }
                if (message.data?.type === 'oidc data') {
                    console.log('iframe correct message recieved:', message.data);
                    waitForWindowProperty('ApiClient', () => {
                        console.log('ApiClientFound');
                        main(message.data);
                    });
                    return;
                }
            });
        })()
    </script>
    <script type="application/json" id="OIDC-Auth-data">
        {"insert":"here"}
    </script>
    <iframe title="Something" id="iframe-index-html" class="docs-texteventtarget-iframe"
            sandbox="allow-same-origin allow-forms allow-scripts"
            src="index.html"
            style='position: absolute;width:0;height:0;border:0;'>
    </iframe>
    <script type="application/javascript">
        const iframe = document.getElementById('iframe-index-html');
        if (iframe.readyState === 'complete') {
            element.dispatchEvent(new Event('load', {}));
        }
        iframe.addEventListener('load', () => {

            childWindow = iframe.contentWindow;
            const script = childWindow.document.createElement('script');
            const data = JSON.parse(document.getElementById('OIDC-Auth-data').textContent);
            data.type = 'oidc data';
            data.from = 'OIDC-Auth';
            script.type = 'application/javascript'
            script.id = 'oidc-injected-js';
            script.text = document.getElementById('injected-js').text;
            const injected_script_tag = childWindow.document.body.appendChild(script);
            console.log(injected_script_tag);
            window.addEventListener('message', async message => {
                if (message.origin === window.location.origin && message.data.from === 'OIDC-Auth' && message.data.type === 'script-injected') {
                    childWindow.postMessage(data);
                }
            });
            window.addEventListener('message', async message => {
                if (message.origin !== window.location.origin || message.data.from !== 'OIDC-Auth' || message.data.type !== 'authentication-result') {
                    return;
                }
                if (message.data.authenticated) {
                    console.log('parent correct message recieved:', message.data);
                    try {
                        console.log(JSON.parse(localStorage.jellyfin_credentials).Servers[0]);
                    } catch {}
                    const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
                    while (JSON.parse(localStorage.jellyfin_credentials).Servers.find((s) => { return s.AccessToken != null }) == null) {
                        console.log("No creds found");
                        console.log(JSON.parse(localStorage.jellyfin_credentials));
                        await sleep(100);
                    }
                    window.stop();
                    setTimeout(() => {
                        if (JSON.parse(localStorage.jellyfin_credentials).Servers.find((s) => { return s.AccessToken != null }) == null) {
                            childWindow.postMessage(data);
                            // try to restart the whole thing if this fails
                        } else {
                            window.location.replace(iframe.src);
                        }
                    }, 200);

                    return;
                }
                window.alert('Failed to authenticate');
            });
        });
    </script>

</div>