Streamlit authentication from React app

🎈 Using Streamlit
1

I have embedded a streamlit app in a react app using iframe. I would like to set access control for the streamlit app as it can be accessed only through the react page. Any user who tries to access the streamlit app from url of iframe using browser inspecting should not be able to access the app. Is there a way i can do this???

1 Like
2

Hello @Sai_Pranay_Teja_Nyna,

You can use a secret token that your React app passes to the Streamlit app when loading it in an iframe. You can then modify your Streamlit app to check for the presence and correctness of this token before serving content.
React App Side

const secretToken = "YOUR_SECRET_TOKEN";
const streamlitURL = `https://yourstreamlitapp.com/?token=${secretToken}`;
// Embed the iframe with this URL

Streamlit App Side

import streamlit as st

# A simple token check function
def check_access():
    params = st.experimental_get_query_params()
    token = params.get("token", [None])[0]
    if token != "YOUR_SECRET_TOKEN":
        st.error("Access denied.")
        st.stop()

check_access()

Hope this helps!

Kind Regards,
Sahir Maharaj
Data Scientist | AI Engineer

P.S. Lets connect on LinkedIn!

➤ Want me to build your solution? Lets chat about how I can assist!
➤ Quick, practical management advice to leverage data and AI: Subscribe on LinkedIn
➤ Join my Medium community of 30k readers! Sharing my knowledge about data science and AI
➤ Website: https://sahirmaharaj.com
➤ Email: sahir@sahirmaharaj.com
➤ 100+ FREE Power BI Themes: Download Now

2 Likes
3

Thank you
But i dont want the secret token to be sent using url. Because anyone can find it by browser inspecting. Please tell another another ways of providing authentication