add auto click invoke auth support

README.md

@@ -81,6 +81,7 @@ Generates an HTML button that initiates the OAuth2 authorization code grant flow
 * `pkce`: accept value `S256` indicating whether to use PKCE (Proof Key for Code Exchange) for the authorization code grant flow.
 * `use_container_width`: If `True`, set the button width to the container width.
 * `icon`: The icon to be displayed on the button.
+* `auto_click`: If `True`, the button will be clicked automatically.
 
 **Returns:**
 

setup.py

@@ -5,7 +5,7 @@
 
 setuptools.setup(
     name="streamlit-oauth",
-    version="0.1.8",
+    version="0.1.9",
     author="Dylan Lu",
     author_email="dnplus@gmail.com",
     description="Simple OAuth2 authorization code flow for Streamlit",
@@ -21,8 +21,8 @@
         # By definition, a Custom Component depends on Streamlit.
         # If your component has other Python dependencies, list
         # them here.
-        "streamlit>=1.28.0",
-        "httpx-oauth>=0.4.0",
-        "python-dotenv>=1.0.0"
+        "streamlit>=1.28.1",
+        "httpx-oauth>=0.14.1",
+        "python-dotenv>=1.0.1"
     ],
 )

streamlit_oauth/__init__.py

@@ -65,7 +65,7 @@ def __init__(self, client_id=None, client_secret=None, authroize_endpoint=None,
         revoke_token_endpoint=revoke_token_endpoint,
       )
 
-  def authorize_button(self, name, redirect_uri, scope, height=800, width=600, key=None, pkce=None, extras_params={}, icon=None, use_container_width=False):
+  def authorize_button(self, name, redirect_uri, scope, height=800, width=600, key=None, pkce=None, extras_params={}, icon=None, use_container_width=False, auto_click=False):
     if pkce:
       code_verifier, code_challenge = _generate_pkce_pair(pkce)
       extras_params = {**extras_params, "code_challenge": code_challenge, "code_challenge_method": pkce}
@@ -88,6 +88,7 @@ def authorize_button(self, name, redirect_uri, scope, height=800, width=600, key
       key=key,
       icon=icon,
       use_container_width=use_container_width,
+      auto_click=auto_click,
     )
     # print(f'result: {result}')
 

streamlit_oauth/frontend/main.js

@@ -5,7 +5,6 @@ const div = document.body.appendChild(document.createElement("div"))
 const button = div.appendChild(document.createElement("button"))
 const icon = button.appendChild(document.createElement("span"))
 const text = button.appendChild(document.createElement("span"))
-button.className = "card"
 icon.className = "icon"
 text.textContent = "AUTHORIZE"
 button.onclick = async () => {
@@ -69,6 +68,12 @@ function onRender(event) {
   if(data.args["use_container_width"]) {
     button.style.width = "100%"
   }
+
+  if(data.args["auto_click"] && !window.opener && !window.clicked) {
+    button.click()
+    window.clicked = true
+  }
+
   console.log(`authorization_url: ${authorization_url}`)
   Streamlit.setFrameHeight()
 }