移动端Streamlit+Supabase Auth刷新后Session变为None问题求助

问题描述 #

我开发的Streamlit应用采用supabase-streamlit-auth库实现用户认证与会话管理，遇到以下异常：

• 桌面浏览器刷新页面后，Session可正常保留
• 移动端浏览器刷新后，Session直接变为None

相关代码片段：

session = login_form(
    url=url,
    apiKey=key,
    providers=["google"],
)

print(session)

if not session:
    streamlit.warning('If you use Email Sign in/Sign up. Please Check Your Email To Verify Your Account. Thank you!', icon="🚨")

观察结果：仅移动端出现Session丢失，桌面端功能正常。
预期行为：移动端刷新页面后Session应保持有效。

问题解答 #

一、先排查移动端浏览器Cookie限制 #

移动端浏览器默认常开启严格隐私策略，会拦截第三方Cookie，而supabase-streamlit-auth依赖Cookie存储会话信息：

• 检查用户是否开启了浏览器的隐私模式（如Chrome隐身模式、Safari隐私浏览），这类模式会自动清除会话Cookie，导致刷新后Session丢失
• 引导用户在浏览器设置中，为你的Streamlit应用网站开启"允许Cookie"权限，关闭"阻止第三方Cookie"选项

二、修复supabase-streamlit-auth的会话持久化逻辑 #

该库默认的会话存储在移动端可能存在兼容性问题，可以手动补充会话持久化逻辑，结合st.session_state和查询参数：

# 导入必要依赖
import streamlit as st
from supabase import create_client

# 初始化Supabase客户端
supabase = create_client(url, key)

# 页面加载时优先从session_state恢复会话
if "supabase_session" in st.session_state:
    session = st.session_state["supabase_session"]
else:
    # 尝试从查询参数恢复会话并验证有效性
    query_params = st.experimental_get_query_params()
    session = None
    if "session_id" in query_params:
        try:
            session = supabase.auth.get_session(query_params["session_id"][0])
        except:
            pass
    # 如果都没有，调用登录表单
    if not session:
        session = login_form(
            url=url,
            apiKey=key,
            providers=["google"],
        )

# 登录成功后，将会话存入session_state并写入查询参数
if session:
    st.session_state["supabase_session"] = session
    st.experimental_set_query_params(session_id=session.session_id)

print(session)

if not session:
    st.warning('If you use Email Sign in/Sign up. Please Check Your Email To Verify Your Account. Thank you!', icon="🚨")

三、替代方案 #

如果上述方法无效，可以考虑更换会话管理方案：

• streamlit-authenticator库：兼容性更强，支持Cookie、SessionStorage双重存储，对移动端浏览器适配更好，支持用户名密码、OAuth等多种认证方式
• 手动基于Supabase Auth API实现：直接调用Supabase的sign_in_with_oauth等接口，登录后将会话信息存入st.session_state，同时通过st.components.v1.html插入JS代码把会话存入浏览器LocalStorage，刷新时读取LocalStorage并验证会话有效性
• Streamlit官方云用户认证：如果应用部署在Streamlit Cloud，可直接使用st.experimental_user，无需额外依赖，但仅适用于官方云环境

四、移动端会话管理最佳实践 #

• 避免依赖单一存储方式，结合st.session_state和浏览器存储（Cookie/LocalStorage），确保刷新后能从多来源恢复会话
• 测试移动端时，使用常规浏览模式而非隐私模式，覆盖Chrome、Safari、Edge等主流移动端浏览器
• 部署时确保Supabase站点URL与Streamlit应用URL同域，或在Supabase后台配置CORS允许Streamlit域名，避免跨域Cookie被拦截

内容的提问来源于stack exchange，提问作者Suyog Joshi