add an app with authentication

Author: ks6088ts

.gitignore

@@ -165,3 +165,5 @@ requirements.txt
 generated
 tests/test_codegen.py
 .streamlit/*
+!.streamlit/config.yaml
+!.streamlit/secrets.toml.example

.streamlit/config.yaml

@@ -0,0 +1,17 @@
+credentials:
+  usernames:
+    jsmith:
+      email: [email protected]
+      name: John Smith
+      password: abc # To be replaced with hashed password
+    rbriggs:
+      email: [email protected]
+      name: Rebecca Briggs
+      password: def # To be replaced with hashed password
+cookie:
+  expiry_days: 30
+  key: random_signature_key # Must be string
+  name: random_cookie_name
+preauthorized:
+  emails:
+  - [email protected]

.streamlit/secrets.toml.example

@@ -0,0 +1,8 @@
+[auth]
+redirect_uri = "http://localhost:8501/oauth2callback"
+cookie_secret = "xxx"
+
+[auth.microsoft]
+client_id = "your-client-id"
+client_secret = "your-client-secret"
+server_metadata_url = "https://login.microsoftonline.com/consumers/v2.0/.well-known/openid-configuration"

docs/index.md

@@ -34,12 +34,25 @@ make codegen
 
 ### Authentication
 
+#### Credentials
+
+Run the following command to set up the credentials for the application.
+
+```shell
+# Run the application
+uv run streamlit run workshop_playwright_python/apps/streamlit_authentication.py
+```
+
+Then, type your credentials described in [.streamlit/config.yaml](../.streamlit/config.yaml) and click the "Login" button. (e.g. `jsmith:abc`, `rbriggs:def`)
+
+#### OpenID Connect
+
 To run a frontend application with authentication, you can refer to the following links.
 
 - [User authentication and information](https://docs.streamlit.io/develop/concepts/connections/authentication)
 - [Use Microsoft Entra to authenticate users](https://docs.streamlit.io/develop/tutorials/authentication/microsoft)
 
-For example, you can use the following file [.streamlit/secrets.toml](../.streamlit/secrets.toml) to set up authentication with Microsoft Entra ID.
+For example, you can use the following file [.streamlit/secrets.toml](../.streamlit/secrets.toml.example) to set up authentication with Microsoft Entra ID.
 
 ```toml
 [auth]

pyproject.toml

@@ -9,6 +9,7 @@ dependencies = [
     "playwright>=1.52.0",
     "pytest-playwright>=0.7.0",
     "streamlit>=1.45.0",
+    "streamlit-authenticator>=0.4.2",
 ]
 
 [project.optional-dependencies]

uv.lock

@@ -0,0 +1,27 @@
+import streamlit as st
+import yaml
+from streamlit_authenticator import Authenticate, LoginError
+from yaml.loader import SafeLoader
+
+# Loading config file
+with open(".streamlit/config.yaml", encoding="utf-8") as file:
+    config = yaml.load(file, Loader=SafeLoader)
+
+# Creating the authenticator object
+authenticator = Authenticate(
+    credentials=config["credentials"],
+    cookie_name=config["cookie"]["name"],
+    cookie_key=config["cookie"]["key"],
+    cookie_expiry_days=config["cookie"]["expiry_days"],
+)
+
+# Creating a login widget
+try:
+    result = authenticator.login()
+except LoginError as e:
+    st.error(e)
+
+if st.session_state["authentication_status"]:
+    st.write(f"Welcome *{st.session_state['name']}*")
+    st.title("Some content")
+    authenticator.logout("Logout", "main")