Example for styling the login button

[MarkusDressel]

Thanks for creating this library.

I am currently struggling to stlye the login button.

Can you show an example on how to style the button in the streamlit app?

[mcclown]

I've managed to get it to work but it requires a hacky workaround. I haven't found a better way yet.

• First I had to set html_id and class_name when I created the login_token
• Then I had to inject some javascript to set the required styles/CSS.
  • That javascript is injected in an iframe, using components.html
  • Then calls back up to the parent document to find the login ifram.
  • Finally it injects your CSS into the head of the login iframe

Hopefully, we can get a real way to do this soon because this is pretty ugly. Injecting an iframe, to inject some javascript, to inject styles into another iframe is not a real solution.

For the moment, here is the code you can use to get styling working, for the login button.

import streamlit as st
import streamlit.components.v1 as components

login_token =msal_authentication(
    auth={
        "clientId": os.environ.get("MSAL_CLIENT_ID"),
        "authority": os.environ.get("MSAL_AUTHORITY"),
    },
    cache={
        "cacheLocation": "localStorage",
        "storeAuthStateInCookie": False,
    },
    class_name="login-button",
    html_id="login-button",
)

components.html("""
            <script>
                
                function findIframeByTitle(doc, title) {
                    var iframes = doc.getElementsByTagName('iframe');
                    for (var i = 0; i < iframes.length; i++) {
                        if (iframes[i].title === title) {
                            return iframes[i];
                        }
                    }
                    return null; // Return null if no matching iframe is found
                }

                const doc = window.parent.document;

                const iframe = findIframeByTitle(doc, 'msal_streamlit_authentication.msal_authentication');

                const css = '#login-button { color: #31333F; }'
                    
                        
                // Wait for the iframe to fully load
                iframe.onload = function() {
                    // Access the iframe's document
                    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
                    
                    var styleElement = iframeDocument.createElement('style');
                    // Set the CSS text of the style element
                    styleElement.textContent = css;
                    // Append the style element to the head of the iframe's document
                    iframeDocument.head.appendChild(styleElement);
                    console.log('Styles injected successfully.');
                };
            </script> 
""", height=0, width=0)

[Bombras]

Hi @mcclown,
I used this javascript to adjust appearance of my login button. I use dark theme in Streamlit and the Login button was originally very dark and hard to see. The workaround is not beautifull, but it works, thank you very much for that piece :)

@mstaal , looking forward to #25 (comment)
Thank you both

[utkalext]

I've managed to get it to work but it requires a hacky workaround. I haven't found a better way yet.

• First I had to set html_id and class_name when I created the login_token

• Then I had to inject some javascript to set the required styles/CSS.

  • That javascript is injected in an iframe, using components.html
  • Then calls back up to the parent document to find the login ifram.
  • Finally it injects your CSS into the head of the login iframe

Hopefully, we can get a real way to do this soon because this is pretty ugly. Injecting an iframe, to inject some javascript, to inject styles into another iframe is not a real solution.

For the moment, here is the code you can use to get styling working, for the login button.

import streamlit as st
import streamlit.components.v1 as components

login_token =msal_authentication(
    auth={
        "clientId": os.environ.get("MSAL_CLIENT_ID"),
        "authority": os.environ.get("MSAL_AUTHORITY"),
    },
    cache={
        "cacheLocation": "localStorage",
        "storeAuthStateInCookie": False,
    },
    class_name="login-button",
    html_id="login-button",
)

components.html("""
            <script>
                
                function findIframeByTitle(doc, title) {
                    var iframes = doc.getElementsByTagName('iframe');
                    for (var i = 0; i < iframes.length; i++) {
                        if (iframes[i].title === title) {
                            return iframes[i];
                        }
                    }
                    return null; // Return null if no matching iframe is found
                }

                const doc = window.parent.document;

                const iframe = findIframeByTitle(doc, 'msal_streamlit_authentication.msal_authentication');

                const css = '#login-button { color: #31333F; }'
                    
                        
                // Wait for the iframe to fully load
                iframe.onload = function() {
                    // Access the iframe's document
                    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
                    
                    var styleElement = iframeDocument.createElement('style');
                    // Set the CSS text of the style element
                    styleElement.textContent = css;
                    // Append the style element to the head of the iframe's document
                    iframeDocument.head.appendChild(styleElement);
                    console.log('Styles injected successfully.');
                };
            </script> 
""", height=0, width=0)

I was able to get my button styled using this method (thanks for that!), but I second that it is ugly, and a better way to style is much needed. Thanks for the great work!