of exercise within the AI world over the previous couple of weeks, a current essential announcement by Streamlit that it now helps OpenID Join (OIDC) login authentication nearly handed me by.
Consumer authorisation and verification could be a essential consideration for information scientists, machine studying engineers, and others concerned in creating dashboards, machine studying proofs of idea (PoCs), and different purposes. Preserving probably delicate information personal is paramount, so that you wish to be sure that solely authorised customers can entry your app.
On this article, we’ll talk about this new characteristic of Streamlit and develop a easy app to showcase it. Our app may be easy, but it surely demonstrates all the important thing issues it is advisable to know when creating extra complicated software program.
What’s Streamlit?
For those who’ve by no means heard of Streamlit, it’s an open-source Python library designed to construct and deploy interactive internet purposes with minimal code shortly. It’s broadly used for information visualisation, machine studying mannequin deployment, dashboards, and inside instruments. With Streamlit, builders can create internet apps utilizing Python with out frontend expertise in HTML, CSS, or JavaScript.
Its key options embrace widgets for consumer enter, built-in caching for efficiency optimisation, and simple integration with information science libraries like Pandas, Matplotlib, and TensorFlow. Streamlit is especially standard amongst information scientists and AI/ML practitioners for sharing insights and fashions in a web-based interface.
For those who’d prefer to study extra about Streamlit, I’ve written a TDS article on utilizing it to create an information dashboard, which you’ll be able to entry utilizing this hyperlink.
What’s OIDC?
OpenID Join (OIDC) is an authentication protocol that builds upon OAuth 2.0. It permits customers to securely sign up to purposes utilizing their present credentials from id suppliers like Google, Microsoft, Okta, and Auth0.
It allows single sign-on (SSO) and supplies consumer id info by way of ID tokens, together with electronic mail addresses and profile particulars. In contrast to OAuth, which focuses on authorisation, OIDC is designed explicitly for authentication, making it a regular for safe, scalable, and user-friendly login experiences throughout internet and cell purposes.
On this article, I’ll present you how one can set issues up and write code for a Streamlit app that makes use of OIDC to immediate in your Google electronic mail and password. You should use these particulars to log in to the app and entry a second display screen that comprises an instance of an information dashboard.
Stipulations
As this text focuses on utilizing Google as an id supplier, in case you don’t have already got one, you’ll want a Google electronic mail tackle and a Google Cloud account. Upon getting your electronic mail, sign up to Google Cloud with it utilizing the hyperlink beneath.
https://console.cloud.google.com
For those who’re apprehensive concerning the expense of signing up for Google Cloud, don’t be. They provide a free 90-day trial and $300 price of credit. You solely pay for what you employ, and you’ll cancel your Cloud account subscription at any time, earlier than or after your free trial expires. Regardless, what we’ll be doing right here ought to incur no price. Nevertheless, I all the time advocate establishing billing alerts for any cloud supplier you join — simply in case.
We’ll return to what you should do to arrange your cloud account later.
Establishing our dev setting
I’m creating utilizing WSL2 Ubuntu Linux on Home windows, however the next also needs to work on common Home windows. Earlier than beginning a undertaking like this, I all the time create a separate Python improvement setting the place I can set up any software program wanted and experiment with coding. Now, something I do on this setting will probably be siloed and gained’t impression my different initiatives.
I take advantage of Miniconda for this, however you should use any technique that fits you greatest. If you wish to comply with the Miniconda route and don’t have already got it, you should first set up Miniconda.
Now, you possibly can arrange your setting like this.
(base) $ conda create -n streamlit python=3.12 -y
(base) $ conda activate streamlit
# Set up required Libraries
(streamlit) $ pip set up streamlit streamlit-extras Authlib
(streamlit) $ pip set up pandas matplotlib numpyWhat we’ll construct
This will probably be a streamlit app. Initially, there will probably be a display screen which shows the next textual content,
An instance Streamlit app exhibiting using OIDC and Google electronic mail for login authentication
Please use the button on the sidebar to log in.
On the left sidebar, there will probably be two buttons. One says Login, and the opposite says Dashboard.
If a consumer isn’t logged in, the Dashboard button will probably be greyed out and unavailable to be used. When the consumer presses the Login button, a display screen will probably be displayed asking the consumer to log in by way of Google. As soon as logged in, two issues occur:-
- The Login button on the sidebar modifications to Logout.
- The Dashboard button turns into accessible to make use of. This may show some dummy information and graphs for now.
If a logged-in consumer clicks the Logout button, the app resets itself to its preliminary state.
NB. I’ve deployed a working model of my app to the Streamlit neighborhood cloud. For a sneak preview, click on the hyperlink beneath. It’s possible you’ll have to “get up” the app first if nobody has clicked on it for some time, however this solely takes just a few seconds.
Arrange on Google Cloud
To allow electronic mail verification utilizing your Google Gmail account, there are some things it’s important to do first on the Google Cloud. They’re fairly easy, so take your time and comply with every step fastidiously. I’m assuming you’ve already arrange or have a Google electronic mail and cloud account, and that you just’ll be creating a brand new undertaking in your work.
Go to Google Cloud Console and log in. It’s best to see a display screen much like the one proven beneath.
It’s essential arrange a undertaking first. Click on the Venture Picker button. It’s instantly to the proper of the Google Cloud brand, close to the highest left of the display screen and will probably be labelled with the title of one among your present initiatives or “Choose a undertaking” in case you don’t have an present undertaking. Within the pop-up that seems, click on the New Venture button situated on the prime proper. This may allow you to insert a undertaking title. Subsequent, click on on the Create button.
As soon as that’s carried out, your new undertaking title will probably be displayed subsequent to the Google Cloud brand on the prime of the display screen. Subsequent, click on on the hamburger-style menu on the prime left of the web page.
- Navigate to APIs & Companies → Credentials
- Click on Create Credentials → OAuth Consumer ID
- Choose Internet utility
- Add http://localhost:8501/oauth2callback as an Approved Redirect URI
- Pay attention to the Consumer ID and Consumer Secret as we’ll want them in a bit.
Native setup and Python code
Resolve which native folder your most important Python Streamlit app file will stay in. In there, create a file, comparable to app.py, and insert the next Python code into it.
import streamlit as st
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
# ——— Web page setup & state ———
st.set_page_config(page_title="SecureApp", page_icon="🔑", structure="huge")
if "web page" not in st.session_state:
st.session_state.web page = "most important"
# ——— Auth Helpers ———
def _user_obj():
return getattr(st, "consumer", None)
def user_is_logged_in() -> bool:
u = _user_obj()
return bool(getattr(u, "is_logged_in", False)) if u else False
def user_name() -> str:
u = _user_obj()
return getattr(u, "title", "Visitor") if u else "Visitor"
# ——— Major & Dashboard Pages ———
def most important():
if not user_is_logged_in():
st.title("An instance Streamlit app exhibiting using OIDC and Google electronic mail for login authentication")
st.subheader("Use the sidebar button to log in.")
else:
st.title("Congratulations")
st.subheader("You’re logged in! Click on Dashboard on the sidebar.")
def dashboard():
st.title("Dashboard")
st.subheader(f"Welcome, {user_name()}!")
df = pd.DataFrame({
"Month": ["Jan","Feb","Mar","Apr","May","Jun"],
"Gross sales": np.random.randint(100,500,6),
"Revenue": np.random.randint(20,100,6)
})
st.dataframe(df)
fig, ax = plt.subplots()
ax.plot(df["Month"], df["Sales"], marker="o", label="Gross sales")
ax.set(xlabel="Month", ylabel="Gross sales", title="Month-to-month Gross sales Development")
ax.legend()
st.pyplot(fig)
fig, ax = plt.subplots()
ax.bar(df["Month"], df["Profit"], label="Revenue")
ax.set(xlabel="Month", ylabel="Revenue", title="Month-to-month Revenue")
ax.legend()
st.pyplot(fig)
# ——— Sidebar & Navigation ———
st.sidebar.header("Navigation")
if user_is_logged_in():
if st.sidebar.button("Logout"):
st.logout()
st.session_state.web page = "most important"
st.rerun()
else:
if st.sidebar.button("Login"):
st.login("google") # or "okta"
st.rerun()
if st.sidebar.button("Dashboard", disabled=not user_is_logged_in()):
st.session_state.web page = "dashboard"
st.rerun()
# ——— Web page Dispatch ———
if st.session_state.web page == "most important":
most important()
else:
dashboard()
This script builds a two-page Streamlit app with Google (or OIDC) login and a easy dashboard:
- Web page setup & state
- Configures the browser tab (title/icon/structure).
- Makes use of
st.session_state["page"]to recollect whether or not you’re on the “most important” display screen or the “dashboard.”
- Auth helpers
_user_obj()safely seize thest.consumerobject if it exists.user_is_logged_in()anduser_name(). Test whether or not you’ve logged in and get your title (or default to “Visitor”).
- Major vs. Dashboard pages
- Major: For those who’re not logged in, show a title/subheader prompting you to log in; in case you’re logged in, show a congratulatory message and direct you to the dashboard.
- Dashboard: greets you by title, generates a dummy DataFrame of month-to-month gross sales/revenue, shows it, and renders a line chart for Gross sales plus a bar chart for Revenue.
- Sidebar navigation
- Exhibits a Login or Logout button relying in your standing (calling
st.login("google")orst.logout()). - Exhibits a “Dashboard” button that’s solely enabled when you’re logged in.
- Exhibits a Login or Logout button relying in your standing (calling
- Web page dispatch
- On the backside, it checks
st.session_state.web pageand runs bothmost important()ordashboard()accordingly.
- On the backside, it checks
Configuring Your secrets and techniques.toml for Google OAuth Authentication
In the identical folder the place your app.py file lives, create a subfolder referred to as .streamlit. Now go into this new subfolder and create a file referred to as secrets and techniques.toml. The Consumer ID and Consumer Secret from Google Cloud needs to be added to that file, together with a redirect URI and cookie secret. Your file ought to look one thing like this,
#
# secrets and techniques.toml
#
[auth]
redirect_uri = "http://localhost:8501/oauth2callback"
cookie_secret = "your-secure-random-string-anything-you-like"
[auth.google]
client_id = "************************************.apps.googleusercontent.com"
client_secret = "*************************************"
server_metadata_url = "https://accounts.google.com/.well-known/openid-configuration"Okay, we must always now be capable to run our app. To do this, return to the folder the place app.py lives and sort this into the command line.
(streamlit) $ streamlit run app.pyIf all has gone effectively together with your code and set-up, it’s best to see the next display screen.
Discover that the Dashboard button on the sidebar needs to be greyed out since you’re not logged in but. Begin by clicking the Login button on the sidebar. It’s best to see the display screen beneath (I’ve obscured my credentials for safety causes),
When you select an account and log in, the Streamlit app show will change to this.
Additionally, you will discover that the Dashboard button is now clickable, and once you click on it, it’s best to see a display screen like this.
Lastly, log again out, and the app ought to return to its preliminary state.
Abstract
On this article, I defined that correct OIDC authorisation is now accessible to Streamlit customers. This lets you be sure that anybody utilizing your app is a reputable consumer. Along with Google, you may as well use standard suppliers comparable to Microsoft, OAuth, Okta, and others.
I defined what Streamlit was and its makes use of, and briefly described the OpenID Join (OIDC) authentication protocol.
For my coding instance, I centered on utilizing Google because the authenticator and confirmed you the prerequisite steps to set it up appropriately to be used on Google’s Cloud platform.
I additionally supplied a pattern Streamlit app that reveals Google authorisation in motion. Though it is a easy app, it highlights all strategies you require ought to your wants develop in complexity.
